echarts实现柱状重叠展示（背景是浅白色壮壮图，数据采用其他柱状图展示）

最新推荐文章于 2024-05-30 23:16:00 发布

不想上班只想要钱

最新推荐文章于 2024-05-30 23:16:00 发布

阅读量862

点赞数

分类专栏：前端 Java Web css 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Aa12364567/article/details/133983883

版权

前端同时被 3 个专栏收录

152 篇文章 3 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

Java Web

43 篇文章 2 订阅

订阅专栏

重点

 {
            name: '',
            type: 'bar',
            barWidth: 30,
            z: "-1",
            barGap: '-100%',  
            itemStyle: {
              color: 'rgba(255,255,255,0.1)'
            },
            data: [100, 100, 100, 100, 100, 100]
          },

 initProgressChart() {
      this.progressChart = echarts.init(document.getElementById('progressChart'))
      var option = {
        yAxis: {
          type: 'category',
          data: ['待处理  ', '处理中  ', '已处理  '],
          axisLine: {       //x轴显示
            "show": true,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },

          //坐标轴颜色
          axisLine: {
            lineStyle: {
              color: 'rgba(186,231,255,0.4)',
              width: 2
            }
          },
        },
        xAxis: {
          name: '',
          type: 'value',
          // interval: 50,
          min: 0, // 配置 Y 轴刻度最小值
          // max: 300,  // 配置 Y 轴刻度最大值
          showMax: false,
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: 'rgba(230,247,255,0.5)', //  字体颜色
            fontSize: 12, //  字体大小
            fontWeight: '400',
            //关键代码
            padding: [0, 0, -20, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: true,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(230,247,255,0.2)'],
              width: 1,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false,
          },
          axisLabel: {
            showMaxLabel: true,
            color: "rgba(230,247,255,0.5)", //刻度线标签颜色
            fontSize: 14,
            formatter: function (value) {
              if (value / 2 % 10 === 0) {
                return value;
              } else {
                return ''
              }
            }
          },

        },
        grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
          left: '10px',
          right: '15px',
          bottom: '0%',
          top: '10px',
          containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
        },
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 30,
            z: "-1",
            barGap: '-100%',
            itemStyle: {
              color: 'rgba(255,255,255,0.1)'
            },
            data: [100, 100, 100, 100, 100, 100]
          },
          {
            data: this.seriesData,
            type: 'bar',
            barWidth: 30,
            name: '生物种数',
            smooth: true,
            symbolSize: 0,
            label: {  //在柱状图上显示数据
              show: true,
              position: 'inside',
              color: '#fff',
              fontWeight: 500,
              fontSize: 14,
              formatter: '{c0}' + '%'
            },
            itemStyle: {  // 柱状图渐变
              color: {
                type: 'linear',
                x: 1,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 0,  //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#1A96F9' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#4CECFF' // 100% 处的颜色
                  }
                ]
              },

            },
          },
        ]
      };
      this.progressChart.setOption(option);
    }