Echarts柱状图 盖帽效果

echarts yekong

Echarts柱状图 盖帽效果

drawLine() {
      var that = this;
      window.addEventListener("resize", this.drawLine);
      let myChart = this.$echarts.init(this.$refs.echarts);
      var data = [600, 790, 900, 130, 600, 800, 800, 600, 790, 790, 600, 790, 790]
      var data2 = []
      data.forEach((type) => {
        data2.push(type * 1.03)
      });
      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)",
          "rgba(129, 163, 243, 1)",
          "rgba(243, 170, 104, 1)",
          "rgba(245, 232, 140, 1)",
          "rgba(162, 143, 218, 1)",
          "rgba(162, 238, 250, 1)",
          "rgba(38, 116, 255, 1)",
          "rgba(73, 177, 255, 1)",
        ],
        grid: {
          left: "40",
          right: "40",
          top: "5%",
          bottom: "15%",
          containLabel: true,
        },
        tooltip: {
          show: true,
        },

        "dataZoom": [{
          "show": true,
          "height": 12,
          "xAxisIndex": [
            0, 1
          ],
          bottom: '8%',
          "start": 10,
          "end": 90,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: "rgba(0, 204, 255, 0.9)",
          },
          textStyle: {
            color: "#fff"
          },
          borderColor: "rgba(41, 83, 132, 0.9)"
        }, {
          "type": "inside",
          "show": true,
          "height": 15,
          "start": 1,
          "end": 35
        }],
        xAxis: [
          {
            data: [
              "HW01",
              "HW01",
              "HW02",
              "HW03",
              "HW04",
              "HW05",
              "HW06",
              "HW07",
              "HW08",
              "HW09",
              "HW10",
              "HW11",
              "HW12",
            ],
            axisLine: {
              lineStyle: {
                color: "rgba(88, 118, 143, 1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "rgba(150, 175, 220, 1)",
              fontSize: FontChart(12),
            },
          },
          {
            data: [
              "HW01",
              "HW01",
              "HW02",
              "HW03",
              "HW04",
              "HW05",
              "HW06",
              "HW07",
              "HW08",
              "HW09",
              "HW10",
              "HW11",
              "HW12",
            ],
            axisLine: {
              show: false,
              lineStyle: {
                color: "#3d5269",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            nameTextStyle: {
              color: "rgba(150, 175, 220, 1)",
              fontSize: FontChart(13),
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(88, 118, 143, 1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: FontChart(13),
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(88, 118, 143, 1)",
              },
            },
            yAxisIndex: 0,
          },
        ],
        series: [
          {
            name: "设备统计",
            type: "bar",
            barWidth: 10,
            zlevel: 2,
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 204, 255, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 204, 255, 0.1)",
                    },
                  ],
                  false
                ),
              },
            },
            label: {
              normal: {
                show: false,
                fontSize: FontChart(18),
                fontWeight: "bold",
                color: "#ffffff",
                position: "top",
              },
            },
            data: data,
          },
          {
            type: "bar",
            barWidth: 16,
            zlevel: 1,
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(24, 143, 180, 1)",
                    }, {
                    offset: 0.3,
                    color: "rgba(24, 143, 180, 0.2)",
                  },
                    {
                      offset: 1,
                      color: "rgba(24, 143, 180, 0.1)",
                    },
                  ],
                  false
                ),
              },
            },
            label: {
              normal: {
                show: false,
                fontSize: 18,
                fontWeight: "bold",
                color: "#ffffff",
                position: "top",
              },
            },
            data: data2,
          },
        ],
      };
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
喜欢