背景:
开发了个小需求,使用到了echarts,浅浅记录一下
鼠标悬浮出现的值为data中的name和value
页面直接展示的值为series中formatter的值
1、安装
通过npm安装:
npm install echarts --save
2、引入
按需引入,可以只打包需要的模块以减少包体积
import ECharts from 'vue-echarts';
//引入echarts核心模块,核心模块提供了echarts使用必须要的接口
import * as echarts from 'echarts/lib/echarts.js';
//引入提示框,直角坐标系,提示,组件后缀都为 Component
import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
//引入柱状图图表,饼图等,图表后缀都为 Chart
import { BarChart, LineChart, PieChart } from 'echarts/charts';
//注册必须的组件
echarts.use([TooltipComponent, GridComponent, LegendComponent, PieChart, LineChart, BarChart]);
3、注册
components: {
'v-chart': ECharts,
},
4、使用
<v-chart :option="echartsData" @click="changeCateCharts" style="width: 500px;height: 320px;"/>
echartsData: {
tooltip: {
trigger: 'item',
},
color: ['#6a82be', '#afd160', '#766ab2' ],
series: [
{
name: '',
type: 'pie',
radius: ['50%', '60%'],
label: {
formatter: (value) => {
return `${value.data.name}\n${(value.percent || 0)}%`
},
},
data: []
},
],
},
data可以动态赋值,比如在一个方法中去处理,其中name和value是必须的
changeTargetData(val) {
this.echartsData.series[0].data = this.channelList.map(item => {
return {
name: item.channelName,
value: this.formatNumber(item.accountReportViewDto[val]),
proportion: item.accountReportViewDto[this.formatProportion(val)],
children: item.channelDetailList
}
})
...
},
有个bug要注意,后端返回的value值可能是有千分位的,比如2,213,692,如果直接使用这个值,控制台不会报错但是页面出不来图形。所以要对特殊字符比如千分号进行处理,如上使用了自定义的formatNumber方法,处理成正常数字。
//格式化数字
formatNumber(num) {
if(!num) return ''
return num.replace(/[,¥%]/g, '')
},
ps:这里使用的是vue-echarts,在做一些特殊配置时会受版本限制,不是特别好,建议直接使用echarts