echarts-柱状图-圆柱

效果图：

 

 

 <div style="width: 462px; height: 230px" id="teachingRightTop"></div>

 

// 自适应字体大小
    WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 1920;
      return fontSize * res;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("teachingRightTop")
      );

      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "18%",
          right: "2%",
          left: "10%",
          bottom: "15%",
        },
        xAxis: [
          {
            type: "category",
            data: [
              "服装学院",
              "艺术与设计" + "\n" + "学院",
              "国际教育学院",
              "法政学院",
              "史量才新闻与" + "\n" + "传播学院",
            ],
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLabel: {
              margin: 10,
              color: " rgba(255, 255, 255, 0.6)",
              textStyle: {
                fontSize: this.WidthAdaptive(10),
              },
            },
          },
        ],
        yAxis: [
          {
            name: "单位:%",
            max: 100,
            min: 0,
            nameTextStyle: {
              color: " rgba(255, 255, 255, 0.6)",
              fontSize: this.WidthAdaptive(12),
              padding: 12,
            },
            axisLabel: {
              formatter: "{value}",
              color: " rgba(255, 255, 255, 0.6)",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(112,112,112,0.5)",
              },
            },
          },
        ],
        series: [
          {
            data: [80, 70, 90, 71, 85, 92],
            type: "bar",
            barWidth: this.WidthAdaptive(14),
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(64, 200, 169, 0.8)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(64, 200, 169, 0)", // 100% 处的颜色
                  },
                ],
              },
              borderColor: "#40C8A9",
              borderType: "solid",
              barBorderRadius: [15, 15, 0, 0],
            },
          },
        ],
      };
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption(option);
    },