前言
之前参加数学建模的时候需要将数据展示成图表形式，当时知道主流是MATLAB，pathon也可以，但是却不知道JS也可以绘制图表，甚至可以做出像地图、雷达图等更高级的东西。
Echart
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
通过一些简单的配置就可以做出丰富的界面。
图表容器
首先我们需要一个容器来放置我们的图表，通常有两种方式：
在HTML中定义有宽度和高度的父容器
<div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript"> let myChart = echarts.init(document.getElementById('main')); </script>
通过div设置宽高来限制图表，这是官网推荐的方式。
指定图表大小
<div id="main"></div><script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'), null, {width: 600,height: 400}); </script>
折线图
今天主要讲解一下代码中出现的折线图。
折线图是一个典型的二维图标，具有x轴和y轴，我们首先定义x轴和y轴的数据。
let xDataArr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']let yDataArr = [3000,2800,1000,800,700,140,1300,900,1000,800,600]
这部分根据自己的需求进行定义。
xAxis:{type:'category',data:xDataArr,},yAxis:{type:'value',scale:true}
接下来将xAxis和yAxis填充，scale:true表示缩放，比如数据集中在很大的位置，如果从零开始就会显得可视化很低。
series
series设置一些参数，type:'line'表示这个图是折线图，通过type可以确定这个图表是什么图。
markLine:{data:[{type:'average',name:'平均值'}]},
markLine配置可以使图表展示平均值，并且不需要自己计算。
后记
Echart有很多有趣的东西，学习Echart既可以丰富自己的技术，也可以提高自己的兴趣。
