echarts 多个series图表的tooltip自定义

最新推荐文章于 2025-06-17 22:50:31 发布

原创最新推荐文章于 2025-06-17 22:50:31 发布 · 2.1w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在ECharts中使用坐标轴触发方式自定义多个系列的Tooltip提示信息，通过使用formatter函数并根据params参数的seriesIndex属性判断图表类型，实现了不同图表的不同提示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用echarts制作数据图表时，由于一张图表中包含多个series并且是多种类型数据（折线图，散点图，自定义图等），最初所有数据都是在各自的series.tooltip中定义提示信息，这种情况下默认tooltip的触发方式是‘item’的方式，但是折线图在这种方式下的使用就很蛋疼了，必须要点中数据点，提示才会出来，但是数据点又比较小，很难点中，用户反馈很不好用；

为了用户体验更好，只好改代码了，本来打算只对折线图采用坐标触发（‘axis’），但是series.tooltip无法设置触发方式，只好更改option.tooptip触发方式为‘axis’,；在这里又碰到了问题，修改后的触发方式作用在所有的series上了，也就是之前自定义的series.tooltip全都无效了，查echarts官方文档才发现：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。如意算盘落空了，没法子对不同类型的图采用不同的触发方式了；

没办法，因为折线图的体验效果实在太差，必须要改，只好硬着头皮改了，所有的数据都采用‘axias’触发，然后针对不同的图表给出不同的提示，方法就是：在series.tooltip中使用formatter函数来自定义提示信息，依据params参数的seriesIndex（数据在series里位置）属性来判断图表类型；代码实现如下：

   drawChart1_2() {
          this.chart1_2 = echarts.init(document.getElementById('chart1_2'));
          this.chart1_2.setOption({
           tooltip:{
               trigger:'axis',
               axisPointer:{
                 type:'line',
                 lineStyle:{color:'#333',}
               },
               backgroundColor:'#333',
               formatter:function(params){
                   let tip = auth.formatterTip(params);/*调用auth.js中的formatterTip函数，传入触发点信息参数params*/
                   return tip ;
               },
            },
            xAxis: [],
            yAxis: [],
            grid: this.grid,
            series: [/*多个series*/
              {
                type: 'line',
                name:'Basal',
                data:this.DataBasal,
              },
              {
                type: 'bar',
                name:'Bolus',
                data:this.DataBolus,
              },
              {
                type: 'custom',
                name:'Extend bolus',
                data:this.extend_bolus,
              },
              {
                type: 'scatter',
                name:'Alert',
                data: this.pump_alarm,
                symbol:'image://static/legend/Alert.png',
              },
            ]
          });
        },

auth.js中定义函数，对不同类型数据做处理：

  formatterTip(params){
   // console.log(params);
    let that = this;
    let tipArray = [0,0,0,0,0,0,0,0,0],tip = '',timeDetail ='';
    params.map(function (e,i) {
      if(e.value[0]!==10){/*去除custom类型数据初始化的影响*/
        let index = e.seriesIndex;
        let name  = e.seriesName;
        let value = e.value[1];
        let date = e.value[0];
        let time = that.formatterDate5(date);
        let day = that.formatterDate4(date.getTime()/1000);
        timeDetail = day+'  '+time[0]+':'+time[1]+'<br>';/*设置提示框头部时间信息*/
        /*判断数据类型以及是否有数据*/  
        if((index===0||index===2）&&value)){
         /*每一条提示前设置对应颜色的小圆点*/
         let icon  =" <div style='background: #00ff4c;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>";  tipArray[index]= icon + name+' :  '+value+'U/H';  }
        if(index===1&&value){
        let icon  =" <div style='background: #ff0000;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>";
          tipArray[1] = icon +' Manual Suspend';
        }
        if(index===3&&value){
          let icon  =" <div style='background: #182f82;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>";
          tipArray[3] = icon + name+' :  '+e.value[2]+', '+value+'U';
        }
      }
    });
    tip =tip+timeDetail;
    tipArray.map(function (e,i) {
      if(e){
        tip = tip+e+'<br>';/*组合所有提示信息*/
      }
    });
    return tip;/*返回处理好的提示*/
  },

这样就完成了echarts坐标轴触发方式下的多个series的tooltip自定义功能；上述函数中只给出了一部分series的处理方法；

完成后效果还不错，可惜没法截图；