1. 程式人生 > >Echarts橫向疊加柱形圖

Echarts橫向疊加柱形圖

帶有圖例的橫向柱形圖
資料獲取的時候每一個柱形圖都要單獨獲取,具體程式碼如下:


option ={
    tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: [{
          orient: 'horizontal',
          bottom: '17%',
          left: '10%',
          right: '5%',
          itemGap: 1.5
, itemWidth: 18, itemHeight: 10, align: 'auto', textStyle: { color: '#fff', fontSize: 8, }, // tslint:disable-next-line:max-line-length data: ['新能源汽車零部件配件製造佔比(%)', '發電機及發電機製造佔比(%)', '新能源汽車整車製造佔比(%)', '新能源汽車儲能裝置製造佔比(%)'
, '新能源汽車電動機制造佔比(%)', '供能裝置製造佔比(%)', '試驗裝置製造佔比(%)'], }, { bottom: '17%', left: '25%', right: '5%', width: 'auto', itemGap: 3, align: 'left', textStyle: { color: '#fff', fontSize: 8, }, }, ], grid: { // width:'70%',
height: '55%', left: '3%', top: '0', bottom: '30%', containLabel: true, }, color: '#fff', xAxis: { min: 0, max: 100, type: 'value', axisLabel: { color: '#fff', }, splitLine: { show: false, }, }, yAxis: { type: 'category', data: countryName, axisLabel: { color: '#fff', }, }, series: [ { name: '新能源汽車零部件配件製造佔比(%)', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight', }, }, data: Data1, itemStyle: { normal: { color: '#10ecea', }, }, }, { name: '新能源汽車整車製造佔比(%)', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight', }, }, data: Data3, itemStyle: { normal: { color: '#ff0825', }, }, }, { name: '發電機及發電機製造佔比(%)', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight', }, }, data: Data2, itemStyle: { normal: { color: '#d3d534', }, }, }, { name: '新能源汽車儲能裝置製造佔比(%)', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight', }, }, data: Data4, itemStyle: { normal: { color: '#0ff299', }, }, }, { name: '新能源汽車電動機制造佔比(%)', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight', }, }, data: Data5, itemStyle: { normal: { color: '#fc6b32', }, }, }, { name: '供能裝置製造佔比(%)', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight', }, }, data: Data6, itemStyle: { normal: { color: '#84e693', }, }, }, { name: '試驗裝置製造佔比(%)', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'insideRight', }, }, data: Data7, itemStyle: { normal: { color: '#cea965', }, }, }, ], }

效果圖如下:
這裡寫圖片描述