Vue-ECharts
ECharts 的 Vue.js 组件。
基于 ECharts v4.1.0
+ 开发,依赖 Vue.js v2.2.6
+。
安装
npm(推荐方式)
$ npm install echarts vue-echarts
CDN
在 HTML 文件按如下方式依次引入 echarts
和 vue-echarts
:
使用方法
用 npm 与 Vue Loader 基于 ES Module 引入(推荐用法)
import Vue from 'vue'
import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue
// 手动引入 ECharts 各模块来减小打包体积
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
// 如果需要配合 ECharts 扩展使用,只需要直接引入扩展包即可
// 以 ECharts-GL 为例:
// 需要安装依赖:npm install --save echarts-gl,并添加如下引用
import 'echarts-gl'
// 注册组件后即可使用
Vue.component('v-chart', ECharts)
⚠️ 注意事项
引入源码版本
Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本,如果你正在使用官方的 Vue CLI 来创建项目,可能会遇到默认配置把 node_modules
中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置:
当使用 Vue CLI 3+ 时,需要在 vue.config.js
中的 transpileDependencies
增加 vue-echarts
及 resize-detector
,如下:
// vue.config.js
module.exports = {
transpileDependencies: [
'vue-echarts',
'resize-detector'
]
}
当使用 Vue CLI 2 的 webpack
模板时,需要按下述的方式修改 build/webpack.base.conf.js
:
{
test: /\.js$/,
loader: 'babel-loader',
- include: [resolve('src'), resolve('test')]
+ include: [
+ resolve('src'),
+ resolve('test'),
+ resolve('node_modules/vue-echarts'),
+ resolve('node_modules/resize-detector')
+ ]
}
如果你正直接配置使用 webpack,那么也请做类似的修改使其能够正常工作。
在 Nuxt.js 中使用
在 Nuxt.js 的服务端中使用 Vue-ECharts 时,可能没有正常转译。这是因为 Nuxt.js 默认会将 node_modules
目录下的绝大多数文件被排除在服务端打包代码以外。需要手动将 vue-echarts
加入白名单。
对于 Nuxt.js v2 项目,按如下方式修改 nuxt.config.js
:
module.exports = {
build: {
transpile: ['vue-echarts', 'resize-detector']
}
}
对于 Nuxt.js v1 项目,按如下方式修改 nuxt.config.js
:
// 别忘了运行
// npm i --save-dev webpack-node-externals
const nodeExternals = require('webpack-node-externals')
module.exports = {
// ...
build: {
extend (config, { isServer }) {
// ...
if (isServer) {
config.externals = [
nodeExternals({
// `whitelist` 选项的默认值是
// [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i]
whitelist: [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i, /^vue-echarts/]
})
]
}
}
}
}
AMD
require.config({
paths: {
'vue': 'path/to/vue',
'echarts': 'path/to/echarts',
'vue-echarts': 'path/to/vue-ehcarts'
}
})
require(['vue', 'vue-echarts'], function (Vue, ECharts) {
// 注册组件后即可使用
Vue.component('v-chart', ECharts)
})
全局变量
在没有使用任何模块系统的情况下,组件将通过 window.VueECharts
变量暴露接口:
// 注册组件后即可使用
Vue.component('v-chart', VueECharts)
调用组件
查看这里了解更多例子。
Props (均为响应式)
-
initOptions
用来初始化 ECharts 实例。
-
theme
当前 ECharts 实例使用的主题。
-
options
ECharts 实例的数据。修改这个 prop 会触发 ECharts 实例的
setOption
方法。如果直接修改
options
绑定的数据而对象引用保持不变,setOption
方法调用时将带有参数notMerge: false
。否则,如果为options
绑定一个新的对象,setOption
方法调用时则将带有参数notMerge: true
。例如,如果有如下模板:
那么:
this.data = newObject // setOption(this.options, true) this.data.title.text = 'Trends' // setOption(this.options, false)
-
group
实例的分组,会自动绑定到 ECharts 组件的同名属性上。
-
autoresize
(默认值:false
)这个 prop 用来指定 ECharts 实例在组件根元素尺寸变化时是否需要自动进行重绘。
-
manual-update
(默认值:false
)在性能敏感(数据量很大)的场景下,我们最好对于
options
prop 绕过 Vue 的响应式系统。当将manual-update
prop 指定为true
且不传入options
prop 时,数据将不会被监听。然后,你需要用ref
获取组件实例以后手动调用mergeOptions
方法来更新图表。
计算属性
-
width
[只读]用来获取 ECharts 实例的当前宽度。
-
height
[只读]用来获取 ECharts 实例的当前高度。
-
computedOptions
[只读]用来读取 ECharts 更新内部
options
后的实际数据。
方法
-
mergeOptions
(底层调用了 ECharts 实例的setOption
方法)提供了一个更贴切的名称来描述
setOption
方法的实际行为。 appendData
resize
dispatchAction
showLoading
hideLoading
convertToPixel
convertFromPixel
containPixel
getDataURL
getConnectedDataURL
clear
dispose
静态方法
connect
disconnect
registerMap
registerTheme
graphic.clipPointsByRect
graphic.clipRectByRect
事件
Vue-ECharts 支持如下事件:
legendselectchanged
legendselected
legendunselected
legendscroll
datazoom
datarangeselected
timelinechanged
timelineplaychanged
restore
dataviewchanged
magictypechanged
geoselectchanged
geoselected
geounselected
pieselectchanged
pieselected
pieunselected
mapselectchanged
mapselected
mapunselected
axisareaselected
focusnodeadjacency
unfocusnodeadjacency
brush
brushselected
rendered
finished
-
鼠标事件
click
dblclick
mouseover
mouseout
mousemove
mousedown
mouseup
globalout
contextmenu
更多详细信息请参考 ECharts 的 API 文档。
本地开发
$ npm i
$ npm run dev
打开 http://localhost:8080/demo
来查看 demo。