From 48d434643c8e4d8d3f0a1c5434f3445f65157c6b Mon Sep 17 00:00:00 2001 From: xiguaxigua Date: Tue, 26 Jun 2018 17:16:00 +0800 Subject: [PATCH] feat(core): add notSetUnchange prop When using the dataZoom component, changes to the data will cause the dataZoom to be reset. Setting `:not-set-unchange="['dataZoom']"` on the component will solve the problem. --- docs/en/props.md | 3 +++ docs/props.md | 3 +++ examples/router.js | 1 + examples/test/data-zoom.vue | 40 +++++++++++++++++++++++++++++++++++++ examples/test/data.js | 12 +++++++++++ package-lock.json | 6 +++--- package.json | 2 +- src/core.js | 28 +++++++++++++++++++++++--- 8 files changed, 88 insertions(+), 7 deletions(-) create mode 100644 examples/test/data-zoom.vue diff --git a/docs/en/props.md b/docs/en/props.md index 731a868..fc6da22 100644 --- a/docs/en/props.md +++ b/docs/en/props.md @@ -32,6 +32,9 @@ All charts have properties such as `width`, `events` and so on. | resize-delay | time delay of window resize handler | number | 200 | | change-delay | delay of chart redraw callback while props change | number | 0 | | set-option-opts | the second parameter of echarts setOption, [doc](http://echarts.baidu.com/api.html#echartsInstance.setOption) | boolean
object | true | +| not-set-unchange | Don't participate in setOption if it doesn't change | array | - | + +?> When using the dataZoom component, changes to the data will cause the dataZoom to be reset. Setting `:not-set-unchange="['dataZoom']"` on the component will solve the problem. #### mark attribute diff --git a/docs/props.md b/docs/props.md index c99973d..22d006e 100644 --- a/docs/props.md +++ b/docs/props.md @@ -33,6 +33,9 @@ | resize-delay | 窗口 resize 事件回调的延迟 | number | 200 | | change-delay | 属性修改触发图表重绘回调的延迟 | number | 0 | | set-option-opts | echarts setOption 的第二个参数, [参考文档](http://echarts.baidu.com/api.html#echartsInstance.setOption) | boolean
object | true | +| not-set-unchange | 未发生变化时不参加 setOption 的属性 | array | - | + +?> 在使用 dataZoom 组件时，数据发生改变会引起 dataZoom 的重置，在组件上设置 `:not-set-unchange="['dataZoom']"` 即可解决这个问题。 #### 增加标识元素的属性 diff --git a/examples/router.js b/examples/router.js index 9efd9c1..b55c628 100644 --- a/examples/router.js +++ b/examples/router.js @@ -17,6 +17,7 @@ export const TEST_ROUTES = [ { path: '/resize', name: 'resize', component: () => import('./test/resize.vue') }, { path: '/set-option', name: 'set-option', component: () => import('./test/set-option.vue') }, { path: '/number-format', name: 'number', component: () => import('./test/number-format.vue') }, + { path: '/data-zoom', name: 'data-zoom', component: () => import('./test/data-zoom.vue') }, ] export default new Router({ diff --git a/examples/test/data-zoom.vue b/examples/test/data-zoom.vue new file mode 100644 index 0000000..e38c526 --- /dev/null +++ b/examples/test/data-zoom.vue @@ -0,0 +1,40 @@ + + + diff --git a/examples/test/data.js b/examples/test/data.js index 76d0b1b..fa417f0 100644 --- a/examples/test/data.js +++ b/examples/test/data.js @@ -10,6 +10,18 @@ export const LINE_DATA = { ] } +export const LINE_DATA1 = { + columns: ['日期', '访问用户', '下单用户'], + rows: [ + { '日期': '1/1', '访问用户': 393, '下单用户': 193, '下单率': 0.32 }, + { '日期': '1/2', '访问用户': 530, '下单用户': 230, '下单率': 0.26 }, + { '日期': '1/3', '访问用户': 923, '下单用户': 623, '下单率': 0.76 }, + { '日期': '1/4', '访问用户': 723, '下单用户': 423, '下单率': 0.49 }, + { '日期': '1/5', '访问用户': 792, '下单用户': 492, '下单率': 0.323 }, + { '日期': '1/6', '访问用户': 593, '下单用户': 293, '下单率': 0.78 } + ] +} + export const SIMPLE_LINE_DATA = { columns: ['日期', '访问用户', '下单用户'], rows: [ diff --git a/package-lock.json b/package-lock.json index f38d26b..ca87a06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17006,9 +17006,9 @@ "dev": true }, "utils-lite": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/utils-lite/-/utils-lite-0.1.3.tgz", - "integrity": "sha512-e7CfQJV8c3p1lYvbmaEYzcDk6jFenRcGoCu+BD56dtlW4EzXBhDUlzgtnD4Ggs51c6yXFflzNoI8yXic2pRCOg==" + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/utils-lite/-/utils-lite-0.1.10.tgz", + "integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ==" }, "utils-merge": { "version": "1.0.1", diff --git a/package.json b/package.json index 157cff4..1e7a188 100755 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "dependencies": { "echarts-amap": "1.0.0-rc.6", "numerify": "1.2.9", - "utils-lite": "0.1.3" + "utils-lite": "0.1.10" }, "devDependencies": { "autoprefixer": "^8.6.3", diff --git a/src/core.js b/src/core.js index 56daf9c..1fbf403 100644 --- a/src/core.js +++ b/src/core.js @@ -7,7 +7,9 @@ import { debounce, camelToKebab, isArray, - isObject + isObject, + cloneDeep, + isEqual } from 'utils-lite' import Loading from './components/loading' @@ -92,7 +94,8 @@ export default { resizeDelay: { type: Number, default: 200 }, changeDelay: { type: Number, default: 0 }, setOptionOpts: { type: [Boolean, Object], default: true }, - cancelResizeCheck: Boolean + cancelResizeCheck: Boolean, + notSetUnchange: Array }, watch: { @@ -216,12 +219,30 @@ export default { // change inited echarts settings if (this.extend) setExtend(options, this.extend) if (this.afterConfig) options = this.afterConfig(options) - // setOption let setOptionOpts = this.setOptionOpts + // map chart not merge if ((this.settings.bmap || this.settings.amap) && !isObject(setOptionOpts)) { setOptionOpts = false } + // exclude unchange options + if (this.notSetUnchange && this.notSetUnchange.length) { + this.notSetUnchange.forEach(item => { + const value = options[item] + if (value) { + if (isEqual(value, this._store[item])) { + options[item] = undefined + } else { + this._store[item] = cloneDeep(value) + } + } + }) + if (isObject(setOptionOpts)) { + setOptionOpts.notMerge = false + } else { + setOptionOpts = false + } + } this.echarts.setOption(options, setOptionOpts) this.$emit('ready', this.echarts) if (!this._once['ready-once']) { @@ -331,6 +352,7 @@ export default { this.echarts = null this.registeredEvents = [] this._once = {} + this._store = {} this.resizeHandler = debounce(this.resize, this.resizeDelay) this.changeHandler = debounce(this.dataHandler, this.changeDelay) this.addWatchToProps()