vue-echarts 柱状图

要实现vue-echarts柱状图，你可以按照以下步骤进行操作：

1. 首先，你需要引入Echarts库。可以通过在代码中引入`import * as echarts from "echarts";`来实现引入。

2. 接下来，在vue组件的`<template>`标签中添加一个`<div>`元素作为图表容器，并为其设置一个唯一的id属性，例如`id="mychart"`。

3. 在vue组件的`<script>`标签中，定义一个data属性，用于存储横坐标和数据。例如，你可以使用`xData`存储横坐标数组，使用`yData`存储数据数组。

4. 在mounted生命周期钩子函数中，调用`initEcharts`方法来初始化图表。

5. 在methods中定义`initEcharts`方法，用于初始化图表。你可以使用`echarts.init`方法来创建一个echarts实例，并传入图表容器的id。然后，通过调用`setOption`方法来设置图表的配置项和数据。

6. 如果你想让图表能够根据屏幕大小自适应，你可以在`window`对象上添加一个`resize`事件监听器，并在事件处理程序中调用`resize`方法。

7. 如果你需要展示多列数据，你可以在series中添加多个对象，每个对象表示一列数据。你可以为每列数据设置相应的type和data。

下面是一个示例代码，演示了如何在vue中实现一个简单的柱状图：

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

<script>
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 option = {
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: this.yData
          }
        ]
      };

      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

这样，你就可以在vue中实现一个简单的柱状图，并且可以根据需要展示多列数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue使用Echarts画柱状图](https://blog.csdn.net/xcbzsy/article/details/126890618)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]