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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值