echarts+vue——散点图+折线图——技能提升

echarts实现散点图+折线图功能

最近在写后台管理系统时，遇到一个需求，就是散点图+折线图做一个图表，由于之前没有接触过散点图，因此下面记录一下：

在echarts官网上可以看到散点图需要注意的内容如下：

因此组装数据是非常关键的。

根据上面的效果图可以看到，x轴是年月的组合，而echarts官网中的实例中，x轴是数字，不能是汉字，否则对应的点会不显示。

因此需要对散点图的x轴数据进行单独处理。

1.x轴的数据

我这边是数组遍历的，这个比较简单，因此直接写出来了。

xAxis = ['2022-1','2022-2','2022-3','2022-4','2022-5','2022-6','2022-7','2022-8','2022-9','2022-10','2022-11','2022-12']

2.y轴的数据

x轴是汉字时，如果实现散点图的数据源组装(通过indexOf来处理汉字为索引)

//res是数组源，格式如下
res = [
	{Years:2022,Months:1,HumanMoney:22,RealName:'张三'},
	{Years:2022,Months:1,HumanMoney:16,RealName:'李四'},
	{Years:2022,Months:1,HumanMoney:92,RealName:'王五'},
	{Years:2022,Months:1,HumanMoney:202,RealName:'赵六'},
	{Years:2022,Months:1,HumanMoney:2,RealName:'三七'},
	{Years:2022,Months:2,HumanMoney:72,RealName:'张三'},
	{Years:2022,Months:3,HumanMoney:32,RealName:'李四'},
]
 let seriesData = [];
 res.map((item) => {
    seriesData.push([
      xAxis.indexOf(item.Years + '-' + item.Months),
      item.HumanMoney,
    ]);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

因为xAxis是所有年月的集合，可以通过indexOf来判断每一条数据所在X轴的索引值，这样就可以拿到x轴的数字了，这就是x轴是汉字时，如果实现散点图。

3.series部分的处理

 series = [
  {
    name: '',
    data: seriesData,
    type: 'scatter',
    itemStyle: {
      normal: {
        label: {
          show: true,
          position: 'top',
        },
      },
    },
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.鼠标移入到散点上，展示详细信息(注意:tooltip的trigger必须为item)

tooltip: {
  trigger: 'item',//值所在的点位置才会弹窗
  //trigger: 'axis',//竖向区域就会弹窗
  formatter: formatter,
},
1
2
3
4
5

如果trigger是item,则表示鼠标移入值所在的位置才会显示弹窗

如果trigger是axis,则表示鼠标移入值所在竖列的位置才会显示弹窗

自定义formatter弹窗内容

这个跟trigger的值是有关系的

如果trigger是item，则

let formatter = (params) => {
	//此处的params是对象，即指定点的数据源
}
1
2
3

如果trigger是axis，则

let formatter = (params) => {
	//此处的params是数组，即指定列的所有点的集合
}
1
2
3

5.series中加入折线图

series.push({
 name: '平均工资',
  data: [11,22,33,44,5,6,33,3,5,10,22,32],
  type: 'line',
  yAxisIndex: 0,
  itemStyle: {
    normal: {
      label: {
        show: true,
        position: 'top',
      },
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

6.根据不同的series类型，展示不同的tooltip

这种情况肯定只适用于tooltip中的trigger为item时，否则鼠标移入时给多种类型的数据集合，则无法判断了。

此时params是对象，则只需要判断params.seriesType即可。

let formatter = (params) => {
  let index = params.dataIndex;
  let html = '';
  if (params.seriesType == 'line') {
    html += `
      
月份：${
        xAxis[index]
      }月
      其他内容xxxx
`;
  } else if (params.seriesType == 'scatter') {
    if (res[index]) {
      html += `
         
${
           res[index].RealName
         }
         
人效：${res[
           index
         ].HumanMoney.toLocaleString('en-US')}元
       `;
    }
  }
  return html;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

完成！！！感谢大家的支持！！！