1.饼图
html代码：
<div id="SexDistri" style="width: 100%;height: 50%;"></div>
下面的柱状图的html代码也与此类似。
js代码：
var SexDistribution = ${SexDistribution};//console.log(SexDistribution);var res =[];var totalcount=0;for(var i=0;i<SexDistribution.length;i++){//设置饼图的时候可直接定义一个新的数组，将值分别存放到name和value中 这样可以直接使用这个新数组给饼图赋值var obj ={name:SexDistribution[i].sex,value:SexDistribution[i].number};res.push(obj);totalcount+=SexDistribution[i].number; //得到饼图各个部分的总数}var myChart1 =echarts.init(document.getElementById('SexDistri')); //加载echarts参数的另一种方式myChart1.setOption({title : {text: '性别分布图',x:'right',textStyle: {color: '#000000',fontSize:18}},//图例组件legend: {data:['男','女'], //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 namey: 'bottom', //图例的y位置 此处为底部textStyle: {fontSize: 14,fontWeight: 'bolder',color: '#000000'// 主标题文字颜色}},tooltip : {trigger: 'item',formatter: "{b}用户：{c0}</br>总人数："+totalcount+" </br>百分比：{d}%" //提示框浮层内容格式器，支持字符串模板和回调函数两种形式},color:['#4f81bd','#c0504d'], series : [{type: 'pie', //饼图center: ['50%', '50%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。data:res,textStyle:{fontSize:20},itemStyle: { //图形样式emphasis: {shadowBlur: 10, //图形阴影的模糊大小。该属性配合 shadowColor,//shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。shadowOffsetX: 0,//阴影水平方向上的偏移距离。shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色}}}] });
SexDistribution 是我从后台传递过来的json数组。该数组的内容大致如下：
在处理该数据的时候，我新创建一个对象，将原先sex的值放进name 中，number放进value中，最后再push到数组，echarts会根据name和value的属性名，自动从data中取数据。
2.柱状图
js代码：
var TreatMethods = ${TreatMethods};console.log(TreatMethods);var xdata=[]; //存放x轴 分组名的数组var ydata=[]; //存放y轴 数据的数组var jjj=TreatMethods[0];for(var key in jjj){//alert(key+':'+jjj[key]);xdata.push(key); //遍历循环jjj 分别得到所有的key和所有的value存放进对应的x轴和y轴数组ydata.push(jjj[key]);}var chart = document.getElementById('TreatMethods'); var echart = echarts.init(chart); //将生成的图标放进id为 TreatMethods的div中//设置参数var option = {//标题title : {text: '治疗方式统计',x:'center', //标题的位置 还有left right等textStyle: {color: '#000000',fontSize:18}},//tip层提示框组件tooltip : { trigger: 'axis', //触发类型 坐标轴触发axisPointer : { type : 'shadow' //坐标轴指示项 即鼠标放到对应的横坐标上方时会出现的效果 有阴影 直线 十字准星多种} },//x轴配置xAxis : [ { min:0, //坐标轴刻度最小值 可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。type : 'category', //坐标轴类型 为'category'型时必须配置data属性data:xdata} ], //y轴配置yAxis : [ { min:0, type : 'value',name:'(人)' //坐标轴名称 可通过nameLocation配置坐标轴名称位置} ], //参数配置series : [{name:'人数', //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列type:'bar', //柱状图barWidth: 30, //宽度data:ydata,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#03adff'}, {offset: 1, color: '#7052f5'} //与emphasis一起实现柱状图渐变效果]),label: { show: true, position: 'top', formatter: '{c}'} //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等},emphasis: { //图形样式color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#7052f5'},{offset: 1, color: '#03adff'}])}}}]}; echart.setOption(option);
在实现这个效果的时候，麻烦的地方就是获取所有的x轴数据及其对应的y轴数据。比较简单的办法就是事先我们知道x轴有哪些列，将这些列写死到一个数组中：
var xdata=[肾移植,肾透,腹透+肾移植,药物治疗,血透,血透+肾移植,血透+腹透,血透+腹透+肾移植];
然后再通过名字取其对应的参数：
TreatMethods[0].肾透
这种方法看起来就比较low，如何在不知道后台所传递的参数的情况下，直接生成柱状图呢？后来在网上查了一些资料，发现js中通过for循环就直接可以遍历js对象中的key和value。
var jjj=TreatMethods[0];for(var key in jjj){//alert(key+':'+jjj[key]);xdata.push(key); //遍历循环jjj 分别得到所有的key和所有的value存放进对应的x轴和y轴数组ydata.push(jjj[key]);}
3.多项柱状图
js代码：
var SexAgeDistribution = ${SexAgeDistribution};//console.log(SexAgeDistribution);/* for(var key in ((SexAgeDistribution[0].sex)[0])){alert(key+':'+((SexAgeDistribution[0].sex)[0])[key]);} */var columLabel = ['男','女']; var columName = []; var malecount=[];var femalecount=[]; for(var k=0;k<SexAgeDistribution.length;k++){columName.push(SexAgeDistribution[k].name);malecount.push((SexAgeDistribution[k].sex)[0].男);femalecount.push((SexAgeDistribution[k].sex)[0].女);}var chart = document.getElementById('SexAgeDistri'); var echart = echarts.init(chart); var option = {title : {text: '性别-年龄分布图',x:'right',textStyle: {color: '#000000',fontSize:18}},tooltip : { trigger: 'axis', axisPointer : { type : 'shadow'} }, color:['#4f81bd','#c0504d'], legend: { data:columLabel, //此处将图例放进数组中y: 'bottom'}, xAxis : [ { min:0, type : 'category', data : columName } ], yAxis : [ { min:0, type : 'value',name:'用户数'} ], series : [//此处设置了两项 每项中又分别对应一个名字和data 构成了多项柱状图{name:'男',type:'bar',data:malecount},{name:'女',type:'bar',data:femalecount}]}; echart.setOption(option);
在echarts中常遇到一个让我困惑的地方就是formatter属性了，这个属性常常是在tooltip属性中出现，即提示框的格式设置的问题。
formatter: "{b}用户：{c0}</br>总人数："+totalcount+" </br>百分比：{d}%"
刚开始会很疑惑abcd这些字母到底是如何使用的。官网的api上有很好的的解释：
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
1、折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
2、散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
3、地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
4、饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
最后再附上一份地图的echarts参数设置：
js代码:
var myChart5 = echarts.init(document.getElementById('map'));myChart5.setOption({title: {textStyle: {fontSize: 14,fontWeight: 'bolder',color: '#ffffff'// 主标题文字颜色}},series: [{type: 'map',map: 'china',zoom:1.2,label: {normal: {show: true,//显示省份标签textStyle:{color:"#ffffff",fontSize:12,fontFamily: 'UnidreamLED'} //省份标签字体颜色}, emphasis: {//对应的鼠标悬浮效果show: true,textStyle:{color:"#051421"}}},layoutCenter: ['50%', '50%'],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域//layoutSize:430,}]});window.onresize = myChart5.resize;$.get('web?module=stwmgr&action=Data&method=showMapData&tokenId=<%=request.getParameter("tokenId")%>').done(function(data) {var obj = eval('(' + data + ')');console.log(obj);myChart5.setOption({tooltip : {trigger : 'item'},series : [ {name : '使用用户数',type : 'map',mapType : 'china',roam : false,data : obj,itemStyle : {normal : {label: { show: true, position: 'top', formatter: function(a){//console.log(a);if(a.value==0){return " ";}return a.value;}},borderWidth : 1,//区域边框宽度borderColor : '#1fa7eb',//区域边框颜色areaColor : "#051421",//区域颜色},emphasis : {borderWidth : .5,borderColor : '#4b0082',areaColor : " #6495ED",}},} ],});});
地图中的formatter就是一种通过回调函数设置格式的方法，这样就可以在地图上将为0的数据不显示，样式看起来比较美观。
