Echarts填坑记录

最近项目有个月报分析，里边用到了柱状图，堆叠图，环形图，饼图，折线图这几种基本图表。
自己封装的chart组件：

<!-- 图表组件-->
<template>
    <div :id="echartId" :class="className">
    </div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.min';
export default {
    name: 'Chart',
    props: {
        echartId: {
            type: String,
            default: ''
        },
        className: {
            type: String,
            default: ''
        },
        option: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    watch: {
        option: {
            handler(val) {
                this.initEcharts();
            },
            deep: true
        }
    },
    mounted() {
        this.initEcharts();
    },
    methods: {
        initEcharts() {
            const chartObj = echarts.init(document.getElementById(this.echartId));
            // 响应式
            window.onresize = function () {
                chartObj.resize();
            };
            chartObj.setOption(this.option);
            //环形图点击内环，外环数据联动 
            if (this.echartId === 'cost-spread') {
                chartObj.off('click');
                chartObj.on('click', (params) => {
                    this.$emit('updateIndex', params);
                    this.initEcharts();
                });
           }
        }
    }
};
</script>

问题
1）图表第一次渲染是没问题的。当切换筛选条件第二次渲染的时候，会把第一次的数据合并。
解决办法：应该设置mychart.setoption({},true);
原因：chart.setOption(option,notMerge,lazyUpdate);
option:图表的配置项和数据
notMerge:可选，是否不跟之前设置的option进行合并，默认为false，即合并。（这里是导致二次渲染不成功的根本）
lazyUpdate:可选，在设置完option后是否不立即更新图表，默认为false，即立即更新。
2）一个cavans里有多个图表，比如环形图和柱状堆叠图。
tooltip对于柱状堆叠图和环形图的用法不一样。所以要在柱状堆叠图的grid里再设置一遍。
并且实现堆叠图hover当前鼠标所在位置数值。

tooltip: {
                    trigger: 'item' （饼图）/'axis'（grid坐标轴）,
                    axisPointer: {
                        type: "cross",
                        label: {
                            show: false,
                            formatter: function (params) {
                                if (params.seriesData.length === 0) {
                                    // 鼠标对应的y轴数据
                                    window.mouseCurValue = params.value;
                                }
                            }
                        }
                    },
                    formatter: function (params) {
                      //堆叠图
                        if (Array.isArray(params)) {
                            let res = "", sum = 0, sub = 0, arr = [], brr = [];
                            params.forEach(i => {
                                if (i.data > 0) {
                                    arr.push(i);
                                } else {
                                    brr.push(i);
                                }
                            });
                            if(window.mouseCurValue > 0) {
                                for (let i = 0; i < arr.length; i++) {
                                    let series = arr[i];
                                    series.seriesName = series.seriesName.indexOf('other') > -1 ? 'others' : series.seriesName;
                                    sum += Number(series.data);
                                    if (sum >= window.mouseCurValue) {
                                        res = series.axisValue + "<br/>" + series.marker + series.seriesName + ": " + format.commafy(series.data) + "<br/>";
                                        break;
                                    }
                                }
                            } else {
                                for (let i = 0; i < brr.length; i++) {
                                    let series = brr[i];
                                    series.seriesName = series.seriesName.indexOf('other') > -1 ? 'others' : series.seriesName;
                                    sub += Number(series.data);
                                    if (sub <= window.mouseCurValue) {
                                        res = series.axisValue + "<br/>" + series.marker + series.seriesName + ": " + format.commafy(series.data) + "<br/>";
                                        break;
                                    }
                                }
                            }
                            return res;
                        } else {
                            let name = params.name.indexOf('other') > -1 ? 'others' : params.name;
                            return  name + ": " + utils.millionMoney(params.value);
                        }
                    }
                }

3）label 字体样式是否折行，折行样式

label: {
                        normal: {
                            formatter: function (p) {
                                let str = '{a|' + p.data.costName + '}{abg|}\n{hr|}\n{c|'+ p.name + '：' + p.value  + ' }{per|' +  p.percent + '%}';
                                return str;
                            },
                            rich: {
                                a: {
                                    fontSize: 10,
                                    lineHeight: 17,
                                    color: '#999',
                                    align: 'center'
                                },
                                hr: {
                                    width: '100%',
                                    height: 0
                                },
                                c: {
                                    fontSize: 10,
                                    lineHeight: 17,
                                    color: '#333',
                                    align: 'left'
                                },
                                per: {
                                    fontSize: 10,
                                    borderRadius: 2,
                                    color: 'white',
                                    align: 'left',
                                    padding: [1, 4, 2, 4],
                                    backgroundColor: '#727272',
                                    borderRadius: 2
                                }
                            }
                        }
                    },