基于Echart.js一点总结

     Echart概述：  Echarts，一个纯js的图库表，可以流畅的运行在pc端和移动端的设备上，底层依赖轻量级的Canvas类库Zrender,提供直接、生动、可交互性的可视化报表。

Ecahrt可生成饼图，折线图、柱状图、散点图和地域分布图等等各种图形，一般基于ajax请求所返回的数据然后进行解析，生成自己所需要的图形，一般返回map数据类型，

map中的key和value都可以以集合的形式进行存储，这样在前台解析的时候像图形中的那些横坐标中的值对应的是map的key中的集合，而value可以依次对应该坐轴值所表示的数据。

Echart一些用法总结：

像平常会经常用到的 柱状图，我们可以在柱状图里面弄两条柱子具体配置如下：

$.ajax({
type: "POST",
url: "../activitys/lineFenbu.shtml",
data: platform.getParam(),
success: function(resp){（resp返回的数据是一个map类型的数据（key是集合，value也是集合））
if(resp.status==200) {
  if(resp.data==null){
  return;
  }
var myChart5 = echarts.init(document.getElementById('llaing'),'macarons');（此id为jsp页面中div的元素id）
option5= {
title: {
       text: '前十省份地域分布信息',
       x:"center",
   },
   tooltip: {
       trigger: 'axis',
       axisPointer: {            // 坐标轴指示器，坐标轴触发有效
           type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
       },
   },
   grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
   },
   yAxis:{
       type: 'value',
       boundaryGap: [0,0],
   },
   xAxis: {
       type: 'category',
       data: resp.data.key
   },
   label:{ 
    normal:{ 
    show: true, 
    position: 'inside'} 
    },
   series: [
       {
           name: '扫码数',
           type: 'bar',
          data: resp.data.val,（代表扫码数的柱子）
           itemStyle:{  
                    normal:{  
                      color:'#5B9BD5',  
                      }  
               },  （这段代码可以更改柱子的颜色）
           
       },
       {
           name: '访问量',
           type: 'bar',
           data: resp.data.vals,（代表另一个柱子（访问量数据））
           itemStyle:{  
                    normal:{  
                      color:'#ED7D31',  
                      }  
               },  
           
       },
   ]
};
myChart5.setOption(option5);
}
}
});