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()