ECharts的按需引用与简单使用

背景：

开发了个小需求，使用到了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