Echarts横向叠加柱形图

浅浅的花香味﹌ 2022-05-15 12:24 462阅读 0赞

带有图例的横向柱形图  
数据获取的时候每一个柱形图都要单独获取，具体代码如下：

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',
                  },
                },
              },
            ],
    }

效果图如下：  
![这里写图片描述][70]

[70]: /images/20220515/cdd4985c2735490196777f60b24be215.png