1. 程式人生 > >echart柱形圖-一條柱子顯示多個數據

echart柱形圖-一條柱子顯示多個數據

personCountOption = {
    backgroundColor:'#fff',
tooltip: {
        trigger: 'item',
axisPointer: { // 座標軸指示器,座標軸觸發有效
type: 'shadow' // 預設為直線,可選為:'line' | 'shadow'
},
padding: 10,
formatter: function(params) {
            return params.name + '</br>' + '總&emsp;數:' + params.value + '</br>' 
+ '待處理:' + params.data.cost + '<br/>' + '已授權:' + params.data.early + '<br/>' + '已拒絕:' + params.data.index + '<br/>' + '回收授權:' + params.data.cur } }, xAxis : [ { type : 'category', axisLine:{ show:false, lineStyle:{ color:'#DDDDDD'
, width:0 } }, splitLine:{ show:false }, axisTick:{ show:false }, axisLabel:{ show:false, textStyle:{ color:'#999' } }, data: function () { var list = []; for(var i = 1;i<=12;i++){ list.push
(i+'月份'); } return list; }() } ], yAxis : [ { type : 'value', axisLine:{ show:false, lineStyle:{ color:'#DDDDDD', width:1 } }, splitLine:{ show:false }, axisLabel:{ show:false, textStyle:{ color:'#999' } } } ], grid: { x: 45, x2: 15, y: 25, y2: 15, backgroundColor:'#fff', borderWidth: 0 }, series: [{ name: '指標', type: 'bar', // barWidth: 20, itemStyle:{ normal:{ barBorderRadius: 5, color: function(params) { var colorList = [ //柱子顏色 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001' ]; return colorList[params.dataIndex] } }, emphasis:{ barBorderRadius: 5 } }, data: [{ value: 20, cost: 4, early: 6, index: 2, cur:1 }, { value: 15, cost: 4, early: 6, index: 2, cur:1 }, { value: 18, cost: 4, early: 6, index: 2, cur:1 }, { value: 10, cost: 4, early: 6, index: 2, cur:1 },{ value: 13, cost: 4, early: 6, index: 2, cur:0 },{ value: 13, cost: 4, early: 6, index: 2, cur:0 },{ value: 14, cost: 4, early: 6, index: 2, cur:0 },{ value: 13, cost: 4, early: 6, index: 2, cur:0 },{ value: 16, cost: 4, early: 6, index: 2, cur:0 },{ value: 25, cost: 4, early: 6, index: 2, cur:0 },{ value: 21, cost: 4, early: 6, index: 2, cur:0 },{ value: 14, cost: 4, early: 6, index: 2, cur:0 } ] }] };
附圖: