vue中使用echarts

最新推荐文章于 2026-04-04 01:05:10 发布

原创最新推荐文章于 2026-04-04 01:05:10 发布 · 2.1k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echart4.X

vue 同时被 2 个专栏收录

42 篇文章

订阅专栏

Echarts

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中引入Echarts 4.x版本，并详细阐述了如何更换Echarts的默认主题为深色主题。首先在package.json中添加echarts依赖，然后在main.js中全局注册Echarts。接着，在组件中创建指定大小的div，并在created或mounted钩子中初始化图表。当需要改变主题时，可以从JSON文件导入自定义的深色主题，并使用Echarts的registerTheme方法注册。最后，通过init方法创建图表实例并设置深色主题的option。

下面是echats4.x版本的引入

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

"echarts": "^4.2.1",
cnpm install echarts@4.2.1 --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设置
})