vue-cli搭建的项目中使用vue-echarts-v3

前端数据可视化工具：ECharts

vue-echarts-v3

一、安装

cnpm install echarts --save-dev

cnpm install vue-echarts-v3 --save-dev

二、用法

1、用 vue-cli 搭建的项目，打开 build 文件夹中的 webpack.base.conf.js 文件，进行配置：

webpack 1.x配置如下：

      {
        test: /\.js$/,
        loader: 'babel',
        include: [
-          path.join(prjRoot, 'src')
+          path.join(prjRoot, 'src'),
+          path.join(prjRoot, 'node_modules/vue-echarts-v3/src')
        ],
-        exclude: /node_modules/
+        exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
      },

webpack 2.x+配置如下：

      {
        test: /\.js$/,
        loader: 'babel-loader',
 -      include: [resolve('src'), resolve('test')]
 +      include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
      },

2、最简单的使用方法就是，在要用到的JS中，导入所有图表和组件：

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js';
  export default {
    components: { IEcharts }
  }
</script>

例子：

<template>
  <div class="echarts">
    <IEcharts :option="bar"></IEcharts>
  </div>
</template>
 
<script>
  import IEcharts from 'vue-echarts-v3/src/full.js';
  export default {
    name: 'pieCharts',
    components: { IEcharts },
    data () {
      return {
        bar: {
          title: {
            text: '来源分布图',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}个 ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['北京','上海','广州','深圳','郑州']
          },
          series: [
            {
              name: '来源',
              type: 'pie',
              radius: '72%',
              center: ['50%', '50%'],
              data: [
                  {value:335, name:'北京'},
                  {value:310, name:'上海'},
                  {value:234, name:'广州'},
                  {value:135, name:'深圳'},
                  {value:148, name:'郑州'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(30, 144, 255，0.5)'
                }
              },
              label: {
                normal: {
                  position: 'inner',
                  formatter: '{c}'
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              }
            }
          ],
          color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E']
        }
      }
    },
    methods: {

    }
  };
</script>
 
<style scoped>
  .echarts {
    width: 400px;
    height: 400px;
  }
</style>

3、按需导入需要的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'; //以饼图为例