echarts踩坑经验分享

Echarts踩坑经验分享

一、echarts图表自适应展示问题

遇到问题：在概览页面使用了四次echats图表，使用window.onresize进行图表自适应展示，只有最后一个图表可以随着浏览器界面自适应展示，其他三个都不生效。

this.myChart = Echarts.init(this.$refs[this.chartType]);
window.onresize = function () {
    myChart.resize()
}

解决方式：在Vue中使用echarts时，要注意多个子组件中都存在window.onresize时，后一个会把前一个覆盖，导致之前的onresize都失效。可以使用addEventListener方法添加监听来解决此问题。

methods: {
  // 自适应展示图表方法
    chartResize () {
      this.myChart.resize();
    }
},
mounted () {
    window.addEventListener('resize', this.chartResize); 
},
// 添加了监听事件记得要销毁
beforeDestroy () {
    window.removeEventListener('resize', this.chartResize);  
}

二、在使用echarts后不要忘记销毁，当图表数据更新后要初始化图表

watch: {
    meetingTrend (val) {
        if (val) {
            this.options.xAxis.data = val.date;
            this.options.series[0].data = val.meetingNum;
            // 数据更新时记得初始化图表才能生效
            this.initCharts();
        }
    },
}
methods: {
    initCharts () {
        if (this.myChart === null) {
            this.myChart = Echarts.init(this.$refs[this.chartType]);
        }
        this.myChart.setOption(this.options);
    }
},
mounted () {
    // 初始化Echarts
    this.initCharts();
},
beforeDestroy () {
    // 最后要记得销毁echarts
    if (this.meChart) {
        this.myChart.dispose();
        this.meChart = null;
    }
}

三、tooltip提示中小圆圈的颜色设置

遇到问题：目标是自定义该小圆圈颜色，并可自定义样式（中间增加白色小圆圈）。echarts中有专门的tooltip配置项来设置提示气泡的样式和内容。

tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 0, 0, .4)',
    textStyle: {
        color: '#fff'
    },
    // 为了达到效果，在此函数里进行了设置color的操作，但国际化问题无法解决
    formatter (params) {
        let item = params[0];
        const statusMap = new Map([
            ['会议数', '#1c79f4'],
            ['日均会议室使用率', '#32db32'],
            ['平均会议时长', '#f9ba3d'],
            ['设备平均使用时长', '#f66c6c']
        ]);
        let my_color = statusMap.get(item.seriesName);
        let markerDom = `<span style="display:inline-block; margin-right:4px;           border-radius: 10px; width: 10px; height: 10px; background-color:${my_color};"><p style="display: float; margin: 2px 0 0 3px; border-radius: 10px; width: 4px; height: 4px; background-color:#fff;"></p></span>`;
        return `${item.axisValue}</br>${markerDom}${item.seriesName}：${item.data}`;
    }
},

​ 刚开始太执着于在tooltip配置项中解决问题，导致代码比较复杂，而且由于是复用组件，在创建映射表时只能使用tooltip中的seriesName字段来区分，tooltip中无法做国际化（还未解决），当切换到英文环境时，seriesName就不再是中文名称，就会导致圆圈样式失效。

解决方式：其实大可不必这么复杂，只要在this.options.series[0].color中设置好想要展示的颜色，tooltip配置项中formatter参数中就会带有你所设置的颜色，不必在tooltip配置项中单独去处理。

mothods: {
    chartInfo (item) {
        const chartColorMap = new Map([
            ['meetingLine', '#1c79f4'],
            ['roomLine', '#32db32'],
            ['aveMeetingLine', '#f9ba3d'],
            ['aveboardLine', '#f66c6c']
        ]);
        // 只要在此处设置color即可
        this.options.series[0].color = chartColorMap.get(item);
},
mounted () {
    this.chartInfo(this.chartType);
}

// 不必在此配置项再进行处理，直接拿formatter参数里的color属性展示即可
tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 0, 0, .4)',
    textStyle: {
        color: '#fff'
    },
    formatter (params) {
        let item = params[0];
        let markerDom = `<span style="display: inline-block; margin-right: 8px; border-radius: 50%; width: 10px; height: 10px; background-color: ${item.color};"><p style="display: float; margin: 3px 0 0 3px; border-radius: 50%; width: 4px; height: 4px; background-color: #fff;"></p></span>`;
        return `${item.axisValue}</br>${markerDom}${item.seriesName}：${item.data}`;
    }
}

暂时这些，后续有相关坑的话还会继续补充。。。