echarts 绘制多条折线图（横坐标，折线图条数不确定）

最新推荐文章于 2025-02-24 16:45:52 发布

娃哈哈_

最新推荐文章于 2025-02-24 16:45:52 发布

阅读量9.8k

点赞数 4

分类专栏：问题项目实战经验文章标签： js echarts 前端

本文链接：https://blog.csdn.net/qq_36131788/article/details/124010046

版权

项目实战经验同时被 2 个专栏收录

15 篇文章

订阅专栏

问题

4 篇文章

订阅专栏

本文介绍了如何使用Echarts展示多条折线图，针对后台返回的不确定日期和快递品牌数据进行处理。首先，通过Set去重获取所有日期和快递品牌。然后，遍历数据重组，匹配横坐标日期并构造新的数据系列。最后，配置Echarts的基础图表选项，设置横坐标和系列数据，实现动态展示不同快递品牌的统计图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

使用echarts做业务图表统计，记录一下在项目中图表接口返回的数据处理问题

需求描述

1、一个统计图中实现多条折现图的显示，如下图所示
在这里插入图片描述

2、后台返回的数据结构

let data =  [
     {
          rate:"0.1",
          date:"20210915",
          expressBrandName:"顺丰速运",
          expressBrandId:"SF",
        },
        {
          rate:"0.31",
          date:"20210916",
          expressBrandName:"顺丰速运",
          expressBrandId:"SF",
        },
        {
          rate:"0.21",
          date:"20210915",
          expressBrandName:"中通",
          expressBrandId:"ZTO",
        },
        {
          rate:"0.27",
          date:"20210916",
          expressBrandName:"中通",
          expressBrandId:"ZTO",
        },
        {
          rate:"0.41",
          date:"20210915",
          expressBrandName:"韵达",
          expressBrandId:"YD",
        },
        {
          rate:"0.67",
          date:"20210916",
          expressBrandName:"韵达",
          expressBrandId:"YD",
        }
]

根据服务端返回的数据结构，再查看echarts API，目前存在问题：

横坐标【日期】维度是不确定的一般的多条折线图的数据都是有一个共同的字段作为x轴：date
折线图条数【快递品牌个数】是不确定的 ——expressBrandName

解决思路：

1、数据重组，去重得到对应的横坐标
2、数据重组，去重得到对应折线图条
3、循环原始数据，匹配横轴的值，重新构造新数据

【基础图表配置option】

option: {   // 图表配置
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `日期 : ${moment(params.name).format('YYYY/MM/DD')} <br/>${params.seriesName}：${params.value}%`;
          }
        },
        legend: {
           top: '0%',
          icon: 'roundRect',
          left: 'left',
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 30,//间距
          textStyle: {
            color: '#666',
            fontSize: 16
          },
        },
        dataset: {
          source: []
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel:{
            interval: 0,
            rotate: 0,
            formatter: function (value) {
              return moment(value).format('YYYY/MM/DD');
            },
          }
        },
        color:['#37A3DC', '#B8E986', '#FFA080', '#71FFA9', '#68E1E3', '#FFD747', '#E162AF', '#A487FF','#FFCF00'],
        yAxis: {
          min: 0,
          max: 100,
          splitLine: {
            lineStyle: {
              color: '#ddd',
              type: 'dashed',
            }
          },
          axisLabel:{
            formatter: function (value) {
              return `${value}%`;
            },
          },
          splitNumber: 5,
        },
        series: []
      },
}

1、横坐标【日期维度】确定

通过Set去重处理，得到所有横坐标日期，Array.from将new Set结构转换为数组

let dateSet = new Set(data.map(i => i.date));
let dateList = Array.from(dateSet)

2、折线图条数确定

通过Set去重处理，得到所有快递品牌

let expressSet = new Set(data.map(i => i.expressBrandName));

3、循环所有组的数据，匹配横轴的值，重新构造新数据

let series = [];
// 遍历所有折线（一个快递品牌，对应一条折线）
for (let u of expressSet) {
        // 筛选出该条折线图（该），对应的所有原始数据
        let list = data.filter(d => d.expressBrandName === u);  
        // 匹配得到该条折线，对应的所有横轴的值组成的数组
        let _data = dateList.map(d => {
          let num = list.find(item => item.date === d);
          return num ? (num.rate * 100) : 0;
        })
        // 将数据组装到series数组，供option配置使用
        series.push({   // 每个快递品牌，对应一条折线图
           name: u, 
           type: 'line',
           data: _data,   // 每个快递品牌，对应的横坐标的值组成的数组
        })
 }

4、组装最后的Option配置

this.option.xAxis.data = dateList;  // 横坐标设置
this.option.series = series;   // 数据设置