echarts多列柱狀圖求合計，並且展示在最頂端

阿新 • • 發佈：2019-02-13

// 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); //定義圖表option var option = { tooltip : { axisPointer : { type : 'shadow' } }, title: { text:'xxx啟用裝置數'

, left:'left' , top:'10px', textStyle: { color: '#666', fontWeight: 'normal' } }, toolbox: { feature: { dataView: {show: true

, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, grid: { y: '10%', y2: '10%'

}, legend: { data:['安卓','諾基亞','蘋果'] }, xAxis:{ type: 'category', axisLabel:{ interval: 0, // {number} rotate: 40 }, data: ['星期三','星期四'] }, yAxis:{ type: 'value', min: 0, interval: 10000 }, series: [ { name:'安卓', type:'bar', stack:'xxx', itemStyle: { normal: { color: '#548dd5' } }, data: [["星期三",10000],["星期四",20000]] }, { name:'諾基亞', type:'bar', stack:'xxx', itemStyle: { normal: { color: '#000' } }, data: [["星期三",11000],["星期四",21000]] }, { name:'蘋果', type:'bar', stack:'xxx', itemStyle: { normal: { color: '#e56c0a' } }, data: [["星期三",12000],["星期四",18000]] }, { name:'合計', type:'bar', stack:'xxx', label: { normal: { show: true, position: 'top', textStyle: { color: '#000' }, formatter:'' } }, data: [["星期三",0],["星期四",0]] //思路一：給series集合末尾多加一欄用於展示合計，但是值都是0；缺點：必須根據xAxis的data生成一組為空的資料，且tooltip不能加trigger: 'axis',這個條件，不然會展示合計：0 } ] }; var series = option["series"]; var fun = function (params) { var data3 =0; for(var i=0,l=series.length;i<l;i++){ data3 += series[i].data[params.dataIndex][1] } return data3 } //載入頁面時候替換最後一個series的formatter series[series.length-1]["label"]["normal"]["formatter"] = fun // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); //legend點選事件，根據傳過來的obj.selected得到狀態是true的legend對應的series的下標，再去計算總和 myChart.on("legendselectchanged", function(obj) { var b = obj.selected , d = []; //alert(JSON.stringify(b)) for(var key in b){ if(b[key]){ //alert(key) for(var i=0,l=series.length;i<l;i++){ var changename = series[i]["name"]; if(changename == key){ d.push(i);//得到狀態是true的legend對應的series的下標 } } } } var fun1 = function (params) { var data3 =0; for(var i=0,l=d.length;i<l;i++){ for(var j=0,h=series.length;j<h;j++){ if(d[i] == j){ data3 += series[j].data[params.dataIndex][1] //重新計算總和 } } } return data3 } series[series.length-1]["label"]["normal"]["formatter"] = fun1 myChart.setOption(option); })

echarts多列柱狀圖求合計，並且展示在最頂端

echarts多列柱狀圖求合計，並且展示在最頂端

echarts生成餅狀圖、柱狀圖、多項柱狀圖的引數介紹

用ECharts畫多柱子柱狀圖（可點選）

echarts故障統計多維柱狀圖堆疊柱狀圖柱狀圖Demo2

echarts故障統計柱狀圖

Echarts之Bar[柱狀圖]

利用Echarts實現堆疊柱狀圖

Echarts簡單折線/柱狀圖混合例項

Echarts(二、柱狀圖（各引數詳細描述）)

echarts 外掛開發柱狀圖、折線圖、餅狀圖（具有詳細的註釋）

Echarts之動態柱狀圖

用echarts實現一個柱狀圖（前後臺原始碼）

Echarts繪製橫向柱狀圖(圓角+漸變)

ASP.NET+JQuery+.Ashx實現+百度Echarts 實現動態柱狀圖資料圖形報表的統計

echarts如何給柱狀圖設定漸變色

Echarts中堆疊柱狀圖之百分比顯示

【前端統計圖】echarts多條折線圖和橫柱狀圖實現

echarts多條折線圖和柱狀圖實現

echarts柱狀圖自適應寬高多圖表

echarts柱狀圖多組資料配置

echarts多列柱狀圖求合計，並且展示在最頂端

相關推薦