1. 程式人生 > >[echarts] 同指標對比柱狀圖

[echarts] 同指標對比柱狀圖

ctype http mst example 通過率 ole .data mark ict

需求:對比課程通過率最高的8個課程和最低的8個課程以及全校的平均通過率

技術分享圖片

http://echarts.baidu.com/echarts2/doc/example/bar1.html

option = {
    title : {
        text: ‘學院課程獲得學分率對比統計‘,
        subtext: ‘綠色柱:通過率由高到低;藍色柱:本學院課程平均獲得學分率;紅色柱:掛科率由高到低‘
    },
    tooltip : {
        trigger: ‘axis‘
    },
    legend: {
        data:[
‘獲得學分率‘] }, toolbox: { show : true, feature : { mark : {show: false}, dataView : {show: false, readOnly: false}, magicType : {show: false, type: [‘line‘, ‘bar‘]}, restore : {show: false}, saveAsImage : {show:
false} } }, calculable : true, xAxis : [ { type : ‘category‘, axisLabel: { interval: 0, rotate: 40 }, data : [‘高數1‘,‘高數2‘,‘高數3‘,‘高數4‘,‘高數5‘,‘高數6‘,‘高數7‘,‘高數8‘,‘...‘,‘全部課程‘,‘...‘,‘大學英語1‘,‘大學英語2‘,‘大學英語3‘,‘大學英語4‘,‘大學英語5‘,‘大學英語6‘,‘大學英語7‘,‘大學英語8‘] } ], yAxis : [ { type :
‘value‘, axisLabel : { formatter: ‘{value} %‘ } } ], series : [ { name:‘獲得學分率‘, type:‘bar‘, barWidth:30, itemStyle: { normal: { color: function(params) { console.log(params); // build a color map as your need. var colorList = [ ‘#9BCA63‘, ‘#9BCA63‘, ‘#9BCA63‘, ‘#9BCA63‘, ‘#9BCA63‘, ‘#9BCA63‘,‘#9BCA63‘, ‘#9BCA63‘, ‘#27727B‘,‘#27727B‘,‘#27727B‘, ‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘,‘#C1232B‘ ]; return colorList[params.dataIndex] } } }, data:[100, 100, 100, 100,100,100,100,100,0,95.4,0, 58.5, 48.2,58.5, 48.2, 38.7, 24.8, 16.0, 5.3] } ] };

[echarts] 同指標對比柱狀圖