devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ECharts折线图

作者：小丑西瓜9 | 2024-03-08 02:34:34

赞

踩

echarts折线图

1.小节概述

    折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。折线图可以显示随时间而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。在ECharts中，柱状图和折线图的配置有许多相似之处，例如x轴和y轴的设置，标记最值和平均值等场景基本雷同，至于图例（legend）、图表离容器的距离样式（grid）、提示框（tooltip）等设置基本适用于所有图表类型。由于这些内容在柱状图实现中已经介绍过了，所以本小节在这些方面不做过多赘述。在本小节中，主要记录ECharts折线图的基础设置，结合实际业务场景实现多折线图、阶梯折线图、双轴折线图、动态折线图等图表展现。

2.操作步骤

2.1.基础设置

1.准备工作：（1）优化项目主页布局，由于后续要了解很多图表类型，所以主页只放文字链接，点击打开相应的图表路由页面。（2）针对各个图表组件，公共样式不需要每个组件都设置一遍，可以在页面上设置好，允许样式穿透（页面中去除scoped属性）。

主页HomeView.vue中，存放文字链接，点击跳转对应的路由页面，路由配置（router下的index.js）。

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import HomeView from '../views/HomeView.vue'
  4. import ChartBar from '../views/ChartBar.vue'
  5. import ChartLine from '../views/ChartLine.vue'
  6.  
  7. Vue.use(VueRouter)
  8.  
  9. const routes = [
  10.   {
  11.     path: '/',
  12.     name: 'home',
  13.     component: HomeView
  14.   },
  15.   {
  16.     path: '/chartBar',
  17.     name: 'ChartBar',
  18.     component: ChartBar
  19.   },
  20.   {
  21.     path: '/chartLine',
  22.     name: 'ChartLine',
  23.     component: ChartLine
  24.   },
  25.  
  26. ]
  27.  
  28. const router = new VueRouter({
  29.   mode: 'history',
  30.   base: process.env.BASE_URL,
  31.   routes
  32. })
  33.  
  34. export default router

 

2.假设要展示的上半年各个月份的产品销售，那么可以用折线图来展示。修改前端前需要再加一个后端接口（RAP接口管理平台中新建接口提供上半年各月销量），然后复制出一个的图表组件ChartLineOne.vue放在ChartLine页图表1的位置上进行展示。参考代码：

  1. <template>
  2.     <div class="mainDiv">
  3.         <div class="titleDiv">上半年各月销量</div>
  4.         <div class="chartDiv" id="chartLineOne"></div>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.     data() {
  11.         return {
  12.             chartData: {},
  13.         }
  14.     },
  15.     name: 'ChartLineOne',
  16.     mounted() {
  17.         this.getChartData().then(() => {
  18.             // 数据请求到后渲染图表
  19.             this.renderChart()
  20.         })
  21.     },
  22.     methods: {
  23.         // 请求数据回来
  24.         async getChartData() {
  25.             this.chartData = await this.$axios({ url: 'sales/month' })
  26.         },
  27.         // 渲染图表
  28.         renderChart() {
  29.             let myChart = this.$echarts.init(document.getElementById('chartLineOne'))
  30.             let chartData = this.chartData
  31.             var option = {
  32.                 tooltip: {
  33.                     show: true,
  34.                 },
  35.                 legend: {
  36.                     show: true,
  37.                     data: ['销量'],
  38.                     x: 'center',
  39.                     y: 'bottom',
  40.                     padding: [0, 0, 10, 0],
  41.                     textStyle: {
  42.                         fontStyle: 'normal',
  43.                         fontSize: 12,
  44.                     },
  45.                 },
  46.                 grid: {
  47.                     top: '8%',
  48.                     bottom: '10%',
  49.                     left: '4%',
  50.                     right: '8%',
  51.                     containLabel: true,
  52.                 },
  53.                 xAxis: {
  54.                     type: 'category',
  55.                     data: chartData.data.month,
  56.                 },
  57.  
  58.                 yAxis: {
  59.                     type: 'value',
  60.                 },
  61.                 series: [
  62.                     {
  63.                         name: '销量',
  64.                         type: 'line',
  65.                         data: chartData.data.amount,
  66.                     },
  67.                 ],
  68.             }
  69.             // 使用刚指定的配置项和数据显示图表
  70.             myChart.setOption(option)
  71.         },
  72.     },
  73. }
  74. </script>
  75.  
  76. <style scoped>
  77. .mainDiv {
  78.     border: 1px solid;
  79.     height: 410px;
  80.     border-radius: 5px;
  81.     text-align: center;
  82. }
  83. .titleDiv {
  84.     height: 30px;
  85.     line-height: 30px;
  86.     font-size: 12;
  87. }
  88. .chartDiv {
  89.     height: 380px;
  90. }
  91. </style>

3.上图可以发现折线图不是从零开始的（默认折线从刻度中心开始），可以通过设置xAxis.boundaryGap参数让其从零开始。参考代码：

  1. xAxis: {
  2.     type: 'category',
  3.     boundaryGap: false,
  4.     data: chartData.data.month,
  5. },

4.折线的线条过于刚直，能否设置为平滑折线，可以设置series.smooth参数实现。参考代码：

  1. series: [
  2.     {
  3.         name: '销量',
  4.         type: 'line',
  5.         data: chartData.data.amount,
  6.         smooth: true,
  7.     },
  8. ],

5.至此，基础设置相关介绍告一段落，启动项目，预览ChartLine页如下图：

2.2.多折线图

1.假设要展示的各季度产品销量包括三大产品的销售-牛奶、面包和饼干，那么可以用多折线图来展示。修改前端前需要再加一个后端接口（RAP接口管理平台中新建接口提供产品销量），然后复制出一个的图表组件ChartBarTwo.vue放在ChartLine页图表2的位置上进行展示。参考代码：

系列图标（legend.data.icon）、折线连接点形状（series.symbol）属性设置说明：ECharts中类似标记的图形支持3种：（1）系统默认提供的几种类型；（2）直接放图片链接；（3）设置图标矢量路径。建议使用（1）或者（3）的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色，路径图形会自适应调整为合适的大小。此处使用了（3）的方式，为面包、牛奶、饼干设置了对应的矢量路径。

  1. <template>
  2.     <div class="mainDiv">
  3.         <div class="titleDiv">各季度产品销量</div>
  4.         <div class="chartDiv" id="chartLineTwo"></div>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.     data() {
  11.         return {
  12.             chartData: {},
  13.         }
  14.     },
  15.     name: 'ChartLineTwo',
  16.     mounted() {
  17.         this.getChartData().then(() => {
  18.             // 数据请求到后渲染图表
  19.             this.renderChart()
  20.         })
  21.     },
  22.     methods: {
  23.         // 请求数据回来
  24.         async getChartData() {
  25.             this.chartData = await this.$axios({ url: 'sales/quarter' })
  26.         },
  27.         // 渲染图表
  28.         renderChart() {
  29.             let myChart = this.$echarts.init(document.getElementById('chartLineTwo'))
  30.             let chartData = this.chartData
  31.             var option = {
  32.                 tooltip: {
  33.                     show: true,
  34.                     textStyle: {
  35.                         color: '#000000',
  36.                         fontStyle: 'normal',
  37.                         fontSize: 14,
  38.                         align: 'left',
  39.                     },
  40.                     formatter: function (param) {
  41.                         // 设置提示显示当季度所有产品销量信息
  42.                         let message =
  43.                             param.name +
  44.                             '<br />' +
  45.                             '面包：' +
  46.                             chartData.data.breadAmount[param.dataIndex] +
  47.                             '<br />' +
  48.                             '牛奶：' +
  49.                             chartData.data.milkAmount[param.dataIndex] +
  50.                             '<br />' +
  51.                             '饼干：' +
  52.                             chartData.data.cookieAmount[param.dataIndex]
  53.                         return message
  54.                     },
  55.                 },
  56.                 legend: {
  57.                     show: true,
  58.                     x: 'center',
  59.                     y: 'bottom',
  60.                     padding: [0, 0, 10, 0],
  61.                     data: [
  62.                         {
  63.                             name: '面包',
  64.                             icon: 'path://M66.19,738.03c2.39,41.18,33.76,75.58,75.05,80.8,42.68,5.4,106.69-1.05,197.53-43.32,0,0,416.31-181.69,540.54-378.14,0,0,49-82.43,51.96-152.97,1.24-29.57-13.29-57.64-37.94-74.36-52.25-35.45-176.24-91.82-392.54-38.99,0,0-343.32,67.7-430.61,448.07,0,0.02-10.13,53.16-3.99,158.91z M584.5,115.17s-3.06,154.95-44.02,169.16c0,0-23.56-131.75-60.42-147.99-0.01,0,58.84-16.35,104.44-21.17z M183.48,336.63s83.05,140.79,70.01,185.83c0,0-86.83-101.91-126.95-97.72,0.01,0,27.18-52.68,56.94-88.11z M365.11,184.25s62.22,183.34,29.41,211.49c0,0-77.84-151.04-118.15-152.69,0-0.01,48.13-37.69,88.74-58.8z M141.64,495.33s-71.05,88.49-61.12,196.48,61.12-196.48,61.12-196.48z M909.55,184.25c3.61,69.01-305.31,450.06-618.91,611.35,0,0,342.16-141.32,497.43-294.66-0.01,0.01,229.55-205.04,121.48-316.69z',
  65.                         },
  66.                         {
  67.                             name: '牛奶',
  68.                             icon: 'path://M726.65,184a19.09,19.09,0,0,0-19.09-19.09H316.44A19.09,19.09,0,0,0,297.35,184v50.46a10,10,0,0,0,10,10h409.3a10,10,0,0,0,10-10zM257.9,754.85a10,10,0,0,0-10,10V840a19.09,19.09,0,0,0,19.1,19.13h490A19.09,19.09,0,0,0,776.1,840v-75a10,10,0,0,0-10.05-10zM723.42,267.33H300.58a10,10,0,0,0-9.32,6.37L258.48,358a10,10,0,0,0,9.32,13.63h488.4a10,10,0,0,0,9.32-13.63l-32.78-84.3a10,10,0,0,0-9.32-6.37zM616.75,624.24c-27-10.12-48.09,1.94-72.55,15.89-21.35,12.19-43.42,24.77-70.08,21-25.46-3.64-49.29-19.13-63.76-41.44s-18.29-48.72-10.9-74.58c5.42-19-6.85-31.72-20.15-37.33-16.81-7.07-40.64-4.74-53.15,17.16-13.23,23.13-29.36,51.31-64.44,50.54-0.8,0-1.82-0.08-2.94-0.18a10,10,0,0,0-10.88,10v128.43A18.21,18.21,0,0,0,266.11,732H646a18.22,18.22,0,0,0,18.15-16.61c4.31-48.27-11.06-77.52-47.4-91.15zM541.06,455c10.92,13.43,30.4,23.33,52.28,10.82,31.66-18.09,60.1-21.68,80-10.1,15.55,9,24.11,26.44,24.11,49.05,0,18.93,12.27,38.52,29.84,47.64,13.52,7,28.41,7.06,42.89,0.44a10,10,0,0,0,5.88-9.12V404.52a10,10,0,0,0-10-10H544.58a10.11,10.11,0,0,0-8.72,5.09c-11.38,19.68-6.29,41.24,5.2,55.39z M716.77,572.72c-25.24-13.11-42.19-40.42-42.19-68,0-10-2.2-23.15-12.7-29.24-12.41-7.21-33.26-3.49-57.18,10.18-27.83,15.91-60.56,9.39-81.41-16.26-12.86-15.8-20.37-39.21-14.79-62.58a9.92,9.92,0,0,0-9.57-12.33h-241a10,10,0,0,0-10,10V542.1a10,10,0,0,0,8.68,9.91c2,0.27,3.87,0.5,4.82,0.53,21,0.82,30.69-14.18,44.86-38.95,18.58-32.51,55.28-38.13,81.94-26.92,27.65,11.65,41,37.66,33.29,64.73a67.26,67.26,0,0,0,8.09,55.83c10.93,16.83,28.79,28.5,47.78,31.21s36.61-7.44,55.46-18.2,39.7-22.66,64.1-22.66a78.44,78.44,0,0,1,27.84,5.22c47.36,17.75,68.07,57.63,61.77,118.68a9.81,9.81,0,0,0,10,11l69.59-0.44a10,10,0,0,0,9.93-10V588.79a10,10,0,0,0-12.15-9.79,69.13,69.13,0,0,1-47.16-6.28z',
  69.                         },
  70.                         {
  71.                             name: '饼干',
  72.                             icon: 'path://M537.6,130.133333c-46.933333-4.266667-91.733333,0-132.266667,10.666667-14.933333,4.266667-21.333333,19.2-14.933333,34.133333,10.666667,23.466667,14.933333,51.2,12.8,81.066667-6.4,70.4-59.733333,130.133333-130.133333,142.933333-6.4,2.133333-12.8,2.133333-17.066667,2.133334-17.066667,2.133333-27.733333,19.2-19.2,34.133333,6.4,17.066667,10.666667,34.133333,10.666667,53.333333,0,57.6-38.4,106.666667-89.6,125.866667-12.8,4.266667-19.2,19.2-14.933334,32,51.2,145.066667,192,249.6,358.4,249.6,219.733333,0,396.8-183.466667,384-407.466667-12.8-187.733333-162.133333-341.333333-347.733333-358.4z M584.533333,379.733333m-74.666666,0a74.666667,74.666667,0,1,0,149.333333,0,74.666667,74.666667,0,1,0-149.333333,0Z M443.733333,640m-74.666666,0a74.666667,74.666667,0,1,0,149.333333,0,74.666667,74.666667,0,1,0-149.333333,0Z M704,635.733333m-61.866667,0a61.866667,61.866667,0,1,0,123.733334,0,61.866667,61.866667,0,1,0-123.733334,0Z',
  73.                         },
  74.                     ],
  75.                 },
  76.                 grid: {
  77.                     top: '8%',
  78.                     bottom: '10%',
  79.                     left: '4%',
  80.                     right: '6%',
  81.                     containLabel: true,
  82.                 },
  83.                 xAxis: {
  84.                     type: 'category',
  85.                     data: chartData.data.quarter,
  86.                     // 坐标轴两边留白策略（设置从0开始）
  87.                     boundaryGap: false,
  88.                 },
  89.                 yAxis: {
  90.                     type: 'value',
  91.                     axisLabel: {
  92.                         // 设置坐标轴文本和坐标轴的间距，以免第一个点的标签值和y轴的坐标轴文本有重叠
  93.                         margin: 15,
  94.                     },
  95.                     splitLine: {
  96.                         show: true,
  97.                         lineStyle: {
  98.                             color: ['#E5EAF3'],
  99.                             width: 1,
  100.                             type: 'dashed',
  101.                         },
  102.                     },
  103.                 },
  104.                 series: [
  105.                     {
  106.                         name: '面包',
  107.                         type: 'line',
  108.                         symbol: 'path://M66.19,738.03c2.39,41.18,33.76,75.58,75.05,80.8,42.68,5.4,106.69-1.05,197.53-43.32,0,0,416.31-181.69,540.54-378.14,0,0,49-82.43,51.96-152.97,1.24-29.57-13.29-57.64-37.94-74.36-52.25-35.45-176.24-91.82-392.54-38.99,0,0-343.32,67.7-430.61,448.07,0,0.02-10.13,53.16-3.99,158.91z M584.5,115.17s-3.06,154.95-44.02,169.16c0,0-23.56-131.75-60.42-147.99-0.01,0,58.84-16.35,104.44-21.17z M183.48,336.63s83.05,140.79,70.01,185.83c0,0-86.83-101.91-126.95-97.72,0.01,0,27.18-52.68,56.94-88.11z M365.11,184.25s62.22,183.34,29.41,211.49c0,0-77.84-151.04-118.15-152.69,0-0.01,48.13-37.69,88.74-58.8z M141.64,495.33s-71.05,88.49-61.12,196.48,61.12-196.48,61.12-196.48z M909.55,184.25c3.61,69.01-305.31,450.06-618.91,611.35,0,0,342.16-141.32,497.43-294.66-0.01,0.01,229.55-205.04,121.48-316.69z',
  109.                         symbolSize: 12,
  110.                         data: chartData.data.breadAmount,
  111.                         // 是否平滑曲线显示
  112.                         smooth: true,
  113.                         stack: '面包',
  114.                         itemStyle: {
  115.                             color: '#5470C6',
  116.                         },
  117.                     },
  118.                     {
  119.                         name: '牛奶',
  120.                         type: 'line',
  121.                         symbol: 'path://M726.65,184a19.09,19.09,0,0,0-19.09-19.09H316.44A19.09,19.09,0,0,0,297.35,184v50.46a10,10,0,0,0,10,10h409.3a10,10,0,0,0,10-10zM257.9,754.85a10,10,0,0,0-10,10V840a19.09,19.09,0,0,0,19.1,19.13h490A19.09,19.09,0,0,0,776.1,840v-75a10,10,0,0,0-10.05-10zM723.42,267.33H300.58a10,10,0,0,0-9.32,6.37L258.48,358a10,10,0,0,0,9.32,13.63h488.4a10,10,0,0,0,9.32-13.63l-32.78-84.3a10,10,0,0,0-9.32-6.37zM616.75,624.24c-27-10.12-48.09,1.94-72.55,15.89-21.35,12.19-43.42,24.77-70.08,21-25.46-3.64-49.29-19.13-63.76-41.44s-18.29-48.72-10.9-74.58c5.42-19-6.85-31.72-20.15-37.33-16.81-7.07-40.64-4.74-53.15,17.16-13.23,23.13-29.36,51.31-64.44,50.54-0.8,0-1.82-0.08-2.94-0.18a10,10,0,0,0-10.88,10v128.43A18.21,18.21,0,0,0,266.11,732H646a18.22,18.22,0,0,0,18.15-16.61c4.31-48.27-11.06-77.52-47.4-91.15zM541.06,455c10.92,13.43,30.4,23.33,52.28,10.82,31.66-18.09,60.1-21.68,80-10.1,15.55,9,24.11,26.44,24.11,49.05,0,18.93,12.27,38.52,29.84,47.64,13.52,7,28.41,7.06,42.89,0.44a10,10,0,0,0,5.88-9.12V404.52a10,10,0,0,0-10-10H544.58a10.11,10.11,0,0,0-8.72,5.09c-11.38,19.68-6.29,41.24,5.2,55.39z M716.77,572.72c-25.24-13.11-42.19-40.42-42.19-68,0-10-2.2-23.15-12.7-29.24-12.41-7.21-33.26-3.49-57.18,10.18-27.83,15.91-60.56,9.39-81.41-16.26-12.86-15.8-20.37-39.21-14.79-62.58a9.92,9.92,0,0,0-9.57-12.33h-241a10,10,0,0,0-10,10V542.1a10,10,0,0,0,8.68,9.91c2,0.27,3.87,0.5,4.82,0.53,21,0.82,30.69-14.18,44.86-38.95,18.58-32.51,55.28-38.13,81.94-26.92,27.65,11.65,41,37.66,33.29,64.73a67.26,67.26,0,0,0,8.09,55.83c10.93,16.83,28.79,28.5,47.78,31.21s36.61-7.44,55.46-18.2,39.7-22.66,64.1-22.66a78.44,78.44,0,0,1,27.84,5.22c47.36,17.75,68.07,57.63,61.77,118.68a9.81,9.81,0,0,0,10,11l69.59-0.44a10,10,0,0,0,9.93-10V588.79a10,10,0,0,0-12.15-9.79,69.13,69.13,0,0,1-47.16-6.28z',
  122.                         symbolSize: 12,
  123.                         data: chartData.data.milkAmount,
  124.                         smooth: true,
  125.                         stack: '牛奶',
  126.                         itemStyle: {
  127.                             color: '#91CC75',
  128.                         },
  129.                     },
  130.                     {
  131.                         name: '饼干',
  132.                         type: 'line',
  133.                         symbol: 'path://M537.6,130.133333c-46.933333-4.266667-91.733333,0-132.266667,10.666667-14.933333,4.266667-21.333333,19.2-14.933333,34.133333,10.666667,23.466667,14.933333,51.2,12.8,81.066667-6.4,70.4-59.733333,130.133333-130.133333,142.933333-6.4,2.133333-12.8,2.133333-17.066667,2.133334-17.066667,2.133333-27.733333,19.2-19.2,34.133333,6.4,17.066667,10.666667,34.133333,10.666667,53.333333,0,57.6-38.4,106.666667-89.6,125.866667-12.8,4.266667-19.2,19.2-14.933334,32,51.2,145.066667,192,249.6,358.4,249.6,219.733333,0,396.8-183.466667,384-407.466667-12.8-187.733333-162.133333-341.333333-347.733333-358.4z M584.533333,379.733333m-74.666666,0a74.666667,74.666667,0,1,0,149.333333,0,74.666667,74.666667,0,1,0-149.333333,0Z M443.733333,640m-74.666666,0a74.666667,74.666667,0,1,0,149.333333,0,74.666667,74.666667,0,1,0-149.333333,0Z M704,635.733333m-61.866667,0a61.866667,61.866667,0,1,0,123.733334,0,61.866667,61.866667,0,1,0-123.733334,0Z',
  134.                         symbolSize: 12,
  135.                         data: chartData.data.cookieAmount,
  136.                         smooth: true,
  137.                         stack: '饼干',
  138.                         itemStyle: {
  139.                             color: '#FE9F9F',
  140.                         },
  141.                     },
  142.                 ],
  143.             }
  144.             // 使用刚指定的配置项和数据显示图表
  145.             myChart.setOption(option)
  146.         },
  147.     },
  148. }
  149. </script>
  150.  
  151. <style scoped>
  152. .mainDiv {
  153.     border: 1px solid;
  154.     height: 410px;
  155.     border-radius: 5px;
  156.     text-align: center;
  157. }
  158. .titleDiv {
  159.     height: 30px;
  160.     line-height: 30px;
  161.     font-size: 12;
  162. }
  163. .chartDiv {
  164.     height: 380px;
  165. }
  166. </style>

2.至此，多折线图相关介绍告一段落，启动项目，预览ChartLine页如下图：

2.3.阶梯折线图

1.阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。同样展示上述各季度产品销量（牛奶、面包和饼干），复制出一个的图表组件ChartBarThree.vue放在ChartLine页图表3的位置上进行展示。此处主要通过series.step属性来控制阶梯线图的连接类型，共有三种取值：start、middle和end，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。参考代码：

  1. series: [
  2.     {
  3.         name: '面包',
  4.         type: 'line',
  5.         step: 'start',
  6.         ......
  7.     },
  8.     {
  9.         name: '牛奶',
  10.         type: 'line',
  11.         step: 'end',
  12.         ......
  13.     },
  14.     {
  15.         name: '饼干',
  16.         type: 'line',
  17.         step: 'middle',
  18.         ......
  19.     },
  20. ],

2.至此，阶梯折线图相关介绍告一段落，启动项目，预览ChartLine页如下图：

2.4.双轴折线图

1.双轴折线图，一般适用于以下场景：（1）一个图表几个系列的数据单位不相同，相差较大。（2）希望y 轴可以设置左右两个维度，比如一个展示销量，一个展示毛利率。假设要展示的上半年各月产品销量和毛利率，那么可以用双轴折线图来展示。修改前端前需要再加一个后端接口（RAP接口管理平台中新建接口提供上半年各月产品销量毛利率数据），然后复制出一个的图表组件ChartLineFour.vue放在ChartLine页图表4的位置上进行展示。参考代码：

  1. <template>
  2.     <div class="mainDiv">
  3.         <div class="titleDiv">上半年各月销量和毛利率</div>
  4.         <div class="chartDiv" id="chartLineFour"></div>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.     data() {
  11.         return {
  12.             chartData: {},
  13.         }
  14.     },
  15.     name: 'ChartLineFour',
  16.     mounted() {
  17.         this.getChartData().then(() => {
  18.             // 数据请求到后渲染图表
  19.             this.renderChart()
  20.         })
  21.     },
  22.     methods: {
  23.         // 请求数据回来
  24.         async getChartData() {
  25.             this.chartData = await this.$axios({ url: 'sales/month/amount' })
  26.         },
  27.         // 渲染图表
  28.         renderChart() {
  29.             let myChart = this.$echarts.init(document.getElementById('chartLineFour'))
  30.             let chartData = this.chartData
  31.             var option = {
  32.                 tooltip: {
  33.                     show: true,
  34.                     textStyle: {
  35.                         color: '#000000',
  36.                         fontStyle: 'normal',
  37.                         fontSize: 14,
  38.                         align: 'left',
  39.                     },
  40.                     formatter: function (param) {
  41.                         let message =
  42.                             param.name +
  43.                             '<br />' +
  44.                             '销售量：' +
  45.                             chartData.data.quantity[param.dataIndex] +
  46.                             '<br />' +
  47.                             '毛利率：' +
  48.                             chartData.data.rate[param.dataIndex] * 100 + '%'
  49.                         return message
  50.                     },
  51.                 },
  52.                 grid: {
  53.                     top: '8%',
  54.                     bottom: '8%',
  55.                     left: '6%',
  56.                     right: '6%',
  57.                     containLabel: true,
  58.                 },
  59.                 legend: {
  60.                     show: true,
  61.                     x: 'center',
  62.                     y: 'bottom',
  63.                     padding: [0, 0, 10, 0],
  64.                 },
  65.                 xAxis: {
  66.                     type: 'category',
  67.                     data: chartData.data.month,
  68.                     // 坐标轴两边留白策略（设置从0开始）
  69.                     boundaryGap: false,
  70.                 },
  71.                 yAxis: [
  72.                     {
  73.                         type: 'value',
  74.                         name: '销\n量\n︵\n件\n︶',
  75.                         nameLocation: 'center',
  76.                         nameRotate: 0,
  77.                         position: 'left',
  78.                         nameTextStyle: {
  79.                             fontSize: 12,
  80.                             padding: [0, 30, 0, 0],
  81.                         },
  82.                     },
  83.                     {
  84.                         type: 'value',
  85.                         name: '毛\n利\n率\n︵\n%\n︶',
  86.                         nameLocation: 'center',
  87.                         nameRotate: 0,
  88.                         position: 'right',
  89.                         nameTextStyle: {
  90.                             fontSize: 12,
  91.                             padding: [0, 0, 0, 15],
  92.                         },
  93.                         axisLabel: {
  94.                             formatter:  function (param) {
  95.                                 return param * 100
  96.                             },
  97.                         },
  98.                     },
  99.                 ],
  100.                 series: [
  101.                     {
  102.                         name: '销量',
  103.                         type: 'line',
  104.                         symbol: 'roundRect',
  105.                         symbolSize: 10,
  106.                         smooth: true,
  107.                         data: chartData.data.quantity,
  108.                         yAxisIndex: 0,
  109.                     },
  110.                     {
  111.                         name: '毛利率',
  112.                         type: 'line',
  113.                         symbol: '',
  114.                         symbolSize: 10,
  115.                         smooth: true,
  116.                         data: chartData.data.rate,
  117.                         yAxisIndex: 1,
  118.                     },
  119.                 ],
  120.             }
  121.             // 使用刚指定的配置项和数据显示图表
  122.             myChart.setOption(option)
  123.         },
  124.     },
  125. }
  126. </script>
  127.  
  128. <style scoped>
  129. .mainDiv {
  130.     border: 1px solid;
  131.     height: 410px;
  132.     border-radius: 5px;
  133.     text-align: center;
  134. }
  135. .titleDiv {
  136.     height: 30px;
  137.     line-height: 30px;
  138.     font-size: 12;
  139. }
  140. .chartDiv {
  141.     height: 380px;
  142. }
  143. </style>

2.至此，双轴折线图相关介绍告一段落，启动项目，预览ChartLine页如下图：

2.5.动态折线图

1.ECharts动态折线图可以分为两类实现：一种为渲染静态数据，产生动画效果的折线图；另一种为动态渲染数据产生折线图（这点和上节中的动态排序柱状图实现原理类似）。我们可以利用第一种方式来实现上半年各月产品销量数据（面包、牛奶和饼干），主要是使用animationDuration动画属性以及series.endLabel末端标签显示属性，复制出一个的图表组件ChartLineFive.vue放在ChartLine页图表5的位置上进行展示。参考代码：

  1. <template>
  2.     <div class="mainDiv">
  3.         <div class="titleDiv">上半年各月产品销量</div>
  4.         <div class="chartDiv" id="chartLineFive"></div>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.     data() {
  11.         return {
  12.             chartData: {},
  13.         }
  14.     },
  15.     name: 'ChartLineFive',
  16.     mounted() {
  17.         this.getChartData().then(() => {
  18.             // 数据请求到后渲染图表
  19.             this.renderChart()
  20.         })
  21.     },
  22.     methods: {
  23.         // 请求数据回来
  24.         async getChartData() {
  25.             this.chartData = await this.$axios({ url: 'sales/product/month' })
  26.         },
  27.         // 渲染图表
  28.         renderChart() {
  29.             let myChart = this.$echarts.init(document.getElementById('chartLineFive'))
  30.             let chartData = this.chartData
  31.             var option = {
  32.                 tooltip: {
  33.                     show: true,
  34.                     textStyle: {
  35.                         color: '#000000',
  36.                         fontStyle: 'normal',
  37.                         fontSize: 14,
  38.                         align: 'left',
  39.                     },
  40.                     formatter: function (param) {
  41.                         // 设置提示显示当季度所有产品销量信息
  42.                         let message =
  43.                             param.name +
  44.                             '<br />' +
  45.                             '面包：' +
  46.                             chartData.data.breadAmount[param.dataIndex] +
  47.                             '<br />' +
  48.                             '牛奶：' +
  49.                             chartData.data.milkAmount[param.dataIndex] +
  50.                             '<br />' +
  51.                             '饼干：' +
  52.                             chartData.data.cookieAmount[param.dataIndex]
  53.                         return message
  54.                     },
  55.                 },
  56.                 grid: {
  57.                     top: '8%',
  58.                     bottom: '8%',
  59.                     left: '4%',
  60.                     right: '4%',
  61.                     containLabel: true,
  62.                 },
  63.                 legend: {
  64.                     show: true,
  65.                     x: 'center',
  66.                     y: 'bottom',
  67.                     padding: [0, 0, 10, 0],
  68.                     data: [
  69.                         {
  70.                             name: '面包',
  71.                             icon: 'path://M66.19,738.03c2.39,41.18,33.76,75.58,75.05,80.8,42.68,5.4,106.69-1.05,197.53-43.32,0,0,416.31-181.69,540.54-378.14,0,0,49-82.43,51.96-152.97,1.24-29.57-13.29-57.64-37.94-74.36-52.25-35.45-176.24-91.82-392.54-38.99,0,0-343.32,67.7-430.61,448.07,0,0.02-10.13,53.16-3.99,158.91z M584.5,115.17s-3.06,154.95-44.02,169.16c0,0-23.56-131.75-60.42-147.99-0.01,0,58.84-16.35,104.44-21.17z M183.48,336.63s83.05,140.79,70.01,185.83c0,0-86.83-101.91-126.95-97.72,0.01,0,27.18-52.68,56.94-88.11z M365.11,184.25s62.22,183.34,29.41,211.49c0,0-77.84-151.04-118.15-152.69,0-0.01,48.13-37.69,88.74-58.8z M141.64,495.33s-71.05,88.49-61.12,196.48,61.12-196.48,61.12-196.48z M909.55,184.25c3.61,69.01-305.31,450.06-618.91,611.35,0,0,342.16-141.32,497.43-294.66-0.01,0.01,229.55-205.04,121.48-316.69z',
  72.                         },
  73.                         {
  74.                             name: '牛奶',
  75.                             icon: 'path://M726.65,184a19.09,19.09,0,0,0-19.09-19.09H316.44A19.09,19.09,0,0,0,297.35,184v50.46a10,10,0,0,0,10,10h409.3a10,10,0,0,0,10-10zM257.9,754.85a10,10,0,0,0-10,10V840a19.09,19.09,0,0,0,19.1,19.13h490A19.09,19.09,0,0,0,776.1,840v-75a10,10,0,0,0-10.05-10zM723.42,267.33H300.58a10,10,0,0,0-9.32,6.37L258.48,358a10,10,0,0,0,9.32,13.63h488.4a10,10,0,0,0,9.32-13.63l-32.78-84.3a10,10,0,0,0-9.32-6.37zM616.75,624.24c-27-10.12-48.09,1.94-72.55,15.89-21.35,12.19-43.42,24.77-70.08,21-25.46-3.64-49.29-19.13-63.76-41.44s-18.29-48.72-10.9-74.58c5.42-19-6.85-31.72-20.15-37.33-16.81-7.07-40.64-4.74-53.15,17.16-13.23,23.13-29.36,51.31-64.44,50.54-0.8,0-1.82-0.08-2.94-0.18a10,10,0,0,0-10.88,10v128.43A18.21,18.21,0,0,0,266.11,732H646a18.22,18.22,0,0,0,18.15-16.61c4.31-48.27-11.06-77.52-47.4-91.15zM541.06,455c10.92,13.43,30.4,23.33,52.28,10.82,31.66-18.09,60.1-21.68,80-10.1,15.55,9,24.11,26.44,24.11,49.05,0,18.93,12.27,38.52,29.84,47.64,13.52,7,28.41,7.06,42.89,0.44a10,10,0,0,0,5.88-9.12V404.52a10,10,0,0,0-10-10H544.58a10.11,10.11,0,0,0-8.72,5.09c-11.38,19.68-6.29,41.24,5.2,55.39z M716.77,572.72c-25.24-13.11-42.19-40.42-42.19-68,0-10-2.2-23.15-12.7-29.24-12.41-7.21-33.26-3.49-57.18,10.18-27.83,15.91-60.56,9.39-81.41-16.26-12.86-15.8-20.37-39.21-14.79-62.58a9.92,9.92,0,0,0-9.57-12.33h-241a10,10,0,0,0-10,10V542.1a10,10,0,0,0,8.68,9.91c2,0.27,3.87,0.5,4.82,0.53,21,0.82,30.69-14.18,44.86-38.95,18.58-32.51,55.28-38.13,81.94-26.92,27.65,11.65,41,37.66,33.29,64.73a67.26,67.26,0,0,0,8.09,55.83c10.93,16.83,28.79,28.5,47.78,31.21s36.61-7.44,55.46-18.2,39.7-22.66,64.1-22.66a78.44,78.44,0,0,1,27.84,5.22c47.36,17.75,68.07,57.63,61.77,118.68a9.81,9.81,0,0,0,10,11l69.59-0.44a10,10,0,0,0,9.93-10V588.79a10,10,0,0,0-12.15-9.79,69.13,69.13,0,0,1-47.16-6.28z',
  76.                         },
  77.                         {
  78.                             name: '饼干',
  79.                             icon: 'path://M537.6,130.133333c-46.933333-4.266667-91.733333,0-132.266667,10.666667-14.933333,4.266667-21.333333,19.2-14.933333,34.133333,10.666667,23.466667,14.933333,51.2,12.8,81.066667-6.4,70.4-59.733333,130.133333-130.133333,142.933333-6.4,2.133333-12.8,2.133333-17.066667,2.133334-17.066667,2.133333-27.733333,19.2-19.2,34.133333,6.4,17.066667,10.666667,34.133333,10.666667,53.333333,0,57.6-38.4,106.666667-89.6,125.866667-12.8,4.266667-19.2,19.2-14.933334,32,51.2,145.066667,192,249.6,358.4,249.6,219.733333,0,396.8-183.466667,384-407.466667-12.8-187.733333-162.133333-341.333333-347.733333-358.4z M584.533333,379.733333m-74.666666,0a74.666667,74.666667,0,1,0,149.333333,0,74.666667,74.666667,0,1,0-149.333333,0Z M443.733333,640m-74.666666,0a74.666667,74.666667,0,1,0,149.333333,0,74.666667,74.666667,0,1,0-149.333333,0Z M704,635.733333m-61.866667,0a61.866667,61.866667,0,1,0,123.733334,0,61.866667,61.866667,0,1,0-123.733334,0Z',
  80.                         },
  81.                     ],
  82.                 },
  83.                 xAxis: {
  84.                     type: 'category',
  85.                     data: chartData.data.month,
  86.                 },
  87.                 yAxis: {
  88.                     type: 'value',
  89.                     axisLabel: {
  90.                         // 设置坐标轴文本和坐标轴的间距，以免第一个点的标签值和y轴的坐标轴文本有重叠
  91.                         margin: 15,
  92.                     },
  93.                     splitLine: {
  94.                         show: true,
  95.                         lineStyle: {
  96.                             color: ['#E5EAF3'],
  97.                             width: 1,
  98.                             type: 'dashed',
  99.                         },
  100.                     },
  101.                 },
  102.                 animationDuration: 10000,
  103.                 series: [
  104.                     {
  105.                         name: '面包',
  106.                         type: 'line',
  107.                         symbol: 'path://M66.19,738.03c2.39,41.18,33.76,75.58,75.05,80.8,42.68,5.4,106.69-1.05,197.53-43.32,0,0,416.31-181.69,540.54-378.14,0,0,49-82.43,51.96-152.97,1.24-29.57-13.29-57.64-37.94-74.36-52.25-35.45-176.24-91.82-392.54-38.99,0,0-343.32,67.7-430.61,448.07,0,0.02-10.13,53.16-3.99,158.91z M584.5,115.17s-3.06,154.95-44.02,169.16c0,0-23.56-131.75-60.42-147.99-0.01,0,58.84-16.35,104.44-21.17z M183.48,336.63s83.05,140.79,70.01,185.83c0,0-86.83-101.91-126.95-97.72,0.01,0,27.18-52.68,56.94-88.11z M365.11,184.25s62.22,183.34,29.41,211.49c0,0-77.84-151.04-118.15-152.69,0-0.01,48.13-37.69,88.74-58.8z M141.64,495.33s-71.05,88.49-61.12,196.48,61.12-196.48,61.12-196.48z M909.55,184.25c3.61,69.01-305.31,450.06-618.91,611.35,0,0,342.16-141.32,497.43-294.66-0.01,0.01,229.55-205.04,121.48-316.69z',
  108.                         symbolSize: 12,
  109.                         data: chartData.data.breadAmount,
  110.                         itemStyle: {
  111.                             color: '#5470C6',
  112.                         },
  113.                         endLabel: {
  114.                             show: true,
  115.                         },
  116.                     },
  117.                     {
  118.                         name: '牛奶',
  119.                         type: 'line',
  120.                         symbol: 'path://M726.65,184a19.09,19.09,0,0,0-19.09-19.09H316.44A19.09,19.09,0,0,0,297.35,184v50.46a10,10,0,0,0,10,10h409.3a10,10,0,0,0,10-10zM257.9,754.85a10,10,0,0,0-10,10V840a19.09,19.09,0,0,0,19.1,19.13h490A19.09,19.09,0,0,0,776.1,840v-75a10,10,0,0,0-10.05-10zM723.42,267.33H300.58a10,10,0,0,0-9.32,6.37L258.48,358a10,10,0,0,0,9.32,13.63h488.4a10,10,0,0,0,9.32-13.63l-32.78-84.3a10,10,0,0,0-9.32-6.37zM616.75,624.24c-27-10.12-48.09,1.94-72.55,15.89-21.35,12.19-43.42,24.77-70.08,21-25.46-3.64-49.29-19.13-63.76-41.44s-18.29-48.72-10.9-74.58c5.42-19-6.85-31.72-20.15-37.33-16.81-7.07-40.64-4.74-53.15,17.16-13.23,23.13-29.36,51.31-64.44,50.54-0.8,0-1.82-0.08-2.94-0.18a10,10,0,0,0-10.88,10v128.43A18.21,18.21,0,0,0,266.11,732H646a18.22,18.22,0,0,0,18.15-16.61c4.31-48.27-11.06-77.52-47.4-91.15zM541.06,455c10.92,13.43,30.4,23.33,52.28,10.82,31.66-18.09,60.1-21.68,80-10.1,15.55,9,24.11,26.44,24.11,49.05,0,18.93,12.27,38.52,29.84,47.64,13.52,7,28.41,7.06,42.89,0.44a10,10,0,0,0,5.88-9.12V404.52a10,10,0,0,0-10-10H544.58a10.11,10.11,0,0,0-8.72,5.09c-11.38,19.68-6.29,41.24,5.2,55.39z M716.77,572.72c-25.24-13.11-42.19-40.42-42.19-68,0-10-2.2-23.15-12.7-29.24-12.41-7.21-33.26-3.49-57.18,10.18-27.83,15.91-60.56,9.39-81.41-16.26-12.86-15.8-20.37-39.21-14.79-62.58a9.92,9.92,0,0,0-9.57-12.33h-241a10,10,0,0,0-10,10V542.1a10,10,0,0,0,8.68,9.91c2,0.27,3.87,0.5,4.82,0.53,21,0.82,30.69-14.18,44.86-38.95,18.58-32.51,55.28-38.13,81.94-26.92,27.65,11.65,41,37.66,33.29,64.73a67.26,67.26,0,0,0,8.09,55.83c10.93,16.83,28.79,28.5,47.78,31.21s36.61-7.44,55.46-18.2,39.7-22.66,64.1-22.66a78.44,78.44,0,0,1,27.84,5.22c47.36,17.75,68.07,57.63,61.77,118.68a9.81,9.81,0,0,0,10,11l69.59-0.44a10,10,0,0,0,9.93-10V588.79a10,10,0,0,0-12.15-9.79,69.13,69.13,0,0,1-47.16-6.28z',
  121.                         symbolSize: 12,
  122.                         data: chartData.data.milkAmount,
  123.                         itemStyle: {
  124.                             color: '#91CC75',
  125.                         },
  126.                         endLabel: {
  127.                             show: true,
  128.                         },
  129.                     },
  130.                     {
  131.                         name: '饼干',
  132.                         type: 'line',
  133.                         symbol: 'path://M537.6,130.133333c-46.933333-4.266667-91.733333,0-132.266667,10.666667-14.933333,4.266667-21.333333,19.2-14.933333,34.133333,10.666667,23.466667,14.933333,51.2,12.8,81.066667-6.4,70.4-59.733333,130.133333-130.133333,142.933333-6.4,2.133333-12.8,2.133333-17.066667,2.133334-17.066667,2.133333-27.733333,19.2-19.2,34.133333,6.4,17.066667,10.666667,34.133333,10.666667,53.333333,0,57.6-38.4,106.666667-89.6,125.866667-12.8,4.266667-19.2,19.2-14.933334,32,51.2,145.066667,192,249.6,358.4,249.6,219.733333,0,396.8-183.466667,384-407.466667-12.8-187.733333-162.133333-341.333333-347.733333-358.4z M584.533333,379.733333m-74.666666,0a74.666667,74.666667,0,1,0,149.333333,0,74.666667,74.666667,0,1,0-149.333333,0Z M443.733333,640m-74.666666,0a74.666667,74.666667,0,1,0,149.333333,0,74.666667,74.666667,0,1,0-149.333333,0Z M704,635.733333m-61.866667,0a61.866667,61.866667,0,1,0,123.733334,0,61.866667,61.866667,0,1,0-123.733334,0Z',
  134.                         symbolSize: 12,
  135.                         data: chartData.data.cookieAmount,
  136.                         itemStyle: {
  137.                             color: '#FE9F9F',
  138.                         },
  139.                         endLabel: {
  140.                             show: true,
  141.                         },
  142.                     },
  143.                 ],
  144.             }
  145.             // 使用刚指定的配置项和数据显示图表
  146.             myChart.setOption(option)
  147.         },
  148.     },
  149. }
  150. </script>
  151.  
  152. <style scoped>
  153. .mainDiv {
  154.     border: 1px solid;
  155.     height: 410px;
  156.     border-radius: 5px;
  157.     text-align: center;
  158. }
  159. .titleDiv {
  160.     height: 30px;
  161.     line-height: 30px;
  162.     font-size: 12;
  163. }
  164. .chartDiv {
  165.     height: 380px;
  166. }
  167. </style>

2.我们可以利用第二种方式来实现近2年各个月份产品销量数据（x轴和折线数据动态渲染），复制出一个的图表组件ChartLineSix.vue放在ChartLine页图表6的位置上进行展示。参考代码：

  1. <template>
  2.     <div class="mainDiv">
  3.         <div class="titleDiv">月度产品销量展示</div>
  4.         <div class="chartDiv" id="chartLineSix"></div>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.     data() {
  11.         return {
  12.             chartData: {},
  13.             saleMonth: [],
  14.             saleAmount: [],
  15.             currentIndex: 0,
  16.             currentMonth: [],
  17.             currentAmount: [],
  18.         }
  19.     },
  20.     name: 'ChartLineSix',
  21.     mounted() {
  22.         this.getChartData().then(() => {
  23.             let myChart = this.$echarts.init(document.getElementById('chartLineSix'))
  24.             // 数据请求到后渲染图表
  25.             this.renderChart(myChart)
  26.             // 更新图表option
  27.             let that = this
  28.             setInterval(function () {
  29.                 that.update(myChart)
  30.             }, 1500)
  31.         })
  32.     },
  33.     methods: {
  34.         // 请求数据回来
  35.         async getChartData() {
  36.             this.chartData = await this.$axios({ url: 'sales/year/amount' })
  37.             this.saleMonth = this.chartData.data.month
  38.             this.saleAmount = this.chartData.data.amount
  39.             this.currentMonth = this.saleMonth.slice(0, 6)
  40.             this.currentAmount = this.saleAmount.slice(0, 6)
  41.         },
  42.         // 渲染图表
  43.         renderChart(myChart) {
  44.             let currentMonth = this.currentMonth
  45.             let currentAmount = this.currentAmount
  46.             var option = {
  47.                 tooltip: {
  48.                     show: true,
  49.                 },
  50.                 legend: {
  51.                     show: true,
  52.                     data: ['销量'],
  53.                     x: 'center',
  54.                     y: 'bottom',
  55.                     padding: [0, 0, 10, 0],
  56.                     textStyle: {
  57.                         fontStyle: 'normal',
  58.                         fontSize: 12,
  59.                     },
  60.                 },
  61.                 grid: {
  62.                     top: '8%',
  63.                     bottom: '10%',
  64.                     left: '4%',
  65.                     right: '8%',
  66.                     containLabel: true,
  67.                 },
  68.                 xAxis: {
  69.                     type: 'category',
  70.                     //boundaryGap: false,
  71.                     data: currentMonth,
  72.                 },
  73.  
  74.                 yAxis: {
  75.                     type: 'value',
  76.                 },
  77.                 series: [
  78.                     {
  79.                         name: '销量',
  80.                         type: 'line',
  81.                         symbol: 'roundRect',
  82.                         symbolSize: 8,
  83.                         data: currentAmount,
  84.                         label: {
  85.                             show: true,
  86.                             position: 'top',
  87.                             fontSize: 10,
  88.                         },
  89.                     },
  90.                 ],
  91.             }
  92.             // 使用刚指定的配置项和数据显示图表
  93.             myChart.setOption(option)
  94.         },
  95.         // 更新图表option
  96.         update(myChart) {
  97.             // 数据动态增长
  98.             if (this.currentIndex < 18) {
  99.                 this.currentIndex = this.currentIndex + 1
  100.             } else {
  101.                 this.currentIndex = 0
  102.             }
  103.             let index = this.currentIndex
  104.             let newCurrentMonth = this.saleMonth.slice(index, index + 6)
  105.             let newCurrentAmount = this.saleAmount.slice(index, index + 6)
  106.             var newOption = {
  107.                 xAxis: {
  108.                     data: newCurrentMonth,
  109.                 },
  110.                 series: [
  111.                     {
  112.                         data: newCurrentAmount,
  113.                     },
  114.                 ],
  115.             }
  116.             myChart.setOption(newOption)
  117.         },
  118.     },
  119. }
  120. </script>
  121.  
  122. <style scoped>
  123. </style>

3.至此，动态折线图相关介绍告一段落，启动项目，预览ChartLine页如下图：

3.小节总结

    折线图用于分析事物随时间或有序类别而变化的趋势。本小节主要记录了ECharts折线图的基础设置，并延伸介绍了如何实现多折线图、阶梯折线图、双轴折线图、动态折线图等可视化图表。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/208720
推荐阅读