实现步骤
Echarts最基本的代码结构
引入js文件
DOM容器
初始化对象
设置option
设置x轴、y轴数据
图表类型：在series下设置 type: ‘line‘
标记：最大值 最小值 平均值 标注区间
线条控制：平滑 风格 smooth lineStyle
填充风格 areaStyle
紧挨边缘 boundaryGap: false
缩放：脱离0值的比例 scale: true
堆叠图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style="width: 600px; height: 400px;"></div> <script> var mCharts = echarts.init(document.querySelector(‘div‘)); var xDataArr = [‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘, ‘7月‘, ‘8月‘, ‘9月‘, ‘10月‘, ‘11月‘, ‘12月‘] var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600] var yDataArr2 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200] var option = { xAxis: { type: ‘category‘, data: xDataArr, boundaryGap: false }, yAxis: { type: ‘value‘, scale: true }, series: [ { name: ‘康师傅‘, type: ‘line‘, data: yDataArr, smooth: true, areaStyle: { color: ‘pink‘ }, stack: ‘all‘ }, { name: ‘统一‘, type: ‘line‘, data: yDataArr2, smooth:true, areaStyle: { color: ‘grey‘ }, stack: ‘all‘ } ] } mCharts.setOption(option) </script> </body> </html>
原文：https://www.cnblogs.com/Gazikel/p/14438243.html