用Echarts绘制图表数据

感言

之前看到 一些图标，完全就不知道是什么来的，后来才知道有一个东西叫Echarts。这个不是什么语言，会JS就可以了，而且有很多的参数键值对，不是都要全部都记住，用的时候去翻文档就可以，牛逼一点的人都是通过文档去学习一个新的东西，我目前还不能达到，希望以后可以达到吧，写这个也是为给自己的学习之路做个纪念，不代表自己总结的东西就是有深度的，或者也可能有些是自己的错误理解。

小节 官网上的Echarts

1、百度做出来的一个开源的插件，后来记得好像是被托管了，上网搜一下就可以出来，不过现在百度真的有点那啥，首个置顶带官方字样的其实是百度文档的官网，真是浪费用户的鼠标寿命。第二个进不去了，只能通过第三个进去

2、这里不是第一次来这里逛了，一般进去看配置手册就可以，后面有需要再过来看API

3、进来之后，左侧栏就是里面的配置项，大多数都是使用JS对象的方式在里面配置信息参数，搜索栏可以去搜索看到的不明配置项的信息

小节 快速入门

1、在html页面中，创建一个有高的div容器盒子，这里可以不设置宽，一定要设置高

2、将前面设置好的div容器初始化一下，引入了jquary文件的话，可以更加方便一些

3、下面就是配置主题的option，大约图表的主体部分就都在里面了

4、最后使用setOption方法，将option对象放进去加载，就可以显示出一个最入门的echarts图表了

小节 参数项与数据后台传入

1、title

图表的标题部分，快速入门中就使用到了text一项，当然，有些没有配置的项是直接就会给他们一个默认值，默认值是什么那后面就是什么

2、legend

图标的图例部分，可以对图表中的曲线进行对比分析，另外就是图例当中的值的名称是和曲线的名称是一样的，如果不一致的话，是无法显示出来的，这里就是一个坑，自己跳了不少回

3、xAxis

这里就是用来设置x轴的样式数据，首先可以表示出来的是，x轴如果在type当中设置了category，类目轴，那它就会根据data当中的数据中取出相关的值出来，展示在x坐标轴上

4、yAxis

y轴如果是设置了value，那就是数据轴，这里的数据轴就是根据series来进行相关的数据展示

5、series

series就是展示的数据，不是一个对象了，这里就是一个数组，里面可以存相关的数据

name配置的是这个曲线的名字

type配置的是这个曲线的类型，如果是line就是折线图，如果是bar就是柱状图，具体配置看配置文档

data就是数据

data可以是一个变量，将后台传入过来的数据展示到series中，也就是后台数据的动态展示

结语

这个只是入门数据的参数配置，比较简单，后面可以根据配置文档，构造出更好看、精致的图表数据