在vue中使用vue-echarts-v3

特征

• 轻量，高效，按需绑定事件
• 支持按需导入ECharts.js图表​​和组件
• 支持组件调整大小事件自动更新视图

一、安装

npm install --save echarts vue-echarts-v3
 

二、用法

用 vue-cli 搭建的项目，打开 build 文件夹中的 webpack.base.conf.js 文件

1、webpack 1.x 修改成如下

 

   

    

   
   

    

         {
    
   

   

    

   
   

    
        
     test: /\.js$/,
    
   

   

    

   
   

    

             loader: 
     'babel',
    
   

   

    

   
   

    

             include: [
    
   

   

    

   
   

    

                path.
     join(prjRoot, 
     'src'),
    
   

   

    

   
   

    

                path.
     join(prjRoot, 
     'node_modules/vue-echarts-v3/src')
    
   

   

    

   
   

    

             ],
    
   

   

    

   
   

    

              exclude: /
     node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
    
   

   

    

   
   

    

           },
    
   
 

2、webpack 2.x 修改成如下

 

   

    

   
   

    

       {
    
   

   

    

   
   

    
        
     test: /\.js$/,
    
   

   

    

   
   

    

             loader: 
     'babel-loader',
    
   

   

    

   
   

    

             include: [
     resolve(
     'src'), 
     resolve(
     'test'), 
     resolve(
     'node_modules/vue-echarts-v3/src')]
    
   

   

    

   
   

    

           }
    
   
 

3、导入所有图表和组件

import IEcharts from 'vue-echarts-v3/src/full.js';
 

4、手动导入ECharts.js模块以减少捆绑包大小

 

   

    

   
   

    

     import IEcharts 
     from 
     'vue-echarts-v3/src/lite.js';
    
   

   

    

   
   

    
 
    
   

   

    

   
   

    

     import 
     'echarts/lib/component/title'; 
     //引入标题组件
    
   

   

    

   
   

    

     import 
     'echarts/lib/component/legend'; 
     //引入图例组件
    
   

   

    

   
   

    

     import 
     'echarts/lib/component/tooltip'; 
     //引入提示框组件
    
   

   

    

   
   

    

     import 
     'echarts/lib/component/toolbox'; 
     //引入工具箱组件
    
   

   

    

   
   

    

     // ...(引入自己需要的)
    
   

   

    

   
   

    

     import 
     'echarts/lib/chart/pie'; 
     //以饼图为例
    
   
 

三、例子

关于Echarts的API使用参照 Echarts官网

• 从接口获取的动态数据可以直接通过props从父组件传过来，替换下面的series[0].data数组中的数据
• 也可以从这个组件中从接口获取动态数据。但option属性对应的变量pie必须写在computed中return出来,不能再写在data中，否则获取不到数据

 

   

    

   
   

    

     <template>
    
   

   

    

   
   

    
  
     <div class="echarts">
    
   

   

    

   
   

    
    
     <IEcharts :option="pie" @ready="onReady" @click="onClick">
     </IEcharts>
    
   

   

    

   
   

    
  
     </div>
    
   

   

    

   
   

    

     </template>
    
   

   

    

   
   

    

     <script>
     
    
   

   

    

   
   

    

     import IEcharts 
     from 
     'vue-echarts-v3/src/lite.js';
    
   

   

    

   
   

    

     import 
     'echarts/lib/component/title'; 
     //引入标题组件
    
   

   

    

   
   

    

     import 
     'echarts/lib/component/legend'; 
     //引入图例组件
    
   

   

    

   
   

    

     import 
     'echarts/lib/chart/pie';
    
   

   

    

   
   

    
  
     export 
     default {
    
   

   

    

   
   

    
    
     components: {IEcharts},
    
   

   

    

   
   

    
    
     data: 
     () => ({
    
   

   

    

   
   

    
      
     pie: {
    
   

   

    

   
   

    
        
     title: {
    
   

   

    

   
   

    
          
     text: 
     'ECharts Demo'
    
   

   

    

   
   

    

             },
    
   

   

    

   
   

    
        
     tooltip: {},
    
   

   

    

   
   

    
        
     legend:{
    
   

   

    

   
   

    
          
     type: 
     'plain',
    
   

   

    

   
   

    
          
     orient: 
     'vertical',
    
   

   

    

   
   

    
          
     right: 
     10,
    
   

   

    

   
   

    
          
     top: 
     20,
    
   

   

    

   
   

    

             },
    
   

   

    

   
   

    
        
     series: [{
    
   

   

    

   
   

    
          
     type: 
     'pie',
    
   

   

    

   
   

    
          
     data: [
    
   

   

    

   
   

    

                 {
     name: 
     'A', 
     value: 
     1211},
    
   

   

    

   
   

    

                 {
     name: 
     'B', 
     value: 
     2323},
    
   

   

    

   
   

    

                 {
     name: 
     'C', 
     value: 
     1919}
    
   

   

    

   
   

    

               ]
    
   

   

    

   
   

    

             }]
    
   

   

    

   
   

    

           }
    
   

   

    

   
   

    

         }),
    
   

   

    

   
   

    
    
     methods: {
    
   

   

    

   
   

    

           onReady(instance) {
    
   

   

    

   
   

    
        
     console.log(instance);
    
   

   

    

   
   

    

           },
    
   

   

    

   
   

    

           onClick(event, instance, echarts) {
    
   

   

    

   
   

    
        
     console.log(
     arguments);
    
   

   

    

   
   

    

           }
    
   

   

    

   
   

    

         }
    
   

   

    

   
   

    

       };
    
   

   

    

   
   

    

     </script>
    
   

   

    

   
   

    

     <style scoped>
     
    
   

   

    

   
   

    
  
     .echarts{
    
   

   

    

   
   

    
    
     width: 
     400px;
    
   

   

    

   
   

    
    
     height: 
     400px;
    
   

   

    

   
   

    
    
     margin: auto;
    
   

   

    

   
   

    
    
     text-align: center;
    
   

   

    

   
   

    

       }
    
   

   

    

   
   

    

     </style>