Echarts数据可视化第4章 Echarts可视化图 4.1 折线图

àì夳堔傛蜴生んèń 2024-03-26 17:46 33阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第4章 Echarts可视化图
         *   *  4.1 折线图

> Echarts数据可视化：入门、实战与进阶

#### 第4章 Echarts可视化图 ####

##### 4.1 折线图 #####

折线图，适合表示数据的变化趋势，常用于时间序列数据的表示。

option配置代码：

option = {
        
      xAxis: {
        
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        
        type: 'value'
      },
      series: [
        {
        
          data: [450, 232, 301, 734, 1090, 830, 500],
          type: 'line'
        }
      ]
    };

其中series 中的data 值序列长度需要和 xAxis 中的data 值序列长度一致。

绘制效果

![在这里插入图片描述][ffa8f58389de40a9954ad8192a1da86b.png_pic_center]

series 中加入参数 smooth：true

![在这里插入图片描述][7bb70dea408545a9a5e628f4ffa303db.png_pic_center]

这样可以得到较为光滑的折线【曲线】

有时候我们还需要在一个张图中绘制多条折线

option = {
        
      xAxis: {
        
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        
        type: 'value'
      },
      legend: {
        
        data: ['A产品销量','B产品销量','C产品销量'],
        left: 'right'
      },
      series: 
      [{
        
        name: 'A产品销量',
        data: [550, 232, 311, 764, 1090, 830, 500],
        type: 'line',
        smooth: true
      },{
        
        name: 'B产品销量',
        data: [420, 162, 121, 474, 720, 640, 230],
        type: 'line',
        smooth: true
      },{
        
        name: 'C产品销量',
        data: [850, 432, 501, 934, 1190, 930, 600],
        type: 'line',
        smooth: true
      }]
    };

渲染效果

![在这里插入图片描述][896c0aafb18d42e990887016ebaa9ee2.png_pic_center]

这里我们直接写了在series 中并列了三个字典结构，分别存放 A - C 产品的数据，注意，数据的name 字段需要与 legend 中的内容一一对应。

有时候，我们可能又需要使用堆叠折线图来反映不同项的累加情况，可以通过在 series 的每项数据中加入stack 和 areaStyle 参数实现。

如下：

option = {
        
      xAxis: {
        
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        
        type: 'value'
      },
      legend: {
        
        data: ['A产品销量', 'B产品销量', 'C产品销量'],
        left: 'right'
      },
      series: [
        {
        
          name: 'A产品销量',
          data: [550, 232, 311, 764, 1090, 830, 500],
          type: 'line',
          smooth: true,
          stack: '总量',
          areaStyle: {
        }
        },
        {
        
          name: 'B产品销量',
          data: [420, 162, 121, 474, 720, 640, 230],
          type: 'line',
          smooth: true,
          stack: '总量',
          areaStyle: {
        }
        },
        {
        
          name: 'C产品销量',
          data: [850, 432, 501, 934, 1190, 930, 600],
          type: 'line',
          smooth: true,
          stack: '总量',
          areaStyle: {
        }
        }
      ]
    };

渲染效果

![在这里插入图片描述][6d054d5b350846909a2cfa16509bb616.png_pic_center]

其中，areaStyle 用于对区域填充颜色，若没有这个参数，那么区域将不会有填充色。

可以看到，我们代码中的数据顺序是ABC，但是图中自上而下的顺序是 CBA

为了方便区分堆叠总量的数据信息，可以在最上层数据中加入label参数

option = {
        
      xAxis: {
        
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        
        type: 'value'
      },
      legend: {
        
        data: ['A产品销量', 'B产品销量', 'C产品销量'],
        left: 'right'
      },
    
      tooltip: {
        
        trigger: 'axis',
        axisPointer: {
        
          type: 'cross',
          label: {
        
            backgroundColor: '#6a7985'
          }
        }
      },
    
      series: [
        {
        
          name: 'A产品销量',
          data: [550, 232, 311, 764, 1090, 830, 500],
          type: 'line',
          smooth: true,
          stack: '总量',
          areaStyle: {
        }
        },
        {
        
          name: 'B产品销量',
          data: [420, 162, 121, 474, 720, 640, 230],
          type: 'line',
          smooth: true,
          stack: '总量',
          areaStyle: {
        }
        },
        {
        
          name: 'C产品销量',
          data: [850, 432, 501, 934, 1190, 930, 600],
          type: 'line',
          smooth: true,
          stack: '总量',
          label: {
        
            normal: {
        
              show: true,
              position: 'top'
            }
          },
          areaStyle: {
        }
        }
      ]
    };

渲染效果

![在这里插入图片描述][709e9f0670734891b1d3092d250c7495.png_pic_center]

[ffa8f58389de40a9954ad8192a1da86b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/66e64d2410c648c2916be6f781565e55.png
[7bb70dea408545a9a5e628f4ffa303db.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1768e10b84ce48d5b9654bd19632ca6f.png
[896c0aafb18d42e990887016ebaa9ee2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9464d61eef2a4c6cba3a876f5424bc5a.png
[6d054d5b350846909a2cfa16509bb616.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b15effd0961343d2b2c48c7c2adec55d.png
[709e9f0670734891b1d3092d250c7495.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/13c79e503d854fcab9a77e93cebc0f88.png