echarts个人使用总结

近期项目中涉及到图表统计功能，恰好以前有接触过echarts，因此就采用echarts进行图表的绘制；echarts绘制的图吧，给人的感觉就是美观，而且图本身还会附带很多的工具，对于要用统计图做演示的人来说是个福利；另外就是样式多，不单调，不光传统的饼状图，柱状图，折线图等等，百度echarts官网，对此有很详细的介绍，不再赘述。

下面是关于自己使用echarts制图后的一小点点总结，网上有很多介绍关于echarts引入的js文件具体是哪些，本人在做的时候并没有那么仔细的去区分，直接进入官网下载echarts-all.js，引入文件中即可，但是在和jQuery一起使用的时候，最好先引入jQuery，再引入echarts；文件引入后下面就是具体的作图啦，

根据官方介绍是为统计图留一个div，最终图展示在div里面，但是切记div要设置高度，不然图出不来，具体原因没搞清楚；如果光是前端将图做出来做演示用的话，可以采用

var c1 = echrts.init(document.getElementById（“your div's id name ”）),然后引用官方网站中实例模块，将对应图的option引入即可


最后，再有  c1.setOption(option),好了，写到这里，如果只是作为前端的统计图展示，运行起来就可以了，但是这不是我们要的啊，我们需要的是通过后台传数据到前台，时时交互，而刚才的数据是写死的，所以后台传输数据给echarts才是关键，我在项目中运用echarts作了线状，饼状，柱状三个常规图，如上，图的内部东西都包装在option里面已经做好，仔细看官方文档，不难，难点是数据格式的问题，我们的前台统计图需要怎样的数据格式，先说饼状图吧，

明确的说，前后台的数据交换格式就是json，饼状图看data的格式为 data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']，数组的形式，但又不像，更像是jsonArray，而具体饼状占有多少的数据格式为

 
   ，

数据格式不好说，初看起来比较复杂（其实做了后面的柱状，线状图以后，感觉就饼状图的数据格式比较复杂，其他都一样），我一共用了两种方式传递数据：第一种，后台采用List套List的方式，


然后在用jsonArray格式传到前台，前台处理数据如下



再分别放到data上面即可，

第二种方式，我后台采用这样的数据格式，（这个比较简单点，前台处理少），Map  Map<String,String[]> map = new HashMap<String,String[]>(),但是在往前台数据传输的时候，用 JSONObject的方式，前台数据接手后，直接放入data处即可，（obj.count），需要处理的地方是



在完成了饼状图以后，其他的几个图形我都采用这样的数据传输方式，尤其采用上述的map后台包装数据，前台数据根本就不用处理，就是[  ]格式的数据，当然，图形出来以后就是样式了，我前面说过的，样式多，是他的特点，不错这个可以看官方文档的介绍，暂时发现的就这么多，要是还有发现的后续补充，，，