【Echarts】Echarts2.0动态加载柱状图~

来源：互联网发布：全民突击刷钻石软件编辑：程序博客网时间：2024/05/22 00:43

Echarts在数据可视化方面广泛使用，记录一个使用Echarts动态加载折线图和柱状图的例子。方便以后使用。

与上一篇不同的是，本例子将整个chart放在AJAX的success中加载，而不是只将series[]数据部分加载。

【Echarts】2.0官方API：http://echarts.baidu.com/echarts2/doc/example.html

【Echarts】3.0官方API：http://echarts.baidu.com

js代码：

// 经济发展主要指标配置项function getEconomicsEcharts() {$.ajax({type : 'GET',async : false,url : location.protocol + "/bonc_kmioc_ind/fullscreenOverview/getEconomicsEcharts",data : {year : "2015"},success : function(result) {var myChart = echarts.init(document.getElementById('industryAddedChart'));var data = result.dataArr;var xAxisArr = result.xAxisArr;var legendArr = result.legendArr;// 经济发展主要指标配置项var industryAddedOption = {grid : {show : true,top : 28,right : 20,borderColor : 'transparent'},legend : {right : 50,data : [ '2010年', '2015年' ],color : '#fff',icon : 'bar',itemWidth : 10,itemHeight : 10,textStyle : {color : '#fff',weight : 'bold'}},calculable : true,xAxis : [ {axisLabel : {interval : 0,rotate : 37,textStyle : {color : '#fff',// weight: 'bold',fontSize : 12}},axisLine : { // 轴线show: true,lineStyle : {//轴线颜色样式color : "#fff",type : 'solid',width : 1}},axisTick : {show : false,},type : 'category',data : xAxisArr} ],yAxis : [ {axisLabel : {textStyle : {color : '#fff',// weight: 'bold',fontSize : 12}},axisLine : { // 轴线show: true,lineStyle : {//轴线颜色样式color : "#fff",type : 'solid',width : 1}},left : '5%',splitLine : {show : false},type : 'value',splitArea : {show : true,areaStyle : {color : [ '#131e2b', 'transparent' ]}},name : '(亿元)',nameLocation : 'end',nameTextStyle : {color : '#fff',// weight: 'bold',fontSize : 12,fontFamily : 'MicrosoftYaHei'},} ],series : [{name : '2010年',type : 'bar',data : data[1],itemStyle : {normal : {color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset : 0,color : '#2ECBB8'}, {offset : 1,color : '#0C5C67'} ])},},barWidth : 20,label : {normal : {show : true,position : 'top',textStyle : {color : '#fff',fontSize : 12,fontFamily : 'MicrosoftYaHei'}},},},{barGap : '22%',name : '2015年',type : 'bar',data : data[0],barWidth : 22,itemStyle : {normal : {color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset : 0,color : '#C43144'}, {offset : 1,color : '#413577'} ])},},label : {normal : {show : true,position : 'top',textStyle : {color : '#fff',fontSize : 12,fontFamily : 'MicrosoftYaHei'}},},}]};myChart.setOption(industryAddedOption);}});}

service层方法：

/** * 获取经济指标统计图数据 *  * @param statisticalYear * @return */@Overridepublic Map<String, Object> getEconomicsEcharts(String statisticalYear) {Map<String, Object> data = new HashMap<String, Object>();List<EconomicsNorm> list = economicsNormDao.fingEconomicsInfo(statisticalYear);if (list != null && list.size() != 0) {int countTimes = getCountTimes(list.size());String[] xAxisArray = new String[countTimes];String[] legendArr = new String[] { "2010", "2015" };String[] firstArr = new String[countTimes];for (int i = 0; i < countTimes; i++) {xAxisArray[i] = list.get(list.size() - countTimes + i).getNormName();firstArr[i] = list.get(list.size() - countTimes + i).getNormValue();}data.put("xAxisArr", xAxisArray);data.put("dataArr", firstArr);data.put("legendArr", legendArr);} else {data.put("xAxisArr", new String[0]);data.put("dataArr", new Double[0][0]);data.put("legendArr", new String[0]);}return data;}

结果：

0 0