在项目开发中，我们往往会有将数据可视化展现的功能，于是学会echarts的使用就成为了一件刻不容缓的事情。在echarts官网的实例中，可以大概知道echarts有两种方法实现图表，首先是通过ajax和后台实现jsonarray以及jsonobject等类型的传输，具体传输格式需要参考ehcarts中的示例代码，另外一种方法则是生成.json文件，通过在前端用$.get获取文件中的json数据。其实两种方法内在的实现都基本一样，都是前端得到json数据的过程。所以这里就主要讲讲第一种方法的前后台具体实现。
一、首先举一个最简单的例子—— 一个简单的饼状图【链接】。
这里面有两组数据：
1、第一个为
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']可以知道在jsonarray中放了五个字符串，在后台用一个jsonarray拿到这五个字符串就可以直接搞定。效果如下2、第二个为
data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ]是在一个jsonarray放了五个jsonobject。在jsonarray分别add五个已经加了不同的value和name属性的jsonobject，即可实现，效果如下。
具体实现传值需要用ajax，实现如下（我们返回了一个jsonarray，第一个存的是第一组数据，第二个存的是第二组数据）
<div id="main" style="width: 700px;height:400px;"></div><%--<td >设置当前显示图表的模块，id应init中一致</td>--%> <script type="text/javascript"> //数据纯属虚构 var myChart = echarts.init(document.getElementById('main')); $.ajax({ type : "post", async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） url : "Servlet3", //请求发送到相应的servlet dataType : "json", //返回数据形式为json success : function(data) { //请求成功时执行该函数内容，result即为服务器返回的json对象 if (data) { option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', data:data[0] //返回的jsonarray中的第一组数据 }, series: [ { name :'访问来源', type :'pie', radius : ['50%', '70%'], avoidLabelOverlap: false, label : { normal : { show : false, position : 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data:data[1] } ] };} }, error : function(errorMsg) { //没做出错处理 //请求失败时执行该函数 alert("图表请求数据失败!"); } }) </script> 二、然后是一个比较常用的的例子—— 一个比较基础的地图【链接】。 这个里面需要一组data如下 var data = [{ name: '北京', value: 5.3 }, { name: '天津', value: 3.8 }, { name: '上海', value: 4.6 }, { name: '重庆', value: 3.6 }, { name: '河北', value: 3.4 }, { name: '河南', value: 3.2 }, { name: '云南', value: 1.6 }, { name: '辽宁', value: 4.3 }, { name: '黑龙江', value: 4.1 }, { name: '湖南', value: 2.4 }, { name: '安徽', value: 3.3 }, { name: '山东', value: 3.0 }, { name: '新疆', value: 1 }, { name: '江苏', value: 3.9 }, { name: '浙江', value: 3.5 }, { name: '江西', value: 2.0 }, { name: '湖北', value: 2.1 }, { name: '广西', value: 3.0 }, { name: '甘肃', value: 1.2 }, { name: '山西', value: 3.2 }, { name: '内蒙古', value: 3.5 }, { name: '陕西', value: 2.5 }, { name: '吉林', value: 4.5 }, { name: '福建', value: 2.8 }, { name: '贵州', value: 1.8 }, { name: '广东', value: 3.7 }, { name: '青海', value: 0.6 }, { name: '西藏', value: 0.4 }, { name: '四川', value: 3.3 }, { name: '宁夏', value: 0.8 }, { name: '海南', value: 1.9 }, { name: '台湾', value: 0.1 }, { name: '香港', value: 0.1 }, { name: '澳门', value: 0.1 } ];可以看出传来的数据为一个jsonarray中嵌套了多个jsonobject。在这个例子中不用把所有的地名写出来，只用写有变化的那几个就ok，其他地区的数据默认为零，最终前端代码如下：
<div class="info_head"> <h4>对外投资分布图</h4> <div id="main1" style="width: 700px;height:400px;"></div> </div> </div> <script type="text/javascript"> //数据纯属虚构 var myChart = echarts.init(document.getElementById('main1')); //数据纯属虚构 $.ajax({ type : "post", async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） url : "Servlet3", //请求发送到相应的servlet dataType : "json", //返回数据形式为json success : function(data) { //请求成功时执行该函数内容，result即为服务器返回的json对象 if (data) { // alert(data); var yData = []; data.sort(function(o1, o2) { if (isNaN(o1.value) || o1.value == null) return -1; if (isNaN(o2.value) || o2.value == null) return 1; return o1.value - o2.value; }); for (var i = 0; i < data.length; i++) { yData.push(data[i].name); } var option = { title: { text: '', textStyle: { fontSize: 30 }, x: 'center' }, tooltip: { show: true, formatter: function(params) { return params.name + '：' + params.data['value'] + '%' }, }, visualMap: { type: 'continuous', text: ['', ''], showLabel: true, seriesIndex: [0], min: 0, max: 7, inRange: { color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ] }, textStyle: { color: '#000' }, bottom: 30, left: 'left', }, grid: { right: 10, top: 80, bottom: 30, width: '20%' }, xAxis: { type: 'value', scale: true, position: 'top', splitNumber: 1, boundaryGap: false, splitLine: { show: false }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { margin: 2, textStyle: { color: '#aaa' } } }, yAxis: { type: 'category', nameGap: 16, axisLine: { show: false, lineStyle: { color: '#ddd' } }, axisTick: { show: false, lineStyle: { color: '#ddd' } }, axisLabel: { interval: 0, textStyle: { color: '#999' } }, data: yData }, geo: { roam: true, map: 'china', left: 'left', right:'300', layoutSize: '80%', label: { emphasis: { show: false } }, itemStyle: { emphasis: { areaColor: '#fff464' } }, regions: [{ name: '南海诸岛', value: 0, itemStyle: { normal: { opacity: 0, label: { show: false } } } }], }, series: [{ name: 'mapSer', type: 'map', roam: false, geoIndex: 0, label: { show: false, }, data: data }, { name: 'barSer', type: 'bar', roam: false, visualMap: false, zlevel: 2, barMaxWidth: 20, itemStyle: { normal: { color: '#40a9ed' }, emphasis: { color: "#3596c0" } }, label: { normal: { show: false, position: 'right', offset: [0, 10] }, emphasis: { show: true, position: 'right', offset: [10, 0] } }, data: data }] }; myChart.setOption(option); // myChart1.showLoading(); } }, error : function(errorMsg) { //没做出错处理 //请求失败时执行该函数 alert("图表请求数据失败!"); myChart2.hideLoading(); } })ydata部分为右边栏的部分，在这里用了 yData.push(data[i].name);将传过来的省份名字传到ydata项。提示：
1、在echarts网站上可以实时改代码，可以自己修改代码中的一些参数（颜色、形状、大小等等）来达到自己想要的效果。
2、在使用echarts需要导入它的js到项目中比较常用的例如：
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>具体见官方文档：点击打开链接
3、在js中创建实例时（echarts.init）一定要避免容器id重复，不然重复的话图就不会出来。
注：（之后还会补充其他类型echart的使用方法，其实最好学习的方法还是看官方文档，本文也是基于官方文档给出自己的具体运用）
