Vue-ECharts基本使用及Demo
Vue-ECharts基于 ECharts v4.1.0+ 开发，依赖 Vue.js v2.2.6+。
安装
$ npm install echarts vue-echarts使用方法
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，那么也请做类似的修改使其能够正常工作。
全局变量
在没有使用任何模块系统的情况下，组件将通过 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-updateprop 指定为 true 且不传入 options prop 时，数据将不会被监听。然后，你需要用 ref 获取组件实例以后手动调用 mergeOptions 方法来更新图表。
计算属性
width[只读]
用来获取 ECharts 实例的当前宽度。
height[只读]
用来获取 ECharts 实例的当前高度。
computedOptions[只读]
用来读取 ECharts 更新内部 options 后的实际数据。
方法
mergeOptions（底层调用了 ECharts 实例的setOption方法）
提供了一个更贴切的名称来描述 setOption 方法的实际行为。
appendDataresizedispatchActionshowLoadinghideLoadingconvertToPixelconvertFromPixelcontainPixelgetDataURLgetConnectedDataURLcleardispose
静态方法
connectdisconnectregisterMapregisterThemegraphic.clipPointsByRectgraphic.clipRectByRect
事件
Vue-ECharts 支持如下事件：
legendselectchangedlegendselectedlegendunselectedlegendscrolldatazoomdatarangeselectedtimelinechangedtimelineplaychangedrestoredataviewchangedmagictypechangedgeoselectchangedgeoselectedgeounselectedpieselectchangedpieselectedpieunselectedmapselectchangedmapselectedmapunselectedaxisareaselectedfocusnodeadjacencyunfocusnodeadjacencybrushbrushselectedrenderedfinished- 鼠标事件
clickdblclickmouseovermouseoutmousemovemousedownmouseupglobaloutcontextmenu
DEMO