Echarts柱状图实现背景色

echarts yekong 362℃
showBackground: true,
            backgroundStyle: {
              color: '#324F6A',
              borderColor: '#324F6A',
              borderWidth: 3
            },

Echarts柱状图实现背景色

drawLine() {
      var that = this;
      window.addEventListener("resize", this.drawLine);
      let myChart = this.$echarts.init(this.$refs.echarts);
      var option = {
        color: [
          "rgba(0, 204, 255, 1)",
          "rgba(39, 120, 255, 1)",
          "rgba(72, 176, 255, 1)",
          "rgba(91, 207, 255, 1)",
          "rgba(108, 227, 255, 1)",
          "rgba(119, 240, 240, 1)",
        ],
        grid: {
          left: "5%",
          right: "3%",
          top: "12%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          x: 'right',
          y: 'top',
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: 'rgba(168, 230, 243, 1)'
          },
          itemGap: 20,
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        xAxis: [
          {
            data: [
              "10.01",
              "10.02",
              "10.03",
              "10.04",
              "10.05"
            ],
            axisLine: {
              lineStyle: {
                color: "rgba(88, 118, 143, 1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              fontSize: 12,
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(88, 118, 143, 1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 13,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(88, 118, 143, 1)",
              },
            },
            yAxisIndex: 0,
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 4,
            tooltip: {show: false},
            zlevel: 2,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: 'rgba(57, 253, 192, 1)',
              },
            },
            showBackground: true,
            backgroundStyle: {
              color: '#324F6A',
              borderColor: '#324F6A',
              borderWidth: 3
            },
            label: {
              normal: {
                show: false,
                fontSize: 18,
                fontWeight: "bold",
                color: "#ffffff",
                position: "top",
              },
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "库存量",
            type: "bar",
            barWidth: 8,
            zlevel: 2,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: 'rgba(57, 253, 192, 1)',
              },
            },
            showBackground: true,
            backgroundStyle: {
              color: '#324F6A',
              borderColor: '#324F6A',
              borderWidth: 3
            },
            label: {
              normal: {
                show: false,
                fontSize: 18,
                fontWeight: "bold",
                color: "#ffffff",
                position: "top",
              },
            },
            data: [60, 79, 90, 13, 60, 80, 80, 60, 79, 90, 13, 60, 80],
          },
          {
            name: "转移量",
            type: "bar",
            barWidth: 8,
            zlevel: 2,
            yAxisIndex: 0,
            showBackground: true,
            backgroundStyle: {
              color: '#324F6A',
              borderColor: '#324F6A',
              borderWidth: 3
            },
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: 'rgba(0, 204, 255, 1)',
              },
            },
            label: {
              normal: {
                show: false,
                fontSize: 18,
                fontWeight: "bold",
                color: "#ffffff",
                position: "top",
              },
            },
            data: [60, 79, 90, 13, 60, 80, 80, 60, 79, 90, 13, 60, 80],
          },
          {
            name: "产生量",
            type: "bar",
            barWidth: 8,
            zlevel: 2,
            showBackground: true,
            backgroundStyle: {
              color: '#324F6A',
              borderColor: '#324F6A',
              borderWidth: 3
            },
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: 'rgba(255, 158, 52, 1)'
              },
            },
            label: {
              normal: {
                show: false,
                fontSize: 18,
                fontWeight: "bold",
                color: "#ffffff",
                position: "top",
              },
            },
            data: [60, 79, 90, 13, 60, 80, 80, 60, 79, 90, 13, 60, 80],
          },
          {
            name: "",
            type: "bar",
            barWidth: 4,
            zlevel: 2,
            tooltip: {show: false},
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: 'rgba(4, 31, 59, 1)',
              },
            },
            showBackground: true,
            backgroundStyle: {
              color: '#324F6A',
              borderColor: '#324F6A',
              borderWidth: 3
            },
            label: {
              normal: {
                show: false,
                fontSize: 18,
                fontWeight: "bold",
                color: "#ffffff",
                position: "top",
              },
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
      };
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
喜欢 (0)