echarts多线图表 提示框自定义

需求:在提示框中加上单位
效果:
在这里插入图片描述
解决方案:
第一步、图表子组件中将tooltip赋值
tooltip: tooltip,

setOptions({ seriesData, xAxisData, tooltip, chartTitleText, legendData, color, chartTitleFontSize } = {}) {
      this.chart.setOption({
        title: {
          text: chartTitleText,
          textStyle: {
              color: color || '#333',// 文字颜色
              fontSize: chartTitleFontSize || 14// 文字大小
          }
        },
        xAxis: {
          data: xAxisData,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {  //这是x轴文字颜色
              lineStyle: {
                  color: color,
              }
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {  //这是y轴文字颜色
              lineStyle: {
                  color: color || '#333',
              }
          }
        },
        legend: {
          data: legendData,
          textStyle: {
              color: color || '#333',// 文字颜色
          }
        },
        tooltip: tooltip,
        series: seriesData,
        
      })
    }

第二布、在父组件中定义图表对象其中的tooltip字段

chartLineData:{
            chartTitleText: this.dateFormat(new Date(),'yymmdd') + '数据监测',
            tooltipText: '总用电量:',
            color: '#fff',
            lineColor: '#fff',
            tooltip:{
              trigger: 'axis',// 值为axis时,返回params是数组;值为item,是具体到每一个折点,params返回的是对象
              triggerOn: "mousemove",
              formatter:function(params){
                let tip = ''
                let unit = ''
                params.forEach(el=>{
                  if(el.seriesName.indexOf('电压')!==-1){
                    unit = ' V'
                  }else if(el.seriesName.indexOf('电流')!==-1){
                    unit = ' A'
                  }else if(el.seriesName.indexOf('功率')!==-1){
                    unit = ' W'
                  }else if(el.seriesName.indexOf('表值')!==-1){
                    unit = ' kw'
                  }
                  tip += el.seriesName + ':' + el.value +  unit +'<br/>'
                })
                return tip
              }
            },
            xAxisData: [ ],
            seriesData: [ ]
        },

trigger值为axios,返回的params是鼠标经过的某个x轴上的点,对应的y轴上的集合
在这里插入图片描述

trigger值为item,返回的params是某个点上的数据,格式为对象
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts折线图的提示框可以通过formatter属性进行自定义。在formatter函数中,可以获取到params参数,params是一个数组,包含了当前鼠标悬停在图表上的所有数据。可以通过params数组的遍历来获取每个数据点的具体信息,例如数据点的名称、数值、系列名称等。然后可以根据需要来格式化这些信息并返回需要显示的内容。 在给定的引用中,给出了一个示例的formatter函数。在这个函数中,首先初始化了一个result变量,然后通过遍历params数组来获取每个数据点的信息。根据数据点的数值,可以给出不同的颜色,例如正数为红色,负数为绿色。然后根据需要的格式,将系列名称和数据值拼接成字符串,并返回给result变量。最后,返回result作为自定义提示框内容。 所以,echarts折线图的自定义提示框可以通过在formatter函数中根据params数组的数据进行格式化,实现自定义的展示效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [ECharts折线图tooltip提示框格式自定义](https://blog.csdn.net/resign007/article/details/102548327)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Echarts地图添加引导线效果(labelLine)](https://download.csdn.net/download/weixin_38670433/13677936)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值