chore: add user-triggered data load for manual updating use case

demo/Demo.vue

@@ -188,7 +188,7 @@
     </section>
 
     <h2 id="flight">
-      <a href="#flight">Manual Updates</a>
+      <a href="#flight">Manual updates</a>
       <button :class="{
         round: true,
         expand: expand.flight
@@ -196,11 +196,12 @@
     </h2>
     <section v-if="expand.flight">
       <p><small>You may use <code>manual-update</code> prop for performance critical use cases.</small></p>
+      <p><button :disabled="flightLoaded" @click="loadFlights">Load</button></p>
       <figure style="background-color: #003;">
         <chart
           ref="flight"
           :init-options="initOptions"
-          manual-update
+          :options="flightOptions"
           auto-resize
         />
       </figure>
@@ -317,7 +318,9 @@ export default {
       connected: true,
       metricIndex: 0,
       open: false,
-      img: {}
+      img: {},
+      flightLoaded: false,
+      flightOptions: null
     }
   },
   computed: {
@@ -379,6 +382,80 @@ export default {
       } else {
         this.$store.dispatch('asyncIncrement', { amount, index: this.metricIndex, delay: 500 })
       }
+    },
+    loadFlights () {
+      this.flightLoaded = true
+
+      let { flight } = this.$refs
+      flight.showLoading({
+        text: '',
+        color: '#c23531',
+        textColor: 'rgba(255, 255, 255, 0.5)',
+        maskColor: '#003',
+        zlevel: 0
+      })
+      fetch('../static/flight.json')
+        .then(response => response.json())
+        .then(data => {
+          flight.hideLoading()
+
+          function getAirportCoord (idx) {
+            return [data.airports[idx][3], data.airports[idx][4]]
+          }
+          let routes = data.routes.map(function (airline) {
+            return [
+              getAirportCoord(airline[1]),
+              getAirportCoord(airline[2])
+            ]
+          })
+
+          this.flightOptions = ({
+            title: {
+              text: 'World Flights',
+              left: 'center',
+              textStyle: {
+                color: '#eee'
+              }
+            },
+            backgroundColor: '#003',
+            tooltip: {
+              formatter (param) {
+                let route = data.routes[param.dataIndex]
+                return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1]
+              }
+            },
+            geo: {
+              map: 'world',
+              left: 0,
+              right: 0,
+              silent: true,
+              itemStyle: {
+                normal: {
+                  borderColor: '#003',
+                  color: '#005'
+                }
+              }
+            },
+            series: [
+              {
+                type: 'lines',
+                coordinateSystem: 'geo',
+                data: routes,
+                large: true,
+                largeThreshold: 100,
+                lineStyle: {
+                  normal: {
+                    opacity: 0.05,
+                    width: 0.5,
+                    curveness: 0.3
+                  }
+                },
+                // 设置混合模式为叠加
+                blendMode: 'lighter'
+              }
+            ]
+          })
+        })
     }
   },
   watch: {
@@ -416,77 +493,6 @@ export default {
         dataIndex
       })
     }, 1000)
-
-    let { flight } = this.$refs
-    flight.showLoading({
-      text: '',
-      color: '#c23531',
-      textColor: 'rgba(255, 255, 255, 0.5)',
-      maskColor: '#003',
-      zlevel: 0
-    })
-    fetch('../static/flight.json')
-      .then(response => response.json())
-      .then(data => {
-        flight.hideLoading()
-
-        function getAirportCoord (idx) {
-          return [data.airports[idx][3], data.airports[idx][4]]
-        }
-        let routes = data.routes.map(function (airline) {
-          return [
-            getAirportCoord(airline[1]),
-            getAirportCoord(airline[2])
-          ]
-        })
-
-        flight.mergeOptions({
-          title: {
-            text: 'World Flights',
-            left: 'center',
-            textStyle: {
-              color: '#eee'
-            }
-          },
-          backgroundColor: '#003',
-          tooltip: {
-            formatter (param) {
-              let route = data.routes[param.dataIndex]
-              return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1]
-            }
-          },
-          geo: {
-            map: 'world',
-            left: 0,
-            right: 0,
-            silent: true,
-            itemStyle: {
-              normal: {
-                borderColor: '#003',
-                color: '#005'
-              }
-            }
-          },
-          series: [
-            {
-              type: 'lines',
-              coordinateSystem: 'geo',
-              data: routes,
-              large: true,
-              largeThreshold: 100,
-              lineStyle: {
-                normal: {
-                  opacity: 0.05,
-                  width: 0.5,
-                  curveness: 0.3
-                }
-              },
-              // 设置混合模式为叠加
-              blendMode: 'lighter'
-            }
-          ]
-        })
-      })
   }
 }
 </script>
@@ -630,6 +636,7 @@ label
 
 figure
   display inline-block
+  position relative
   margin 2em auto
   border 1px solid rgba(0, 0, 0, .1)
   border-radius 8px

demo/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no"><title>Vue-ECharts Demo</title><link rel=stylesheet href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono"><link rel=stylesheet href="//fonts.googleapis.com/css?family=Dosis:300,500&amp;text=Vue-ECharts"><link href=./static/css/app.82f1b50d00537e867c961552a85c1d04.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.28eea2219a15b49bf911.js></script><script type=text/javascript src=./static/js/vendor.d7b164e17b619929d347.js></script><script type=text/javascript src=./static/js/app.4fcc151a27df85ace9d2.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no"><title>Vue-ECharts Demo</title><link rel=stylesheet href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono"><link rel=stylesheet href="//fonts.googleapis.com/css?family=Dosis:300,500&amp;text=Vue-ECharts"><link href=./static/css/app.3b75df11a72a2efe79ba66a496bfd9e2.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.14c8950068e6c782a21d.js></script><script type=text/javascript src=./static/js/vendor.d7b164e17b619929d347.js></script><script type=text/javascript src=./static/js/app.7c1743608b29d8d04e92.js></script></body></html>

demo/static/css/app.3b75df11a72a2efe79ba66a496bfd9e2.css

@@ -0,0 +1 @@
+*,:after,:before{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:3em 0 0;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;color:#666;text-align:center}a{color:inherit;text-decoration:none}h1{margin-bottom:1em;font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif}h1,h2{color:#2c3e50;font-weight:300}h2{margin-top:2em;padding-top:1em;font-size:1.2em}h2 button{margin-left:1em;vertical-align:middle}.desc{margin-bottom:3em;color:#7f8c8d}h2 small{opacity:.7}p small{font-size:.8em;color:#7f8c8d}p{line-height:1.5}pre{display:inline-block;padding:.8em;background-color:#f9f9f9;box-shadow:0 1px 2px rgba(0,0,0,.125);line-height:1.1;color:#2973b7}code,pre{font-family:Roboto Mono,Monaco,courier,monospace}pre code{font-size:.8em}.attr{color:#e96900}.val{color:#42b983}footer{margin:5em 0 3em;font-size:.5em;vertical-align:middle}footer a{display:inline-block;margin:0 5px;padding:3px 0 6px;color:#7f8c8d;font-size:2em;text-decoration:none}footer a:hover{padding-bottom:3px;border-bottom:3px solid #42b983}button{border:1px solid #4fc08d;border-radius:2em;background-color:#fff;color:#42b983;cursor:pointer;font:inherit;transition:opacity .3s}button:focus{outline:none;box-shadow:0 0 1px #4fc08d}button:active{background:rgba(79,192,141,.2)}button[disabled]{opacity:.5;cursor:not-allowed}button.round{width:1.6em;height:1.6em;position:relative}button.round:after,button.round:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:1px;background-color:#42b983}button.round:after{width:1px;height:9px}button.round.expand:after{display:none}button,label{font-size:.75em}figure{display:inline-block;position:relative;margin:2em auto;border:1px solid rgba(0,0,0,.1);border-radius:8px;box-shadow:0 0 45px rgba(0,0,0,.2);padding:1.5em 2em;width:40vw}figure .echarts{width:100%;min-width:400px;height:300px}#logo{display:inline-block;width:128px;height:128px;pointer-events:none}.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.2);z-index:1}.modal.open{display:block}.modal img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#404a59;max-width:80vw;border:2px solid #fff;border-radius:3px;box-shadow:0 0 30px rgba(0,0,0,.2)}@media (min-width:980px){figure.half{padding:1em 1.5em}figure.half .echarts{width:28vw;min-width:240px;height:180px}figure.half:not(:last-child){margin-right:15px}}@media (max-width:980px){p{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}p select{text-indent:calc(50% - 1em)}p label,p select{border:1px solid #4fc08d;border-radius:2em;background-color:#fff;color:#42b983;cursor:pointer;transition:opacity .3s}p button,p input,p label,p select{-ms-flex:1 0;flex:1 0;margin:0 .5em;padding:0;line-height:2.4em;max-width:40vw;border-radius:2px;font-size:.8em}p select{-webkit-appearance:none}p input[type=checkbox]{display:none}p input[type=checkbox]:checked+label{background:#42b983;color:#fff}figure{width:100vw;margin:1em auto;padding:0 1em;border:none;border-radius:0;box-shadow:none}figure .echarts{width:100%;min-width:0;height:75vw}}.renderer{position:fixed;top:10px;left:10px;font-size:12px;text-align:center}.renderer button{float:left;position:relative;width:48px;border-radius:4px}.renderer button.active{z-index:1;background-color:#4fc08d;color:#fff}.renderer button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.renderer button:last-child{left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.echarts{width:600px;height:400px}

demo/static/css/app.82f1b50d00537e867c961552a85c1d04.css

@@ -1 +0,0 @@
-*,:after,:before{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:3em 0 0;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;color:#666;text-align:center}a{color:inherit;text-decoration:none}h1{margin-bottom:1em;font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif}h1,h2{color:#2c3e50;font-weight:300}h2{margin-top:2em;padding-top:1em;font-size:1.2em}h2 button{margin-left:1em;vertical-align:middle}.desc{margin-bottom:3em;color:#7f8c8d}h2 small{opacity:.7}p small{font-size:.8em;color:#7f8c8d}p{line-height:1.5}pre{display:inline-block;padding:.8em;background-color:#f9f9f9;box-shadow:0 1px 2px rgba(0,0,0,.125);line-height:1.1;color:#2973b7}code,pre{font-family:Roboto Mono,Monaco,courier,monospace}pre code{font-size:.8em}.attr{color:#e96900}.val{color:#42b983}footer{margin:5em 0 3em;font-size:.5em;vertical-align:middle}footer a{display:inline-block;margin:0 5px;padding:3px 0 6px;color:#7f8c8d;font-size:2em;text-decoration:none}footer a:hover{padding-bottom:3px;border-bottom:3px solid #42b983}button{border:1px solid #4fc08d;border-radius:2em;background-color:#fff;color:#42b983;cursor:pointer;font:inherit;transition:opacity .3s}button:focus{outline:none;box-shadow:0 0 1px #4fc08d}button:active{background:rgba(79,192,141,.2)}button[disabled]{opacity:.5;cursor:not-allowed}button.round{width:1.6em;height:1.6em;position:relative}button.round:after,button.round:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:1px;background-color:#42b983}button.round:after{width:1px;height:9px}button.round.expand:after{display:none}button,label{font-size:.75em}figure{display:inline-block;margin:2em auto;border:1px solid rgba(0,0,0,.1);border-radius:8px;box-shadow:0 0 45px rgba(0,0,0,.2);padding:1.5em 2em;width:40vw}figure .echarts{width:100%;min-width:400px;height:300px}#logo{display:inline-block;width:128px;height:128px;pointer-events:none}.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.2);z-index:1}.modal.open{display:block}.modal img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#404a59;max-width:80vw;border:2px solid #fff;border-radius:3px;box-shadow:0 0 30px rgba(0,0,0,.2)}@media (min-width:980px){figure.half{padding:1em 1.5em}figure.half .echarts{width:28vw;min-width:240px;height:180px}figure.half:not(:last-child){margin-right:15px}}@media (max-width:980px){p{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}p select{text-indent:calc(50% - 1em)}p label,p select{border:1px solid #4fc08d;border-radius:2em;background-color:#fff;color:#42b983;cursor:pointer;transition:opacity .3s}p button,p input,p label,p select{-ms-flex:1 0;flex:1 0;margin:0 .5em;padding:0;line-height:2.4em;max-width:40vw;border-radius:2px;font-size:.8em}p select{-webkit-appearance:none}p input[type=checkbox]{display:none}p input[type=checkbox]:checked+label{background:#42b983;color:#fff}figure{width:100vw;margin:1em auto;padding:0 1em;border:none;border-radius:0;box-shadow:none}figure .echarts{width:100%;min-width:0;height:75vw}}.renderer{position:fixed;top:10px;left:10px;font-size:12px;text-align:center}.renderer button{float:left;position:relative;width:48px;border-radius:4px}.renderer button.active{z-index:1;background-color:#4fc08d;color:#fff}.renderer button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.renderer button:last-child{left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.echarts{width:600px;height:400px}

demo/static/js/manifest.14c8950068e6c782a21d.js

@@ -1 +1 @@
-!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,i){for(var u,a,f,s=0,l=[];s<t.length;s++)a=t[s],o[a]&&l.push(o[a][0]),o[a]=0;for(u in c)Object.prototype.hasOwnProperty.call(c,u)&&(e[u]=c[u]);for(r&&r(t,c,i);l.length;)l.shift()();if(i)for(s=0;s<i.length;s++)f=n(n.s=i[s]);return f};var t={},o={2:0};n.e=function(e){function r(){u.onerror=u.onload=null,clearTimeout(a);var n=o[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}var t=o[e];if(0===t)return new Promise(function(e){e()});if(t)return t[2];var c=new Promise(function(n,r){t=o[e]=[n,r]});t[2]=c;var i=document.getElementsByTagName("head")[0],u=document.createElement("script");u.type="text/javascript",u.charset="utf-8",u.async=!0,u.timeout=12e4,n.nc&&u.setAttribute("nonce",n.nc),u.src=n.p+"static/js/"+e+"."+{0:"d7b164e17b619929d347",1:"4fcc151a27df85ace9d2"}[e]+".js";var a=setTimeout(r,12e4);return u.onerror=u.onload=r,i.appendChild(u),c},n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p=".",n.oe=function(e){throw console.error(e),e}}([]);
+!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,i){for(var u,a,f,s=0,l=[];s<t.length;s++)a=t[s],o[a]&&l.push(o[a][0]),o[a]=0;for(u in c)Object.prototype.hasOwnProperty.call(c,u)&&(e[u]=c[u]);for(r&&r(t,c,i);l.length;)l.shift()();if(i)for(s=0;s<i.length;s++)f=n(n.s=i[s]);return f};var t={},o={2:0};n.e=function(e){function r(){u.onerror=u.onload=null,clearTimeout(a);var n=o[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}var t=o[e];if(0===t)return new Promise(function(e){e()});if(t)return t[2];var c=new Promise(function(n,r){t=o[e]=[n,r]});t[2]=c;var i=document.getElementsByTagName("head")[0],u=document.createElement("script");u.type="text/javascript",u.charset="utf-8",u.async=!0,u.timeout=12e4,n.nc&&u.setAttribute("nonce",n.nc),u.src=n.p+"static/js/"+e+"."+{0:"d7b164e17b619929d347",1:"7c1743608b29d8d04e92"}[e]+".js";var a=setTimeout(r,12e4);return u.onerror=u.onload=r,i.appendChild(u),c},n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p=".",n.oe=function(e){throw console.error(e),e}}([]);