Echarts操作合集

1.自定义tooltip

堆叠图如果图例太多，就会导致很多空数据，因此只显示有数据的条目

this.chart.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(params) {
            // params是一个包含提示框相关信息的对象数组
            // params[0]是第一个数据点的信息，params[1]是第二个数据点的信息，等等
            // params[0]和params[1]等对象包含以下属性：
            //      name: 数据点的名称
            //      value: 数据点的值
            //      seriesName: 数据点所属系列的名称
            //      componentSubType: 数据点所属组件的子类型（例如，“line”，“bar”）
            //      componentType: 数据点所属组件的类型（例如，“xAxis”，“yAxis”）
            //      etc.
            console.log('ppppp', params)
            var a = ''
            for (var i = 0; i < params.length; i++) {
            if (params[i].value > 0) a = a + params[i].seriesName + '：' + params[i].value + '<br/>'  // 只显示大于0的条目
            }
            return a
        }
    }
})

2.点击显示/隐藏图例

堆叠图如果图例太多，就会导致很多空数据，因此只显示有数据的条目

this.chart.on('legendselectchanged', (params) => {
    this.chart.setOption({
        legend: { selected: params.selected }
    })
})

3.tooltip的trigger

不同triger对应的formatter的参数不同

axis触发方式：params为数组。所有的图表数据，【在此x轴的所有数据】

item触发方式：params为对象。唯一确定的图表数据，【在此xy坐标下的一个点】

4.legend也可以设置tooltip

图例也可以设置tooltip显示，可以hover时候显示一些公式或说明

5.使用resize解决图表缩成一团的问题

使用v-show，v-if导致图表缩成一团，解决办法：在setoptions之前，可以使用下面代码

this.$nextTick(() => {
    this.chart = echarts.init(window.document.getElementById('xxx'))
    const myEvent = new Event('resize'); // 创建一个支持冒泡且不能被取消的resize事件
    window.dispatchEvent(myEvent); // 事件可以在任何元素触发
})