echarts——横向柱状堆叠图

小兔崽子、

已于 2022-01-20 10:47:29 修改

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts 前端

于 2022-01-20 10:42:15 首次发布

本文链接：https://blog.csdn.net/qq_39065815/article/details/122596552

echarts 专栏收录该内容

11 篇文章

订阅专栏

1.示例图

2.echarts配置

var data = {
        data: [[320], [120], [220], [150]],
        legend: ['华为', '中兴', '烽火', '瑞斯'],
      }

      var option;

      var colors = ['#4C98FB', '#83CCE7', '#26C7C8', '#73DEBD'];


      option = {
        color: colors,
        legend: {
          top: '35%',
          left: '30%',
          data: data.legend
        },
        grid: {
          left: '15%'
        },
        xAxis: {
          type: 'value',
          show: false,
          minorSplitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['各厂商端口占比'],
          // 去除网格线
          axisLine: {
            show: false
          },
          // 去除刻度线
          axisTick: {
            show: false
          }
        },
        series: [],

      };
      for (var i = 0; i < data.data.length; i++) {
        option.series.push({
          name: data.legend[i],
          type: 'bar',
          stack: 'total',
          barWidth: '30px',
          label: {
            show: true,
          },
          emphasis: {
            focus: 'series'
          },
          data: data.data[i]
        })
      }