安装
在vue中安装echarts cnpm install echarts --save按需导入 这里我新建了一个新的文件，将按需导入的代码全放里面 // 按需导入echarts图表 import echarts from 'echarts/lib/echarts'; // 再引入你需要使用的图表类型，标题，提示信息等 import 'echarts/lib/chart/bar'; // 导入柱状图 import 'echarts/lib/chart/line'; // 导入折线图 import 'echarts/lib/chart/pie'; // 导入饼状图 import 'echarts/lib/component/title'; import 'echarts/lib/component/legend'; // 导入 import 'echarts/lib/component/tooltip'; //导入提示 import 'echarts/lib/component/toolbox'; import 'echarts/lib/component/legendScroll';// 图例翻译滚动 export default echarts;然后哪个文件用到echarts就引入这个文件，用法如图
import echarts from './echart';现在已经安装注册引入完毕，只管使用就好啦~ 使用
首先需要准备一个具备宽高的DOM容器，一般使用div，放echarts用。 <div class="echart-container" ref="container"></div> <style lang='scss' scoped> .echart-container { width: 250px; height: 250px; } </style>JS部分
<script> import echarts from './echart'; //按需引入echarts export default { mounted() { this.initEcharts(); // mounted里面调用初始化echarts的函数，一般mounted里面初始化图表相关东西，created里面初始化页面的整体数据 }, methods: { // 三个参数的使用，使得echarts能够动态获取数据，调用此组件只要传此三个参数过来就能动态调用了 initEcharts(legendName, name, pieData) { // 初始化echarts图表 const chart = echarts.init(this.$refs.container); // 图表的配置项 const option = { // 提示框信息 tooltip: { show: false, //控制显隐 trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)', // 提示框显示所占百分比 }, // 图例，标题下面一点点 legend: { bottom: 4, left: 'center', textStyle: { // 颜色 color: 'white', }, data: legendName, //展示的内容 }, // 无块饼状图每部分的颜色 color: ['#9196f6', '#f1817f', '#00a3df', '#11dfb7', '#9c1db7'], series: [ { name, type: 'pie', //类型：饼状图 radius: ['45%', '57%'], // 控制饼状图的大小，两个radius使他变成环形图， center: ['50%', '36%'], // 图距离左右，上下距离的百分比 avoidLabelOverlap: false, hoverAnimation: false, // 是否展示hover鼠标移入的动画效果 // 标签 label: { color: 'rgba(255, 255, 255, 1)', }, // 连接标签的线 labelLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)', }, smooth: 0.2, length: 10, //线的长度 length2: 10, //线拐点的长度 }, // 当鼠标hover滑过时，标签的样式 emphasis: { label: { show: true, fontWeight: 'bold', }, }, // 数据源 data: pieData, }, ], }; chart.setOption(option); }, }, }; </script>基础组件既然已经写好了，上调用组件
<template> <div class="box-container"> <echart1 ref="pie_echart"></echart1> </div> </template> <script> import echart1 from './pie_echart.vue'; export default { // 子父组件传值,靠props了，此处是子组件 props: { title: { type: String, default() { return ''; }, }, pieChartData: { type: Object, // 类型：对象， default() { // 默认值 return { lengendName: ['A行', 'B行', 'C行', 'D行', 'E行'], sericeData: [ { value: 335, name: 'A行' }, { value: 310, name: 'B行' }, { value: 274, name: 'C行' }, { value: 235, name: 'D行' }, { value: 400, name: 'E行' }, ], }; }, }, }, components: { echart1, }, data() { return { }; }, // 监听主要数据pieChartData的变化， watch: { pieChartData: { deep: true, //是否深度监听？是 handler() { // 如果监听的数据发生变化，就执行下列函数 const { lengendName, sericeData } = this.pieChartData; this.$refs.pie_echart.initEcharts(lengendName, sericeData); }, }, }, mounted() { const { lengendName, sericeData } = this.pieChartData; this.$refs.pie_echart.initEcharts(lengendName, sericeData); }, }; </script>再上调用上面组件的组件，简直俄罗斯套娃哈哈哈，
// 父组件传值，传值方式 在HTML标签里面直接写，对应子组件props中的，此处的值写在return里面 <PieChart :title="pieTitle" :pieChartData="pieDat"/> <script> import PieChart from '@/views/panel/box3.vue'; import { chartData } from './data'; export default { components: { PieChart, }, // vuex监听 watch: { '$store.state.currentCity': 'changData', }, data() { return { pieTitle: '天湖区网点存款份额', pieDat: { lengendName: ['A行', 'B行', 'C行', 'D行', 'E行'], sericeData: [ { value: 335, name: 'A行' }, { value: 310, name: 'B行' }, { value: 274, name: 'C行' }, { value: 235, name: 'D行' }, { value: 400, name: 'E行' }, ], }, }; }, methods: { changData() { if (this.$store.state.currentCity.type === 'one) { this.pieTitle = chartData.one.pie.title; this.pieDat = chartData.one.pie.pieDat; // 这里涉及到数据封装 } if (this.$store.state.currentCity.type === 'two') { this.pieTitle = chartData.two.pie.title; this.pieDat = chartData.two.pie.pieDat; } }, }, }; </script>再上如何封装数据 单独创建一个js文件，我这里叫data吧
const chartData = { one: { pie: { title: '区域网点', pieDat: { lengendName: ['A行', 'B行', 'C行', 'D行', 'E行'], sericeData: [ { value: 35, name: 'A行' }, { value: 310, name: 'B行' }, { value: 174, name: 'C行' }, { value: 135, name: 'D行' }, { value: 600, name: 'E行' }, ], }, }, }, two: { pie: { title: '分行网点', pieDat: { lengendName: ['A行', 'B行', 'C行', 'D行', 'E行'], sericeData: [ { value: 15, name: 'A行' }, { value: 10, name: 'B行' }, { value: 274, name: 'C行' }, { value: 135, name: 'D行' }, { value: 600, name: 'E行' }, ], }, }, }, }; export { chartData };echarts属性设置写的很详细的一篇 添加链接描述
