vue2+echarts实现图中柱状图

Question

求问 怎么用vue2+echarts实现图中柱状图的效果?求问 怎么用vue2+echarts实现图中柱状图的效果？

Answer 1

引自免费微信小程序：皆我百晓生

要使用Vue 2和ECharts实现柱状图，你需要遵循以下步骤：

1. 安装依赖：确保你已经安装了vue-echarts和echarts库。如果未安装，可以使用以下命令进行安装：

   npm install vue-echarts echarts --save
   

2. 在Vue组件中引入ECharts：在你的Vue组件中，首先需要引入ECharts组件。

   import { ECharts } from 'vue-echarts';
   

3. 配置ECharts实例：在Vue组件的data方法中定义一个chartOptions对象，用于配置ECharts图表的参数。

   data() {
     return {
       chartOptions: {
         tooltip: {},
         legend: {},
         xAxis: {
           data: []
         },
         yAxis: {},
         series: [
           {
             name: '',
             type: 'bar',
             data: []
           }
         ]
       }
     };
   },
   

4. 设置x轴和y轴数据：在mounted生命周期钩子中，或者在数据变化时，更新chartOptions中的数据。

   mounted() {
     this.chartOptions.xAxis.data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
     this.chartOptions.series[0].data = [90.8, 81, 85, 71, 63, null, null];
   },
   

5. 使用ECharts组件：在模板中，使用<e-charts>标签，并将chart-options属性绑定到chartOptions上。

   <template>
     <div>
       <e-charts :options="chartOptions"></e-charts>
     </div>
   </template>
   

6. 完整示例代码：

   <template>
     <div>
       <e-charts :options="chartOptions"></e-charts>
     </div>
   </template>
   
   <script>
   import { ECharts } from 'vue-echarts';
   
   export default {
     components: {
       ECharts
     },
     data() {
       return {
         chartOptions: {
           tooltip: {},
           legend: {},
           xAxis: {
             data: []
           },
           yAxis: {},
           series: [
             {
               name: '',
               type: 'bar',
               data: []
             }
           ]
         }
       };
     },
     mounted() {
       this.chartOptions.xAxis.data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
       this.chartOptions.yAxis.type = 'value';
       this.chartOptions.tooltip.trigger = 'axis';
       this.chartOptions.legend.show = false;
       this.chartOptions.series[0].name = '数据';
       this.chartOptions.series[0].data = [90.8, 81, 85, 71, 63, null, null];
     }
   };
   </script>
   

通过上述步骤，你可以在Vue 2项目中使用ECharts创建一个柱状图。确保调整xAxis.data和series[0].data数组以匹配你的数据。