1.建好存放圖形的div

<div id="txzsTab" title="圖形展示" bodyStyle="padding:0px 10px 0px 20px;" style="padding:0px;overflow:hidden;"><div id="lineChart" class="mini-col-6 text-l" style="height: 600px;"></div><div id="lineChart2" class="mini-col-6 text-r" style="height: 600px;"></div> </div>

2.js方法

<script type="text/javascript"> <!--圖表展示--> //獲取ChartSeries數據 function getChartSeries() {var data = {};var gridData = grid.getData();var series = new Array();var series2 = new Array();var legendData = new Array();var legendData2 = new Array();legendData.push("調查數據男性人數");var serie0 = {};serie0.name = "調查數據男性人數";serie0.type = "bar";serie0.stack = "人數"; serie0.label={normal:{show: false,formatter: function (value) {return Math.abs(value.data); //將負值轉回正數}}}var serie0_data=new Array();legendData.push("調查數據女性人數");var serie1 = {};serie1.name = "調查數據女性人數";serie1.type = "bar";serie1.stack = "人數";var serie1_data=new Array();legendData2.push("年末數據男性人數");var serie2 = {};serie2.name = "年末數據男性人數";serie2.type = "bar";serie2.stack = "人數";serie2.label={normal:{show: false,formatter: function (value) {return Math.abs(value.data); //將負值轉回正數}}}var serie2_data=new Array();legendData2.push("年末數據女性人數");var serie3 = {};serie3.name = "年末數據女性人數";serie3.type = "bar";serie3.stack = "人數";var serie3_data=new Array();serie0_data.push(0);serie0_data.push(0);serie0_data.push(0);serie0_data.push(-(gridData[1].dcnanxsl+gridData[2].dcnanxsl));serie1_data.push(0);serie1_data.push(0);serie1_data.push(0);serie1_data.push(gridData[1].dcnvxsl+gridData[2].dcnvxsl);serie2_data.push(0);serie2_data.push(0);serie2_data.push(0);serie2_data.push(-(gridData[1].nmnanxsl+gridData[2].nmnanxsl));serie3_data.push(0);serie3_data.push(0);serie3_data.push(0);serie3_data.push(gridData[1].nmnvxsl+gridData[2].nmnvxsl);for(var i=3;i<gridData.length-2;i++){serie0_data.push(-(gridData[i].dcnanxsl))serie1_data.push(gridData[i].dcnvxsl);serie2_data.push(-(gridData[i].nmnanxsl));serie3_data.push(gridData[i].nmnvxsl);}//把要放到左邊的數據先變成負值serie0_data.push(-(gridData[gridData.length-2].dcnanxsl+gridData[gridData.length-1].dcnanxsl));serie1_data.push(gridData[gridData.length-2].dcnvxsl+gridData[gridData.length-1].dcnvxsl);serie2_data.push(-(gridData[gridData.length-2].nmnanxsl+gridData[gridData.length-1].nmnanxsl));serie3_data.push(gridData[gridData.length-2].nmnvxsl+gridData[gridData.length-1].nmnvxsl);serie0.data=serie0_data;series[0] = serie0;serie1.data=serie1_data;series[1] = serie1;serie2.data=serie2_data;series2[0] = serie2;serie3.data=serie3_data;series2[1] = serie3;data.series = series;data.series2 = series2;data.legendData = legendData;data.legendData2 = legendData2;return data; }//切換tab tabs.on('activechanged',function (e) {if (e.index == 1) {if(grid.getTotalCount()>1){setEcharts(getChartSeries());setEcharts2(getChartSeries());}else{mini.showTips({content: "請先進行統計，再查看圖表展示",state: "warning",x: "center",y: "center",timeout: 3000});return;}} })//調查數據 function setEcharts(obj) {if (obj !=null || obj !=''){// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('lineChart'));myChart.clear();option = {toolbox: {show: true,feature: {saveAsImage: {show:true,excludeComponents :['toolbox'],pixelRatio: 2}}},tooltip : {trigger: 'axis',axisPointer : { // 坐標軸指示器，坐標軸觸發有效type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'}, formatter:function(params){ // 改鼠標懸浮提示值格式var relVal = params[0].name+"<br/>";relVal += params[0].seriesName+ ' : ' + (-params[0].value) +"<br/>";relVal += params[1].seriesName+ ' : ' +params[1].value+"<br/>";return relVal;}},legend: {data:obj.legendData},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type : 'value',// min:-80, //自定義設置x軸最小值// max:80, //自定義設置x軸最大值// splitNumber:8, //自定義設置x軸值間隔數量axisLabel:{formatter:function(value) {return Math.abs(value); //負數取絕對值變正數}}}],yAxis : [{type : 'category',data : ['0 to 4','5 to 9','10 to 14','15 to 19','20 to 24','25 to 29','30 to 34','35 t0 39','40 to 44','45 to 49','50 to 54','55 to 59','60 to 64','65 to 69','70 to 74','75 to 79','80 and over ']}],series : obj.series};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);} }//年末數據 function setEcharts2(obj) {if (obj !=null || obj !=''){// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('lineChart2'));myChart.clear();option = {toolbox: {show: true,feature: {saveAsImage: {show:true,excludeComponents :['toolbox'],pixelRatio: 2}}},tooltip : {trigger: 'axis',axisPointer : { // 坐標軸指示器，坐標軸觸發有效type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'}, formatter:function(params){ // 改鼠標懸浮提示值格式var relVal = params[0].name+"<br/>";relVal += params[0].seriesName+ ' : ' + (-params[0].value) +"<br/>";relVal += params[1].seriesName+ ' : ' +params[1].value+"<br/>";return relVal;}},legend: {data:obj.legendData2},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type : 'value',// min:-80, //自定義設置x軸最小值// max:80, //自定義設置x軸最大值// splitNumber:8, //自定義設置x軸值間隔數量 axisLabel:{formatter:function(value) {return Math.abs(value); //負數取絕對值變正數}}}],yAxis : [{type : 'category',data : ['0 to 4','5 to 9','10 to 14','15 to 19','20 to 24','25 to 29','30 to 34','35 t0 39','40 to 44','45 to 49','50 to 54','55 to 59','60 to 64','65 to 69','70 to 74','75 to 79','80 and over ']}],series : obj.series2};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);} }</script>

總結

以上是生活随笔為你收集整理的用echarts做如图,x轴左右都是正数的倒立柱形图展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。