1. 程式人生 > 實用技巧 >echarts象形柱狀圖分別設定不同顏色(字型以及柱狀)

echarts象形柱狀圖分別設定不同顏色(字型以及柱狀)

var maxData = 5000;

option = {
    xAxis: {
        max: maxData,
        splitLine: {show: false},
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            show:false
        },
    },
    yAxis: {
        data: ['貨車', '牽引車', '掛車'],
        inverse: true
, axisTick: {show: false}, axisLine: {show: false}, axisLabel: { margin: 10, color: '#000', fontSize: 16 }, }, grid: { top: 'center', height: 200, left: '10%', right: "20%" }, series: [{ type:
'pictorialBar', // symbol: spirit, symbolRepeat: 'fixed', symbolMargin: '50%', symbolClip: true, symbolSize: 30, itemStyle: { normal: { color: function(params) { var colorList = ['#E0852F','#E20F5F', '#42D4CB'];
return colorList[params.dataIndex] } } }, data: [891,1500, 4000] }, { type: 'pictorialBar', itemStyle: { normal: {opacity: 0.2}, }, label: { show: true, formatter: function (params) { return params.value + ''; }, position: 'right', offset: [10, 0], color: '#999', fontSize: 18 }, animationDuration: 0, symbolRepeat: 'fixed', symbolMargin: '50%', // symbol: spirit, symbolSize: 30, symbolBoundingData: maxData, data: [{ value: 891, label: { show: true, formatter: function (params) { return params.value + ''; }, position: 'right', offset: [10, 0], color: '#E0852F', fontSize: 18 }, }, { value: 1500, label: { show: true, formatter: function (params) { return params.value + ''; }, position: 'right', offset: [10, 0], color: '#E20F5F', fontSize: 18 }, }, { value: 4000, label: { show: true, formatter: function (params) { return params.value + ''; }, position: 'right', offset: [10, 0], color: '#42D4CB', fontSize: 18 }, }], }] };
View Code