echarts柱状图vue代码

ECharts 是一个强大的数据可视化库，用于创建交互式图表。在 Vue 中使用 ECharts 来创建柱状图的步骤如下：

1. 首先，你需要安装 ECharts 和 Vue 的兼容版本。在你的 Vue 项目中，可以通过 npm 或 yarn 安装 ECharts：

   npm install echarts vue-echarts
   # 或者
   yarn add echarts vue-echarts

2. 在你的组件中导入 ECharts 和 Vue-ECharts 插件：

   import ECharts from 'echarts';
   import { EChartsCore } from 'vue-echarts/core';
   import 'echarts/theme/macarons'; // 选择你喜欢的主题

3. 注册 Vue-ECharts 插件：

   Vue.use(EChartsCore, {
     options: {
       theme: 'macarons', // 设置主题
     },
   });

4. 使用模板或 JSX 语法创建柱状图实例，并绑定数据到图表：

   <template>
     <div id="chart" style="height: 400px;"></div>
   </template>

   <script>
   export default {
     data() {
       return {
         chartData: [
           { name: 'Series 1', value: 30 },
           { name: 'Series 2', value: 40 },
           { name: 'Series 3', value: 50 },
         ],
       };
     },
     mounted() {
       this.renderChart();
     },
     methods: {
       renderChart() {
         const myChart = this.$echarts.init(document.getElementById('chart'));
         const option = {
           title: {
             text: '柱状图示例',
           },
           xAxis: {
             data: this.chartData.map(item => item.name),
           },
           yAxis: {},
           series: [
             {
               type: 'bar',
               data: this.chartData.map(item => item.value),
             },
           ],
         };
         myChart.setOption(option);
       },
     },
   };
   </script>

在这个例子中，`chartData` 是一个数组，包含了每个系列名称和对应的值。`renderChart` 方法在组件挂载后初始化图表并设置选项。