echarts 多个series图表的tooltip自定义

本文介绍如何在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的处理方法;

     完成后效果还不错,可惜没法截图安静

### 自定义 ECharts 多条折线图 Tooltip 样式 在 ECharts 中,可以通过配置 `tooltip` 属性来自定义多条折线图中的提示框(Tooltip)样式[^1]。以下是实现这一功能的关键点: #### 配置项详解 - **formatter**: 使用该属性可以自定义提示框的内容格式。支持字符串模板和回调函数两种方式。 - **backgroundColor**: 设置提示框背景颜色。 - **borderColor**: 设置提示框边框颜色。 - **borderWidth**: 设置提示框边框宽度。 - **textStyle**: 可用于设置提示框内的文字样式,例如字体大小、颜色等。 通过这些属性,能够灵活调整 Tooltip 的外观和显示内容。 #### 示例代码 以下是一个完整的示例,展示如何自定义多条折线图的 Tooltip 样式: ```javascript option = { tooltip: { trigger: 'axis', // 触发类型,默认轴触发 backgroundColor: '#fff', // 背景颜色 borderColor: '#ccc', // 边框颜色 borderWidth: 1, // 边框宽度 textStyle: { color: '#333' }, // 文字颜色 formatter: function (params) { let result = `<div style="font-size:14px;">时间:${params[0].name}</div>`; // 添加标题 params.forEach(item => { result += ` <div> <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${item.color};"></span> ${item.seriesName}: ${item.value} </div>`; }); return result; } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'Series A', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }, { name: 'Series B', data: [760, 850, 880, 920, 1100, 1200, 1250], type: 'line' }] }; ``` 上述代码中,`formatter` 函数被用来动态生成提示框内容,并允许插入 HTML 片段来增强视觉效果。 #### 注意事项 - 如果需要更复杂的交互逻辑,可以在 `formatter` 中引入额外的数据处理方法。 - 提示框的颜色和样式应与图表整体风格保持一致,以提升用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值