series中的的type为line

  1.    <script src="lib/echarts.min.js"></script>
  2. </head>
  3. <body>
  4.     <div style="width:600px;height: 400px;"></div>
  5.     <script>
  6.         // 1.echarts最基本的是代码结构
  7.         // 2.x轴数据：['1月'，'2月','3月','4月','5月','6月','7月','8月','9月','10月','11月'，'12月']
  8.         // 3.y轴数据:[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
  9.         // 4.将type的值设置为line
  10.         var mCharts = echarts.init(document.querySelector('div'))
  11.         var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  12.         var yDataArr = [3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
  13.         var option = {
  14.             xAxis:{
  15.                 type:'category',
  16.                 data:xDataArr
  17.             },
  18.             yAxis:{
  19.                 type:'value'
  20.             },
  21.             series:[
  22.                 {
  23.                     name:'销量',
  24.                     data:yDataArr,
  25.                     type:'line'
  26.                 }
  27.             ]
  28.         }
  29.         mCharts.setOption(option)
  30.     </script>
  31. </body>

折线图的常见效果

标记

最大值，最小值，平均值，标注区间

最大值：maekPoint

image.png

平均值:markLine

标注区间:markArea

image.png
image.png
有一些特定的月份，想用阴影的方式把她标志出来，就可以使用标注区间
标域的数据数组。每个数组项是一个两个项的数组，分别表示标域左上角和右下角的位置

线条控制：平滑风格smooth

image.png

改变线条的演示lineStyle

image.png

填充风格

areaStyle
想要将折现涉及的地方的面积填充为一个阴影区域
将线条和x轴所包裹的区域通过面积的方式填充上
还可以在areaStyle的括号中设置填充的颜色
image.png
image.png

紧挨边缘boundaryGap

让第一个数据的值紧贴在y轴之上
image.png

缩放：脱离0值得比例

如果每个x轴数据对应得y轴数据得值相差不多，这样折线图就会变成一条直线。
image.png
image.png
这样也可以解决y轴数据过于接近造成折线变成直线的问题

堆叠图

一个图里面有多条折线
为了让不同折线不重叠，就让下一个条折线上的点以下面折线上的点为起点
例如：使用堆叠法绘制这两条折线
image.png
image.png
image.png