javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-16 12:52:48 +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",
"version": "4.0.1",
"version": "4.0.2",
"description": "ECharts component for Vue.js.",
"main": "dist/vue-echarts.js",
"module": "components/ECharts.vue",

65
src/components/ECharts.vue
View File

@ -54,6 +54,9 @@ const EVENTS = [
'contextmenu'
]
const INIT_TRIGGERS = ['theme', 'initOptions', 'autoresize']
const REWATCH_TRIGGERS = ['manualUpdate', 'watchShallow']
export default {
props: {
options: Object,
@ -131,11 +134,11 @@ export default {
}
return this.chart[name](...args)
},
delegateGet (name, method) {
delegateGet (methodName) {
if (!this.chart) {
this.init()
}
return this.chart[method]()
return this.chart[methodName]()
},
getArea () {
return this.$el.offsetWidth * this.$el.offsetHeight
@ -183,31 +186,54 @@ export default {
width: {
configurable: true,
get: () => {
return this.delegateGet('width', 'getWidth')
return this.delegateGet('getWidth')
}
},
height: {
configurable: true,
get: () => {
return this.delegateGet('height', 'getHeight')
return this.delegateGet('getHeight')
}
},
isDisposed: {
configurable: true,
get: () => {
return !!this.delegateGet('isDisposed', 'isDisposed')
return !!this.delegateGet('isDisposed')
}
},
computedOptions: {
configurable: true,
get: () => {
return this.delegateGet('computedOptions', 'getOption')
return this.delegateGet('getOption')
}
}
})
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 () {
if (this.autoresize) {
removeListener(this.$el, this.__resizeHandler)
@ -223,29 +249,20 @@ export default {
}
},
created () {
if (!this.manualUpdate) {
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 })
}
this.initOptionsWatcher()
let watched = ['theme', 'initOptions', 'autoresize', 'manualUpdate', 'watchShallow']
watched.forEach(prop => {
INIT_TRIGGERS.forEach(prop => {
this.$watch(prop, () => {
this.refresh()
}, { deep: true })
})
REWATCH_TRIGGERS.forEach(prop => {
this.$watch(prop, () => {
this.initOptionsWatcher()
this.refresh()
})
})
},
mounted () {
// auto init if `options` is already provided