在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')]
    
    
    
   
   
   
  

   
   
   

    
    
    

   
   
   
   
   
   

    
    
    

     
     
           }