特点

折线图更多的使用来呈现数据随时间的『变化趋势』

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10. </head>
  12. <body>
  13.     <div id="main" style="width: 600px;height:400px;"></div>
  14.     <script>
  15.         var myChart = echarts.init(document.getElementById('main'))
  16.         var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  17.         var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
  18.         var option = {
  19.             xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [{
  20.                 type: 'line', data: yDataArr,
  21.                 //最大最小值
  22.                 markPoint: {
  23.                     data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
  24.                 },
  25.                 //平均值
  26.                 markLine: { data: [{ type: 'average', name: '平均值' }] },
  27.                 //标注区间
  28.                 markArea: { data: [[{ xAxis: '1月' }, { xAxis: '2月' }], [{ xAxis: '7月' }, { xAxis: '8月' }]] },
  30.                 //是否平滑线条，true为是
  31.                 smooth: true,
  33.                 //设置线条样式
  34.                 lineStyle: { color: 'green', type: 'dashed' }, // 可选值还有 dotted solid 
  35.                 //填充风格
  36.                 areaStyle: { color: 'pink' },
  38.                 // 紧挨边缘 boundaryGap boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始
  39.                 boundaryGap: false
  40.             },]
  41.         }
  42.         myChart.setOption(option)
  43.     </script>
  44. </body>
  46. </html>

image.png

问题

缩放, 脱离0值比例 如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

image.png
image.png

解决办法

这显然不是我们想要的效果, 因此可以配置上 scale , 让其摆脱0值比例 scale 配置 scale 应该配置给 y 轴 

  1. yAxis: { type: 'value',scale: true }

image.png

堆叠图

堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加 如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10. </head>
  12. <body>
  13.     <div id="main" style="width: 600px;height:400px;"></div>
  14.     <script>
  15.         var myChart = echarts.init(document.getElementById('main'))
  16.         var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  17.         var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
  18.         var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
  19.         var option = { xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value', scale: true }, series: [{ type: 'line', data: yDataArr1 }, { type: 'line', data: yDataArr2 }] }
  20.         myChart.setOption(option)
  21.     </script>
  22. </body>
  24. </html>

image.png

蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基 础之上进行绘制. 基于前一个图表进行堆叠

series中的每一个对象配置相同的stack值, 这个all可以任意写

  1. series: [{ type: 'line', data: yDataArr1, stack: 'all'}, { type: 'line', data: yDataArr2 , stack: 'all'}]