vue安装echarts失败使用cdn引用

vue安装echarts失败使用cdn引用echarts.js

正常状态安装echarts

安装

npm install echarts -S
或
先安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
再安装
cnpm install echarts -S

使用

按需引入

需要使用到title、legend等组件 都要引入
// 引入基本模板
let echarts = require(‘echarts/lib/echarts’)
// 引入柱状图组件
require(‘echarts/lib/chart/bar’)
// 引入提示框和title组件
require(‘echarts/lib/component/tooltip’)
require(‘echarts/lib/component/title’)
require(‘echarts/lib/component/legend’);
var gauge = require(“echarts/lib/chart/gauge”);

有个小坑：
我的需求是每个柱状颜色不一样
因此我是这么写的：

series: [
{
data: this.dataNumber,
name:‘已上线’,
type: ‘bar’,
barWidth: 50,
left: 10,
itemStyle: {
normal: {
color: (params) => { //我原本color:function(params)这么写的 但报错还是怎么的
　//首先定义一个数组
var colorList = this.colorBack;
return colorList[params.dataIndex]
},
　　　　　//以下为是否显示
label: {
show: false
}
}
}
}
]

全局引入

import echarts from ‘echarts’
Vue.prototype.$echarts = echarts

**

安装报错

**
后来换台电脑安装echarts 失败 报错
后直接放入echarts文件直node_modules 打包 报错
最后来个直接方式引入cdn文件

1、在index.html引入js

2、在webpack.base.config.js添加

externals: {
echarts: ‘echarts’
}

3、在需要用到echarts的vue文件中

import echarts from ‘echarts’