vue中使用echarts横向柱状图

在Vue中使用Echarts绘制横向柱状图，你可以按照以下步骤进行操作：

1. 首先，在Vue组件中导入Echarts库，并在data属性中定义横坐标和数据：

import * as echarts from "echarts";

export default {
  data() {
    return {
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // 横坐标
      yData: [23, 24, 18, 25, 27, 28, 25], // 数据
      myChartStyle: {
        float: "left",
        width: "100%",
        height: "400px"
      } // 图表样式
    }
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 创建柱状图实例
      const myChart = echarts.init(document.getElementById("mychart"));

      // 定义配置项
      const option = {
        xAxis: {
          type: "value" // 使用数值轴
        },
        yAxis: {
          type: "category", // 使用类目轴
          data: this.xData // 设置横坐标数据
        },
        series: [
          {
            type: "bar",
            data: this.yData // 设置数据
          }
        ]
      };

      // 设置配置项
      myChart.setOption(option);

      // 监听窗口大小变化，自适应图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};

2. 在模板中使用id为"mychart"的div元素来容纳图表：

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

至此，你已经在Vue中成功绘制了横向柱状图。