vue中使用echarts

下面是echats4.x版本的引入

1.package.json中加上下面代码,然后cnpm i 更新加入的echats4.x的包

"echarts": "^4.2.1",
cnpm install [email protected] --save 

2.main.js中加入下面代码,并挂载到vue上

Vue.prototype.$echarts = echarts

3.写一个div,固定宽高,methods中添加方法,在create或者mounted中调用

4.参照下面代码使用,setOption中复制官网实例就行了

2021/8/27日 —>更新
项目中需要更换主题,echarts默认浅色主题,然而项目中需要更换为深色主题(纯黑主题)
例:

//1.引入深色主题(echarts官网自己设置,导出后为json文件)
import dark from '@/assets/json/dark'
//2.使用主题
//script部分
let obj = dark
this.$echarts.registerTheme('dark', obj)
//通过ref获取到相关dom节点
let dom = this.$refs.echarts1
//设置主题
let myChart = this.$echarts.init(dom, dark)
myChart.setOption({
 // 相关echarts设置
})