Echarts的使用

前端做图形报表有很多种，随着Canvas的诞生产生了很多做图表图画的控件，其实控件熟练使用一个能满足需求就行了，下来我就个人的见解说一下Echaets，首先介绍一下Echarts，Echarts缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），可支持多图表、组件的联动和混搭展现。现在Echarts已到3.2.1。 1，首先下载一个echarts.js文件但也可以引用网上， 2，在简单的html中引入echart-all.js文件和为图形准备容器预先准备好具有宽和高的网页元素，我们将用它绘制数据表。 3，然后就是重头戏，我们来绘制数据表，首先配置路径，接着使用Echarts开始绘图。配置路径是我们的dist文件，在动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径 这里加载的是bar柱状图 重点是option里的设置，设置坐标轴、设置数据。定义什么样的图都是在option里设置。Line 是折线图bar柱形图pie饼图，圆环图map地图等等 图形都是自己设定。 运行结果如下： 4，接下来我们来点难的加点料，来点混搭，直线图加上条形图，同时画平均线、提示最大最小值， 当需要混搭的时候其实和绘制一个图的时候一样，在ruquire里使用你要绘制的模块加载再有一点需要注意的是在series里要设置你要的图形数据，只要数值对那效果就会出来了， 运行结果如下： 如果大家还想要在更深一点学习，那我就写了一个demo地图但是在echarts里有的代码写的是对的但不会出现效果这个是少一个js脚本的原因大家可以在网上查一下， 运行结果如下： 5，会用echarts就要理解其中的原理， 前端JS：初始化时即加载Echarts，将不需要进行加载的配置项(例如title、tooltip等)不作改动，将需要动态加载数据的配置放入ajax的success:function(){}中进行处理。 然后定义一个为series这个即将动态加入数据的配置项准备的名为Item的数组容器，接着对后台返回过来的数据(childkind)进行遍历，将遍历出的数据赋给容器中的相应属性(例：tp.name=childkind[i])。由于series里面的data属性(接收的是数组数据)也需要进行数据动态加载，接着再定义一个list数组，循环写入数据到list中，再将list数组返给tp.data。最后再设置Echarst相关配置项。 在这里我只是简单的做一下介绍，代码都一样主要是在option里代码设置，可以做成scatter散点 pie图饼 radar雷达图大家可以根据自己的需求来定义自己的效果。