echarts-vue

# echarts-vue > Echarts(3.x) component for vue.js(2.x) ## Features 1. Simple, lightweight, efficient, scalable; 2. Provide a feature to import Echarts.js components on demand; 3. Provide a feature to bind events on-demand; 4. Provide an optimized resize event for updating view; 5. Provide an extension method (invoke) to deal with the future api of echarts. ## Installation Currently there are **three ways** to install the echarts-vue component for your application. **1. Manual** Download and copy the echarts-vue bundle file ([v-echarts-full.js][1]) into your project, then include it in your HTML file. eg. ``` ``` **2. npm** ``` npm install echarts-vue ``` **3. bower** ``` bower install echarts-vue ``` ## Usage **1. Manual** Download ([vue.min.js][2]) and ([v-echarts-full.js][3]), then include them in your HTML file (eg. index.html). eg. ``` echarts-vue

``` Then, you can open index.html in your chrome. **2. ES modules with npm & vue-loader (Recommended)** importing echarts on demand ***import & register*** ``` import Echarts from 'echarts-vue' Echarts.install(Vue) ``` ### In main.js file which will look like: ``` import Vue from 'vue' import App from './App.vue' // import & register import Echarts from 'echarts-vue' Echarts.install(Vue) /* eslint-disable no-new */ new Vue({ el: '#app', components: { demo: App }, render: h => h(App) }) ``` ### In App.vue file which will look like: ``` ``` **3. ES modules with npm & vue-loader (with full echarts bundle, not recommended)** ### In main.js file which will look like: ``` import Vue from 'vue' import App from './App.vue' // import & register import Echarts from 'echarts-vue/src/components/echarts/index-full.js' Echarts.install(Vue) /* eslint-disable no-new */ new Vue({ el: '#app', components: { demo: App }, render: h => h(App) }) ``` ### In App.vue file which will look like: ``` ``` ## Properties * `option` **[required, reactive]** Used to update data for ECharts instance. Modifying this property will trigger ECharts' `setOption` method. * `events` [Optional] Event-handling functions are mainly added through on in ECharts. Binding events on demand. The events object will look like: ``` { "click": handler_function(){}, "dblclick": handler_function(){}, "mouseover": handler_function(){}, "mouseout": handler_function(){}, "mousedown": handler_function(){}, "mouseup": handler_function(){}, "globalout": handler_function(){}, ...... } ``` * `theme` & `opts` [Optional] Used to creates an ECharts instance `theme` : [Optional] Theme to be applied. This can be a configuring object of a theme, or a theme name registered through echarts.registerTheme. `opts` : [Optional] which may contain: > *devicePixelRatio* : Ratio of one physical pixel to the size of one device independent pixels. Browser's window.devicePixelRatio is used by default. > *renderer* : The renderer only supports 'canvas' by now. > *width* : Specify width explicitly, in pixel. If setting to null/undefined/'auto', width of dom (instance container) will be used. > *height* : Specify height explicitly, in pixel. If setting to null/undefined/'auto', height of dom (instance container) will be used. * `group` [Optional] This property is automatically bound to the same property of the ECharts instance. * `not-merge` [Optional, default: true] This property indicates ECharts states whether not to merge with previous option; true by defualt, stating not merging. * `lazy-update` [Optional, default: false] This property indicates ECharts states whether not to update chart immediately; false by defualt, stating update immediately. * `auto-resize` [Optional, default: true] This property indicates ECharts instance should be resized automatically whenever the window is resized. ### Instance Methods * `getGroup` * `setOption` [ user should not call this method in most cases ] * `getWidth` * `getHeight` * `getDom` * `getOption` * `resize` [ user should not call this method in most cases, invoked by instance automatically ] * `dispatchAction` * `on` * `off` * `convertToPixel` * `convertFromPixel` * `containPixel` * `showLoading` * `hideLoading` * `getDataURL` * `getConnectedDataURL` * `clear` [ user should not call this method in most cases] * `isDisposed` * `dispose` [ *invoked by echarts-vue component, user should not call this method* ] * `invoke` [ **This method like a reflection method in Java. The invoke method provides strong ability to cater to the future method of Echarts**. ] ``` // invoke usage: echartsVueComponent.invoke('setOption', option, notMerge, lazyUpdate) // is equivalent to echartsVueComponent.setOption(option, notMerge, lazyUpdate) ``` ### Static Methods * `connect` * `disconnect` * `dispose` * `registerMap` * `getMap` * `registerTheme` * `clipPointsByRect` * `clipRectByRect` ### Events ECharts-Vue support the following events: * Mouse events * `click` * `dblclick` * `mouseover` * `mouseout` * `mousedown` * `mouseup` * `globalout` * `legendselectchanged` * `legendselected` * `legendunselected` * `datazoom` * `datarangeselected` * `timelinechanged` * `timelineplaychanged` * `restore` * `dataviewchanged` * `magictypechanged` * `geoselectchanged` * `geoselected` * `geounselected` * `pieselectchanged` * `pieselected` * `pieunselected` * `mapselectchanged` * `mapselected` * `mapunselected` * `axisareaselected` * `brush` * `brushselected` For further details, see [\[ECharts' API documentation\]][4]. ## Build Setup & Local Development ``` bash # install dependencies npm install # serve examples with hot reload at localhost:8080 npm run dev # build for production with minification (v-echarts-full.js) npm run dist ``` [1]: https://github.com/yongxing510/echarts-vue/blob/master/bundle/v-echarts-full.js [2]: https://github.com/vuejs/vue/blob/dev/dist/vue.min.js [3]: https://github.com/yongxing510/echarts-vue/blob/master/bundle/v-echarts-full.js [4]: https://ecomfe.github.io/echarts-doc/public/en/api.html