首页 > 其他分享 >echarts自定义展示tooltip功能

echarts自定义展示tooltip功能

时间:2023-03-02 19:35:54浏览次数:41  
标签:自定义 color res tooltip length type data echarts datas

效果如图:

 

 

 

 

 

 

//得分趋势图
      rollCoolW021Option: {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function(datas) {
            console.log('datas', datas)
            let res = datas[0].seriesName + '<br/>'
            for (var i = 0, length = datas.length; i < length; i++) {
              res += '钢板号' + ':' + datas[0].name + '<br/>'
              res += '得分' + ':' + datas[i].data.value + '<br/>'
              res += '日期' + ':' + datas[i].data.createTime + '<br/>'
            }
            return res
          }
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross',
        //     label: { color: '#fff' },
        //     crossStyle: { color: '#6d7882' }
        //   },
        //   formatter: function(params) {}
        // },
        legend: {},
        grid: [
          {
            left: '3%',
            right: '4%',
            bottom: 12,
            top: 30,
            containLabel: true
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#6d7882'
              }
            },
            splitLine: { lineStyle: { color: '#d4d7da' } },
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#6d7882'
              }
            },
            splitLine: { lineStyle: { color: '#d4d7da' } }
          }
        ],
        series: [
          {
            name: '得分趋势',
            type: 'line',
            data: []
          }
        ]
        /* dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 10,
            zoomOnMouseWheel: false
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 10,
            zoomOnMouseWheel: false
          }
        ]*/
      }

具体formatter部分代码:

  formatter: function(datas) {
            console.log('datas', datas)
            let res = datas[0].seriesName + '<br/>'
            for (var i = 0, length = datas.length; i < length; i++) {
              res += '钢板号' + ':' + datas[0].name + '<br/>'
              res += '得分' + ':' + datas[i].data.value + '<br/>'
              res += '日期' + ':' + datas[i].data.createTime + '<br/>'
            }
            return res
          }

 

标签:自定义,color,res,tooltip,length,type,data,echarts,datas
From: https://www.cnblogs.com/zqlym/p/17173079.html

相关文章