在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 必须把路径写全。
