vue2实现柱状图

在vue2中需画一个长这样的柱状图应该如何实现

mounted() {
    this.init()
    // 监听窗口大小变化，在窗口大小变化时调用 resizeChart 方法
    window.addEventListener('resize', this.resizeChart);
},
beforeDestroy() {
    // 组件销毁前，移除窗口大小变化的监听器
    window.removeEventListener('resize', this.resizeChart);
}
methods: {
    init() {
        if (!this.echart) {
        this.myEchart = echarts.init(this.$refs['myEchart']);
      }
      const chartData = {
        xAxisData: ['南山', '福田', '罗湖', '布沙', '盐田'],
        seriesData: [
          { name: '已巡查工单数', data: [100, 80, 120, 90, 110] },
          { name: '未巡查工单数', data: [40, 60, 30, 70, 50] }
        ]
      };
      const option = {
        // 颜色配置
        color: ['#6ecacc', '#fe8b8b'],
        // 提示框
        tooltip: {
          trigger: 'axis', // 坐标轴触发
          // 坐标轴指示器配置项
          axisPointer: {
            type: 'shadow' // 阴影指示器
          }
        },
        // 图例
        legend: {
          data: ['已巡查工单数', '未巡查工单数']
        },
        // x 轴
        xAxis: {
          type: 'category',
          data: chartData.xAxisData,
          // 坐标轴轴线相关设置
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc' // x 轴线条颜色为 #ccc
            }
          },
          // 坐标轴刻度相关设置
          axisTick: {
            show: false
          },
        },
        // y轴
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: (value) => {
              return value === 100 ? '%' : value + ' %'; // 在 y 轴标签上显示百分比符号
            }
          },
          interval: 30, // 自定义刻度间隔
          min: 0, // y 轴刻度最小值
          max: 100, // y 轴刻度最大值
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc' // x 轴线条颜色为 #ccc
            }
          },
          // 坐标轴刻度相关设置
          axisTick: {
            show: false
          },
          // 坐标轴在 grid 区域中的分隔区域
          splitLine: {
            show: false // 隐藏 y 轴分隔线
          },
        },
        series: chartData.seriesData.map((item) => ({
          name: item.name,
          type: 'bar',
          data: item.data,
          barWidth: '15', // 调整柱子的宽度，可以是具体数值或百分比
          itemStyle: {
            // 柱子顶部带弧度效果
            barBorderRadius: [5, 5, 0, 0]
          }
        }))
      };
      this.myEchart.setOption(option);
    },
    resizeChart() {
      // 当窗口大小变化时，调用 ECharts 实例的 resize() 方法
      this.myEchart && this.myEchart.resize();
    }
}