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

效果图如下:
这里写图片描述

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值