javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-14 19:23:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix #127

Browse Source
This commit is contained in:
Justineo
2017-09-18 14:26:30 +08:00
parent d5a60cb1a4
commit 274aa35fc5
13 changed files with 88 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.md
View File

@ -1,3 +1,13 @@
2.4.1
* Make `theme` reactive.
* Add `focusnodeadjacency` & `unfocusnodeadjacency` events.
2.4.0
* Add `computedOptions`.
2.3.9
* Replace publish npm scripts with shell commands to prevent failure upon npm install.
2.3.8 2.3.8
* Fixed the problem that styles are missing for precompiled version. * Fixed the problem that styles are missing for precompiled version.

28
README.md
View File

@ -190,9 +190,11 @@ export default {
See more examples [here](https://github.com/Justineo/vue-echarts/tree/master/demo). See more examples [here](https://github.com/Justineo/vue-echarts/tree/master/demo).
### Properties ### Props
* `initOptions` & `theme` * `initOptions`
`theme` **[reactive]**
Used to initialize ECharts instance. Used to initialize ECharts instance.
@ -208,11 +210,25 @@ See more examples [here](https://github.com/Justineo/vue-echarts/tree/master/dem
This property indicates ECharts instance should be resized automatically whenever the window is resized. This property indicates ECharts instance should be resized automatically whenever the window is resized.
### Instance Methods ### Computed
* `mergeOptions` (`setOption` in ECharts) * `width` **[reactive] [readonly]**
*Providing a better method name to describe the actual behavior of `setOption.`* Used to retrieve the current width of the chart instance.
* `height` **[reactive] [readonly]**
Used to retrieve the current height of the chart instance.
* `computedOptions` **[reactive] [readonly]**
Used to retrive the actual options calculated by ECharts after updating `options`.
### Methods
* `mergeOptions` (use `setOption` in ECharts under the hood)
*Provides a better method name to describe the actual behavior of `setOption.`*
* `resize` * `resize`
* `dispatchAction` * `dispatchAction`
@ -257,6 +273,8 @@ Vue-ECharts support the following events:
* `mapselected` * `mapselected`
* `mapunselected` * `mapunselected`
* `axisareaselected` * `axisareaselected`
* `focusnodeadjacency`
* `unfocusnodeadjacency`
* `brush` * `brush`
* `brushselected` * `brushselected`
* Mouse events * Mouse events

12
demo/Demo.vue
View File

@ -18,7 +18,14 @@
<figure><chart :options="pie" ref="pie" auto-resize></chart></figure> <figure><chart :options="pie" ref="pie" auto-resize></chart></figure>
<h2>Polar plot <small>(with built-in theme)</small></h2> <h2>Polar plot <small>(with built-in theme)</small></h2>
<figure style="background-color: #333;"><chart :options="polar" theme="dark" auto-resize></chart></figure> <figure :style="polarTheme === 'dark' ? 'background-color: #333' : ''"><chart :options="polar" :theme="polarTheme" auto-resize></chart></figure>
<p>
Theme
<select v-model="polarTheme">
<option :value="null">Default</option>
<option value="dark">Dark</option>
</select>
</p>
<h2>Scatter plot <small>(with gradient)</small></h2> <h2>Scatter plot <small>(with gradient)</small></h2>
<figure><chart id="scatter" :options="scatter" auto-resize></chart></figure> <figure><chart id="scatter" :options="scatter" auto-resize></chart></figure>
@ -31,7 +38,7 @@
<figure><chart :options="scoreRadar" auto-resize></chart></figure> <figure><chart :options="scoreRadar" auto-resize></chart></figure>
<p> <p>
<select v-model="metricIndex"> <select v-model="metricIndex">
<option v-for="(metric, index) in metrics" :value="index">{{metric}}</option> <option v-for="(metric, index) in metrics" :value="index" :key="index">{{metric}}</option>
</select> </select>
<button @click="increase(1)" :disabled="isMax">Increase</button> <button @click="increase(1)" :disabled="isMax">Increase</button>
<button @click="increase(-1)" :disabled="isMin">Decrease</button> <button @click="increase(-1)" :disabled="isMin">Decrease</button>
@ -297,6 +304,7 @@ export default {
map, map,
c1, c1,
c2, c2,
polarTheme: 'dark',
seconds: -1, seconds: -1,
asyncCount: false, asyncCount: false,
connected: false, connected: false,

2
demo/index.html
View File

@ -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.6103aff7f2e8adda822371de0afcf583.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.5c3164f3e0b385baa60e.js></script><script type=text/javascript src=./static/js/vendor.4072c478ecfcfd56a1a4.js></script><script type=text/javascript src=./static/js/app.183db85779c0aba02e62.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.6103aff7f2e8adda822371de0afcf583.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.2be44b38b52082ed792a.js></script><script type=text/javascript src=./static/js/vendor.4072c478ecfcfd56a1a4.js></script><script type=text/javascript src=./static/js/app.03c186d2e63c82bfc45a.js></script></body></html>

4
demo/static/js/app.183db85779c0aba02e62.js → demo/static/js/app.03c186d2e63c82bfc45a.js
View File

File diff suppressed because one or more lines are too long

1
demo/static/js/app.03c186d2e63c82bfc45a.js.map Normal file
View File

File diff suppressed because one or more lines are too long

1
demo/static/js/app.183db85779c0aba02e62.js.map
View File

File diff suppressed because one or more lines are too long

4
demo/static/js/manifest.5c3164f3e0b385baa60e.js → demo/static/js/manifest.2be44b38b52082ed792a.js
View File

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

2
demo/static/js/manifest.5c3164f3e0b385baa60e.js.map → demo/static/js/manifest.2be44b38b52082ed792a.js.map
View File

File diff suppressed because one or more lines are too long

2
dist/vue-echarts.js vendored
View File

File diff suppressed because one or more lines are too long

5
package.json
View File

@ -1,12 +1,13 @@
{ {
"name": "vue-echarts", "name": "vue-echarts",
"version": "2.3.9", "version": "2.4.1",
"description": "ECharts component for Vue.js.", "description": "ECharts component for Vue.js.",
"main": "dist/vue-echarts.js", "main": "dist/vue-echarts.js",
"scripts": { "scripts": {
"dev": "node build/dev-server.js", "dev": "node build/dev-server.js",
"demo": "node build/build.js", "demo": "node build/build.js",
"build": "cross-env NODE_ENV=production rollup -c" "build": "cross-env NODE_ENV=production rollup -c",
"pub": "sh ./publish.sh"
}, },
"keywords": [ "keywords": [
"ECharts", "ECharts",

1
publish.sh
View File

@ -1,4 +1,3 @@
npm run demo
npm run build npm run build
cp -r ./src/* . cp -r ./src/* .
rm index.js rm index.js

48
src/components/ECharts.vue
View File

@ -36,6 +36,8 @@ const ACTION_EVENTS = [
'mapselected', 'mapselected',
'mapunselected', 'mapunselected',
'axisareaselected', 'axisareaselected',
'focusnodeadjacency',
'unfocusnodeadjacency',
'brush', 'brush',
'brushselected' 'brushselected'
] ]
@ -70,19 +72,25 @@ export default {
width: { width: {
cache: false, cache: false,
get () { get () {
return this.chart.getWidth() return this._delegateGet('width', 'getWidth')
} }
}, },
height: { height: {
cache: false, cache: false,
get () { get () {
return this.chart.getHeight() return this._delegateGet('height', 'getHeight')
} }
}, },
isDisposed: { isDisposed: {
cache: false, cache: false,
get () { get () {
return this.chart.isDisposed() return !!this._delegateGet('isDisposed', 'isDisposed')
}
},
computedOptions: {
cache: false,
get () {
return this._delegateGet('computedOptions', 'getOption')
} }
} }
}, },
@ -91,17 +99,19 @@ export default {
options: { options: {
handler (options) { handler (options) {
if (!this.chart && options) { if (!this.chart && options) {
this._init() this.init()
} else { } else {
this.chart.setOption(this.options, true) this.chart.setOption(this.options, true)
} }
}, },
deep: true deep: true
}, },
group: { group (group) {
handler (group) { this.chart.group = group
this.chart.group = group },
} theme () {
this._destroy()
this.init()
} }
}, },
methods: { methods: {
@ -151,7 +161,13 @@ export default {
} }
return this.chart[name](...args) return this.chart[name](...args)
}, },
_init () { _delegateGet (name, method) {
if (!this.chart) {
Vue.util.warn(`Cannot get [${name}] before the chart is initialized. Set prop [options] first.`, this)
}
return this.chart[method]()
},
init () {
if (this.chart) { if (this.chart) {
return return
} }
@ -187,12 +203,19 @@ export default {
} }
this.chart = chart this.chart = chart
},
_destroy () {
if (this.autoResize) {
window.removeEventListener('resize', this.__resizeHanlder)
}
this.dispose()
this.chart = null
} }
}, },
mounted () { mounted () {
// auto init if `options` is already provided // auto init if `options` is already provided
if (this.options) { if (this.options) {
this._init() this.init()
} }
}, },
activated () { activated () {
@ -204,10 +227,7 @@ export default {
if (!this.chart) { if (!this.chart) {
return return
} }
if (this.autoResize) { this._destroy()
window.removeEventListener('resize', this.__resizeHanlder)
}
this.dispose()
}, },
connect (group) { connect (group) {
if (typeof group !== 'string') { if (typeof group !== 'string') {