Echarts 双柱状图双层效果

echarts yekong

wanjunshijiecom 2021-10-04 at 14.57.22

    drawLine () {
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: 'rgba(17, 27, 54, 1)'
            }
          },
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          }
        },
        grid: {
          left: '20',
          right: '5%',
          bottom: '10%',
          top: '30',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['油藏1', '油藏2', '油藏3', '油藏4', '油藏5', '油藏6', '油藏7', '油藏8', '油藏9', '油藏10', '油藏11', '油藏12'],
            axisLabel: {
              textStyle: {
                color: '#078ceb',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                opacity: 0.2
              }
            },
            splitLine: {
              show: false,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 2,
            axisLabel: {
              textStyle: {
                color: 'rgba(168, 230, 243, 1)',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.06
              }
            }

          },
          {
            name: '配注',
            type: 'value',
            splitNumber: 2,
            nameTextStyle: {
              color: 'rgba(168, 230, 243, 1)',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12,
              padding: [0, 0, 0, 30]
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(168, 230, 243, 1)',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.06
              }
            }

          },
        ],
        series: [
          {
            name: '油藏',
            type: 'bar',
            stack: '1',
            data: [80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80],
            barWidth: '20%',
            barGap: '10%',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(1, 221, 237, 1)',
                fontFamily: 'DIN',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(3, 167, 240, 1)'
                }, {
                  offset: 1,
                  color: 'rgba(17, 44, 111, 1)'
                }]),
              }
            },
          },
          {
            name: '油藏2',
            type: 'bar',
            stack: '1',
            yAxisIndex: 1,
            barWidth: '20%',
            barGap: '-110%',
            z: 0,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(1, 221, 237, 1)',
                fontFamily: 'DIN',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(3, 167, 240, 0.2)'
                },
                  {
                    offset: 1,
                    color: 'rgba(17, 44, 111, 0.2)'
                  }
                ]),
              },
            },
            data: [160, 160, 160, 160, 160, 160, 160, 160, 160, 160, 160, 160, 160, 160]
          },
          {
            name: '油藏3',
            type: 'bar',
            stack: '2',
            data: [76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76],
            barWidth: '20%',
            barGap: '10%',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(237, 152, 2, 1)',
                fontFamily: 'DIN',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(238, 152, 2, 1)'
                },
                  {
                    offset: 1,
                    color: 'rgba(23, 25, 30, 1)'
                  }
                ]),
              },
            },
          },
          {
            name: '油藏4',
            type: 'bar',
            yAxisIndex: 1,
            barWidth: '20%',
            barGap: '10%',
            z: 0,
            stack: '2',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgba(237, 152, 2, 1)',
                fontFamily: 'DIN',
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(238, 152, 2, 0.2)'
                },
                  {
                    offset: 1,
                    color: 'rgba(23, 25, 30, 0.2)'
                  }
                ]),
              },
            },
            data: [140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140]
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    }
喜欢