vue 画 echarts 柱状图

你可以使用 Vue 和 ECharts 来绘制柱状图。首先，确保你已经在项目中安装了 Vue 和 ECharts 的相关依赖。

接下来，在你的 Vue 组件中，你可以按照以下步骤来绘制柱状图：

1. 导入所需的依赖：

import echarts from 'echarts'

2. 在 `mounted` 钩子函数中创建一个 ECharts 实例，并指定需要渲染图表的 DOM 元素：

mounted() {
  this.chart = echarts.init(document.getElementById('chart-container'));
}

3. 定义数据和配置项：

data() {
  return {
    chartData: {
      // 这里放置你的数据
    },
    chartOptions: {
      // 这里放置你的echarts配置项
    }
  }
}

4. 在 `mounted` 钩子函数中更新图表数据并绘制图表：

mounted() {
  this.chart = echarts.init(document.getElementById('chart-container'));
  this.updateChart();
},
methods: {
  updateChart() {
    this.chart.setOption(this.chartOptions);
  }
}

5. 在模板中渲染图表容器：

<template>
  <div id="chart-container" style="width: 100%; height: 400px;"></div>
</template>

6. 最后，调用 `updateChart` 方法来更新图表数据并进行重新渲染。

这样，你就可以利用 Vue 和 ECharts 绘制柱状图了。记得根据你的实际需求修改数据和配置项。希望对你有帮助！