echart的tooltip展示个性化数据

nina夏然

已于 2023-07-06 10:23:44 修改

阅读量274

点赞数 1

文章标签： javascript 前端 vue.js

于 2023-07-05 16:53:55 首次发布

本文链接：https://blog.csdn.net/nina1994/article/details/131558667

版权

需求：要求没有提示框时展示数据，有提示框时展示出每年的每个周的最后一天的值，且分别显示每一年的每个周的最后一天的日期。如图：

但是，x轴只需要展示第几周。

步骤：

series中的data存放的是各个点的数值，是一个数组
用series中的name来存放每一年的每一个数值对应的那个周末的具体日期。

所以最后series

// 处理后端数据，将值存在一个数组中，将值对应的周末放在另一个数组中
const data = [
    {
        "Name": "2021",
        "Points": [
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
         
        ]
    },
    {
        "Name": "2022",
        "Points": [
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
           
        ]
    },
    {
        "Name": "2023",
        "Points": [
            64.4,
            75.6,
            50.6,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            67.7,
            
        ]
    }
]
const nameList = [
    [
        "2021-01-03",
        "2021-01-10",
        "2021-01-17",
        "2021-01-24",
        "2021-01-31",
        "2021-02-07",
        "2021-02-14",
        "2021-02-21",
        "2021-02-28",
        "2021-03-07",
        "2021-03-14",
        "2021-03-21",
        "2021-03-28",
        "2021-04-04",
        "2021-04-11",
        "2021-04-18",
        "2021-04-25",
        "2021-05-02",
        "2021-05-09",
        "2021-05-16",
        "2021-05-23",
        "2021-05-30",
        "2021-06-06",
        "2021-06-13",
        "2021-06-20",
        "2021-06-27",
        "2021-07-04",
        "2021-07-11",
        "2021-07-18",
        "2021-07-25",
        "2021-08-01",
        "2021-08-08",
        "2021-08-15",
        "2021-08-22",
        "2021-08-29",
        "2021-09-05",
        "2021-09-12",
        "2021-09-19",
        "2021-09-26",
        "2021-10-03",
        "2021-10-10",
        "2021-10-17",
        "2021-10-24",
        "2021-10-31",
        "2021-11-07",
        "2021-11-14",
        "2021-11-21",
        "2021-11-28",
        "2021-12-05",
        "2021-12-12",
        "2021-12-19",
        "2021-12-26"
    ],
    [
        "2022-01-02",
        "2022-01-09",
        "2022-01-16",
        "2022-01-23",
        "2022-01-30",
        "2022-02-06",
        "2022-02-13",
        "2022-02-20",
        "2022-02-27",
        "2022-03-06",
        "2022-03-13",
        "2022-03-20",
        "2022-03-27",
        "2022-04-03",
        "2022-04-10",
        "2022-04-17",
        "2022-04-24",
        "2022-05-01",
        "2022-05-08",
        "2022-05-15",
        "2022-05-22",
        "2022-05-29",
        "2022-06-05",
        "2022-06-12",
        "2022-06-19",
        "2022-06-26",
        "2022-07-03",
        "2022-07-10",
        "2022-07-17",
        "2022-07-24",
        "2022-07-31",
        "2022-08-07",
        "2022-08-14",
        "2022-08-21",
        "2022-08-28",
        "2022-09-04",
        "2022-09-11",
        "2022-09-18",
        "2022-09-25",
        "2022-10-02",
        "2022-10-09",
        "2022-10-16",
        "2022-10-23",
        "2022-10-30",
        "2022-11-06",
        "2022-11-13",
        "2022-11-20",
        "2022-11-27",
        "2022-12-04",
        "2022-12-11",
        "2022-12-18",
        "2022-12-25"
    ],
    [
        "2023-01-08",
        "2023-01-15",
        "2023-01-22",
        "2023-01-29",
        "2023-02-05",
        "2023-02-12",
        "2023-02-19",
        "2023-02-26",
        "2023-03-05",
        "2023-03-12",
        "2023-03-19",
        "2023-03-26",
        "2023-04-02",
        "2023-04-09",
        "2023-04-16",
        "2023-04-23",
        "2023-04-30",
        "2023-05-07",
        "2023-05-14",
        "2023-05-21",
        "2023-05-28",
        "2023-06-04",
        "2023-06-11",
        "2023-06-18",
        "2023-06-25",
        "2023-07-02"
    ]
]
data.map((item,index) => {
    series.push(
    {
        data: item.Points,
        type: 'line',
        name: nameList[index].join(','), //因为name只能是字符串，先将一整年的转化为一个字符串
        label: {
          // 设置值的样式
          show: true,
          rotate: 45,
          position: 'right',
          fontWeight: 'bolder',
          color: 'balck',
        },
        symbol: 'circle', // 空心圆变实心
        symbolSize: 6, //设定实心点的大小
        itemStyle: {
          normal: {
            color: '#B22222', // 圆点的颜色
            lineStyle: {
              color: '#B22222',
              width: 1,
            },
          },
        },
        
        markArea: {
          //标记区域
          
        },
      });
    }
    )
}

let option;
option = {
title: {
        text: '',
        subtextStyle: {
          fontSize: 14,
          fontWeight: 'bold',
        },
        left: '9%',
      },
      tooltip: {
        trigger: 'axis',
        formatter: function(params) {
        // params.seriesName的值就是上面传的seresName的字符串
          let el = '';
          let html = '';
          (params || []).forEach((v, i) => {
            // console.log(v,"vvv")
            html +=
              '<div style="display: flex; justify-content: space-between">' +
              '<span>' +
              v.marker +
              v.seriesName.split(',')[v.dataIndex] + 
            // 将字符串转为数组，v.dataIndex就是这个周在数组中的index，根据dataIndex就能寻找到对应的那一周
              '</span>' +
              '<span style="padding-left: 20px">' +
              `${v.value}` +
              '</span>' +
              '</div>';
            el = '<div >' + '<div>' + v.axisValue + '</div>' + html + '</div>';
          });
          return el;
        },
      },

}

但是这样有个问题，是legend不显示了，因为legend跟series的name属性是相关的，即legend应该是所有的name的集合，所以，不通过name传递后端数据。

data.map((item) => {
      lenged.push(item.Name);
      series.push({
        data: item.Points,
        type: 'line',
        name: item.Name, // name应该是legend的子集
        label: {
          // 设置值的样式
          show: true,
          rotate: 45,
          position: 'right',
          fontWeight: 'bolder',
          color: 'balck',
        },
        symbol: 'circle', // 空心圆变实心
        symbolSize: 6, //设定实心点的大小
        itemStyle: {
          normal: {
     
            lineStyle: {
             
              width: 1,
            },
          },
        },
        markLine: {
          symbol: ['none', 'none'], // 去掉箭头
          label: {
            position: 'start',
          },
          lineStyle: {
            type: 'solid',
            width: 1,
            color: 'black',
          },
          data: [
           
          ],
        },
        markArea: {
          //标记区域
          data: [
           
        },
      });

    });

tooltip: {
        trigger: 'axis',
        formatter: function(params) {
          let el = '';
          let html = '';
          (params || []).forEach((v, i) => {
            html +=
              '<div style="display: flex; justify-content: space-between">' +
              '<span>' +
              v.marker +
              toJS(nameList)[v.seriesIndex][v.dataIndex] +
            // 直接在tooltip中使用,seriesIndex对应的是第几年，dataIndex对应的刚好是第几周
              '</span>' +
              '<span style="padding-left: 20px">' +
              `${v.value}` +
              '</span>' +
              '</div>';
            el = '<div >' + '<div>' + v.axisValue + '</div>' + html + '</div>';
          });
          return el;
        },
      },

完美解决！！！