vue2+element-ui+封装echarts图表

使用Vue2和element-ui封装echarts图表可以帮助我们更好地集成和使用echarts库。下面是一个简单的步骤指南：

1. 首先，我们需要安装vue和element-ui依赖：

   npm install vue element-ui

2. 接下来，我们需要安装echarts的依赖：

   npm install echarts

3. 创建一个Vue组件来封装echarts图表。可以使用下面的代码作为模板：

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

   <script>
   import echarts from 'echarts';

   export default {
     data() {
       return {
         chart: null,
       };
     },
     mounted() {
       this.chart = echarts.init(this.$refs.chart);
       this.renderChart();
     },
     methods: {
       renderChart() {
         // 在这里编写echarts图表的配置和数据
         // 例如：
         const option = {
           // echarts配置
         };
         this.chart.setOption(option);
       },
     },
   };
   </script>

4. 在需要使用图表的地方，引入刚才创建的Vue组件：

   <template>
     <div>
       <chart-component></chart-component>
     </div>
   </template>

   <script>
   import ChartComponent from './ChartComponent.vue';

   export default {
     components: {
       ChartComponent,
     },
   };
   </script>

这样，我们就可以在Vue组件中轻松地使用和封装echarts图表。可以通过修改`renderChart`方法中的echarts配置来自定义图表的样式和数据。同时，element-ui的样式和组件可以与echarts图表无缝地集成在一起。