javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-17 05:30:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: make manual-update truly reactive, fix #338

Browse Source
This commit is contained in:
Justineo
2019-04-26 17:22:18 +08:00
parent e938fd6994
commit 5257ef6ea6
2 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-echarts", "name": "vue-echarts",
"version": "4.0.1", "version": "4.0.2",
"description": "ECharts component for Vue.js.", "description": "ECharts component for Vue.js.",
"main": "dist/vue-echarts.js", "main": "dist/vue-echarts.js",
"module": "components/ECharts.vue", "module": "components/ECharts.vue",

65
src/components/ECharts.vue
View File

@ -54,6 +54,9 @@ const EVENTS = [
'contextmenu' 'contextmenu'
] ]
const INIT_TRIGGERS = ['theme', 'initOptions', 'autoresize']
const REWATCH_TRIGGERS = ['manualUpdate', 'watchShallow']
export default { export default {
props: { props: {
options: Object, options: Object,
@ -131,11 +134,11 @@ export default {
} }
return this.chart[name](...args) return this.chart[name](...args)
}, },
delegateGet (name, method) { delegateGet (methodName) {
if (!this.chart) { if (!this.chart) {
this.init() this.init()
} }
return this.chart[method]() return this.chart[methodName]()
}, },
getArea () { getArea () {
return this.$el.offsetWidth * this.$el.offsetHeight return this.$el.offsetWidth * this.$el.offsetHeight
@ -183,31 +186,54 @@ export default {
width: { width: {
configurable: true, configurable: true,
get: () => { get: () => {
return this.delegateGet('width', 'getWidth') return this.delegateGet('getWidth')
} }
}, },
height: { height: {
configurable: true, configurable: true,
get: () => { get: () => {
return this.delegateGet('height', 'getHeight') return this.delegateGet('getHeight')
} }
}, },
isDisposed: { isDisposed: {
configurable: true, configurable: true,
get: () => { get: () => {
return !!this.delegateGet('isDisposed', 'isDisposed') return !!this.delegateGet('isDisposed')
} }
}, },
computedOptions: { computedOptions: {
configurable: true, configurable: true,
get: () => { get: () => {
return this.delegateGet('computedOptions', 'getOption') return this.delegateGet('getOption')
} }
} }
}) })
this.chart = chart this.chart = chart
}, },
initOptionsWatcher () {
if (this.__unwatchOptions) {
this.__unwatchOptions()
this.__unwatchOptions = null
}
if (!this.manualUpdate) {
this.__unwatchOptions = this.$watch('options', (val, oldVal) => {
if (!this.chart && val) {
this.init()
} else {
// mutating `options` will lead to merging
// replacing it with new reference will lead to not merging
// eg.
// `this.options = Object.assign({}, this.options, { ... })`
// will trigger `this.chart.setOption(val, true)
// `this.options.title.text = 'Trends'`
// will trigger `this.chart.setOption(val, false)`
this.chart.setOption(val, val !== oldVal)
}
}, { deep: !this.watchShallow })
}
},
destroy () { destroy () {
if (this.autoresize) { if (this.autoresize) {
removeListener(this.$el, this.__resizeHandler) removeListener(this.$el, this.__resizeHandler)
@ -223,29 +249,20 @@ export default {
} }
}, },
created () { created () {
if (!this.manualUpdate) { this.initOptionsWatcher()
this.$watch('options', (val, oldVal) => {
if (!this.chart && val) {
this.init()
} else {
// mutating `options` will lead to merging
// replacing it with new reference will lead to not merging
// eg.
// `this.options = Object.assign({}, this.options, { ... })`
// will trigger `this.chart.setOption(val, true)
// `this.options.title.text = 'Trends'`
// will trigger `this.chart.setOption(val, false)`
this.chart.setOption(val, val !== oldVal)
}
}, { deep: !this.watchShallow })
}
let watched = ['theme', 'initOptions', 'autoresize', 'manualUpdate', 'watchShallow'] INIT_TRIGGERS.forEach(prop => {
watched.forEach(prop => {
this.$watch(prop, () => { this.$watch(prop, () => {
this.refresh() this.refresh()
}, { deep: true }) }, { deep: true })
}) })
REWATCH_TRIGGERS.forEach(prop => {
this.$watch(prop, () => {
this.initOptionsWatcher()
this.refresh()
})
})
}, },
mounted () { mounted () {
// auto init if `options` is already provided // auto init if `options` is already provided