vue2.0项目中引入echarts

在vue-cli搭建的项目中该如何引入echarts图表呢？

1.首先npm安装echarts

npm install echarts --S
或者使用国内的淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts --S

如果运行程序报错卸载并降低Echarts版本(首先看一下package.json里echarts里安装的版本，我遇到的情况是5.1的版本，图总是不出来，首先卸载npm uninstall echarts，然后安装低级版本echarts：npm install echarts@4.9.0 --save)

2.全局引入

在Vue-cli构建的项目中找到main.js文件，然后全局引入echarts // 引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

页面应用

<div style="width:30%;height:10%" ref="chart"></div>

js部分：

<script>
  export default {
   mounted() {
      this.initCharts();
   },
     methods: {
        initCharts() {
              let myChart = this.$echarts.init(this.$refs.chart);
              myChart.setOption({
                title: {
                  text: "目标文件类型图",
                  left: "center",
                },
                tooltip: {
                  trigger: "item",
                },
                legend: {
                  orient: "vertical",
                  left: "left",
                },
                series: [
                  {
                    name: "访问来源",
                    type: "pie",
                    radius: "50%",
                    data: [
                      {
                        value: 1048,
                        name: "军事目标",
                        itemStyle: {
                          color: "#ee6666",
                        },
                      },
                      {
                        value: 735,
                        name: "工业目标",
                        itemStyle: {
                          color: "#91cc75",
                        },
                      },
                      {
                        value: 580,
                        name: "交通目标",
                        itemStyle: {
                          color: "#fac858",
                        },
                      },
                      {
                        value: 484,
                        name: "城市目标",
                        itemStyle: {
                          color: "#2455a4",
                        },
                      },
                      {
                        value: 300,
                        name: "其它",
                        itemStyle: {
                          color: "#73c0de",
                        },
                      },
                    ],
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                      },
                    },
                  },
                ],
            });
         },
     }  
  }
</script>

注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

3. 局部引用

上面全局引入会将所有的echarts图表打包，导致体积过大，所以可以局部引入，就是 根据单个页面的需要在自己的页面里引入使用。这样就不需要在main.js文件里引入文件了。在需要的图表的文件里引入。

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/pie')
// 引入饼图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
注意：这里之所以使用 require 而不是 import，是因为 require 可以直接node_modules 中查找，而 import 必须把路径写全。