echarts绘制电量柱状图

话不多说，直接上代码：

<template>
  <div id="modId" class="chart"></div>
</template>
  
    <script>
import * as echarts from "echarts";

export default {

  data() {
    return {};
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      var myData = ["西安", "渭南", "宝鸡"];
      var databeast = [38, 59, 62];
      let option = {
        backgroundColor: "rgba(2,58,122,0.3)",
        tooltip: {
          trigger: "axis",
          formatter: "{b0}: {c0}㎡",
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 8,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 12,
            },
          },
          data: myData,
        },
        yAxis: {
          type: "value",
          name: "单位：人次",
          axisLine: {
            show: false,
          },
          //y轴分割线
          axisTick: {
            show: false,
          },
          position: "center",
          //y轴标签
          axisLabel: {
            show: true,
            color: "rgba(255,255,255,0.5)",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.5)",
              width: 1,
              type: "dashed",
            },
          },
        },
        series: [
          // 真实数据
          {
            type: "pictorialBar",
            symbol: "rect",
            barWidth: "25px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#003190",
                  },
                  {
                    offset: 1,
                    color: "#26E1FF",
                  },
                ]),
              },
            },
            data: databeast,
          },
          {
            //辅助方格图形
            name: "辅助值",
            type: "pictorialBar",
            barWidth: "25px",
            symbol: "rect",
            symbolRepeat: "true",
            symbolMargin: "70%",
            symbolSize: ["100%", "15%"],
            symbolOffset: ["0%", "0%"],
            symbolRepeat: true,

            itemStyle: {
              normal: {
                color: "rgba(2,58,122,0.9)",
              },
            },
            data: databeast,
            z: 2,
          },
        ],
      };
      const chart = echarts.init(document.getElementById('modId'));
      // 监听窗口的 resize 事件
      window.addEventListener("resize", function () {
        chart.resize();
      });
      chart.setOption(option);
    },
  },
};
</script>
  
    <style>
.chart {
  width: 100%;
  height: 215px;
}
</style>
  

附加项：

echarts还可以根据页面缩放进行缩放

 const chart = echarts.init(document.getElementById(this.modId));
      // 监听窗口的 resize 事件
      window.addEventListener("resize", function () {
        chart.resize();
      });
      chart.setOption(option);

 效果图：