声明:本站文章均为作者个人原创,图片均为实际截图。如有需要请收藏网站,禁止转载,谢谢配合!!!

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); // 事件可以在任何元素触发
})