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

@@ -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<br>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
 

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<br>object | true |
+| not-set-unchange | 未发生变化时不参加 setOption 的属性 | array | - |
+
+?> 在使用 dataZoom 组件时，数据发生改变会引起 dataZoom 的重置，在组件上设置 `:not-set-unchange="['dataZoom']"` 即可解决这个问题。
 
 #### 增加标识元素的属性
 

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

examples/test/data-zoom.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <button @click="change">change data</button>
+    <button @click="changeDataZoom">change dataZoom</button>
+    <ve-line
+      :data="chartData"
+      :not-set-unchange="['dataZoom']"
+      :data-zoom="dataZoom">
+    </ve-line>
+    <ve-line
+      :data="chartData"
+      :data-zoom="dataZoom">
+    </ve-line>
+  </div>
+</template>
+
+<script>
+import { VeLine } from '../../src/index.es'
+import { LINE_DATA, LINE_DATA1 } from '../test/data'
+export default {
+  data () {
+    this.unchange = ['dataZoom']
+    return {
+      chartData: LINE_DATA,
+      dataZoom: { start: 20, end: 100 }
+    }
+  },
+  methods: {
+    change () {
+      this.chartData = this.chartData === LINE_DATA
+        ? LINE_DATA1
+        : LINE_DATA
+    },
+    changeDataZoom () {
+      this.dataZoom.start = this.dataZoom.start === 20 ? 50 : 20
+    }
+  },
+  components: { VeLine }
+}
+</script>

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: [

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",

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