Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xlsdg/vue-echarts-v3
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)
https://github.com/xlsdg/vue-echarts-v3
chart echarts library visualization vue vue-component vue-echarts vuejs
Last synced: 2 days ago
JSON representation
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)
- Host: GitHub
- URL: https://github.com/xlsdg/vue-echarts-v3
- Owner: xlsdg
- License: mit
- Created: 2016-12-20T03:31:22.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-12-30T08:31:01.000Z (about 4 years ago)
- Last Synced: 2024-12-31T04:02:28.242Z (12 days ago)
- Topics: chart, echarts, library, visualization, vue, vue-component, vue-echarts, vuejs
- Language: JavaScript
- Homepage: https://xlsdg.github.io/vue-echarts-v3-demo/
- Size: 8.52 MB
- Stars: 904
- Watchers: 24
- Forks: 124
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-echarts-v3 - echarts-v3?style=social) - VueJS组件封装 (UI组件)
- awesome-echarts - vue-echarts-v3 - Vue.js(v2.x+) component wrap for Apache ECharts (v3.x+). (Frameworks / Vue Component)
- awesome-github-vue - vue-echarts-v3 - VueJS组件封装 (UI组件)
- awesome-github-vue - vue-echarts-v3 - VueJS组件封装 (UI组件)
- awesome - vue-echarts-v3 - VueJS组件封装 (UI组件)
README
# vue-echarts-v3 [](https://www.npmjs.com/package/vue-echarts-v3) [](https://vuejs.org/) [](http://echarts.baidu.com/)
> [Vue.js](https://vuejs.org/) `v2.x+` component wrap for [Apache ECharts (incubating)](https://github.com/apache/incubator-echarts) `v3.x+`
## Feature
1. Lightweight, efficient, on-demand binding events;
2. Support for importing ECharts.js charts and components on demand;
3. Support component resize event auto update view;
## Installation
```bash
$ npm install --save echarts vue-echarts-v3
```
## Usage
0. Change webpack config
For webpack 1.x:
```diff
{
test: /\.js$/,
loader: 'babel',
include: [
- path.join(prjRoot, 'src')
+ path.join(prjRoot, 'src'),
+ path.join(prjRoot, 'node_modules/vue-echarts-v3/src')
],
- exclude: /node_modules/
+ exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
},
```
For webpack 2.x+:
```diff
{
test: /\.js$/,
loader: 'babel-loader',
- include: [resolve('src'), resolve('test')]
+ include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
}
```
1. Import all charts and components
```javascript
import IEcharts from 'vue-echarts-v3/src/full.js';
```
2. Import ECharts.js modules manually to reduce bundle size
```javascript
import IEcharts from 'vue-echarts-v3/src/lite.js';
// import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/pie';
// import 'echarts/lib/chart/scatter';
// import 'echarts/lib/chart/radar';
// import 'echarts/lib/chart/map';
// import 'echarts/lib/chart/treemap';
// import 'echarts/lib/chart/graph';
// import 'echarts/lib/chart/gauge';
// import 'echarts/lib/chart/funnel';
// import 'echarts/lib/chart/parallel';
// import 'echarts/lib/chart/sankey';
// import 'echarts/lib/chart/boxplot';
// import 'echarts/lib/chart/candlestick';
// import 'echarts/lib/chart/effectScatter';
// import 'echarts/lib/chart/lines';
// import 'echarts/lib/chart/heatmap';
// import 'echarts/lib/component/graphic';
// import 'echarts/lib/component/grid';
// import 'echarts/lib/component/legend';
// import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/polar';
// import 'echarts/lib/component/geo';
// import 'echarts/lib/component/parallel';
// import 'echarts/lib/component/singleAxis';
// import 'echarts/lib/component/brush';
import 'echarts/lib/component/title';
// import 'echarts/lib/component/dataZoom';
// import 'echarts/lib/component/visualMap';
// import 'echarts/lib/component/markPoint';
// import 'echarts/lib/component/markLine';
// import 'echarts/lib/component/markArea';
// import 'echarts/lib/component/timeline';
// import 'echarts/lib/component/toolbox';
// import 'zrender/lib/vml/vml';
```
## Using the component
```vue
Random
import IEcharts from 'vue-echarts-v3/src/full.js';
export default {
name: 'view',
components: {
IEcharts
},
props: {
},
data: () => ({
loading: true,
bar: {
title: {
text: 'ECharts Hello World'
},
tooltip: {},
xAxis: {
data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}),
methods: {
doRandom() {
const that = this;
let data = [];
for (let i = 0, min = 5, max = 99; i < 6; i++) {
data.push(Math.floor(Math.random() * (max + 1 - min) + min));
}
that.loading = !that.loading;
that.bar.series[0].data = data;
},
onReady(instance, ECharts) {
console.log(instance, ECharts);
},
onClick(event, instance, ECharts) {
console.log(arguments);
}
}
};
.echarts {
width: 400px;
height: 400px;
}
```
## Properties
* `styles`
Optional; CSS style is `{ width: 100%; height: 100%; }` by default.
* `initOpts` & `theme`
Optional; Used to initialize ECharts instance.
* `option` **[reactive]**
Used to update data for ECharts instance. Modifying this property will trigger ECharts' `setOptions` method.
* `group` **[reactive]**
Optional; This property is automatically bound to the same property of the ECharts instance.
* `notMerge`
Optional; `false` by default. [Detail](http://echarts.baidu.com/api.html#echartsInstance.setOption)
* `lazyUpdate`
Optional; `false` by default. [Detail](http://echarts.baidu.com/api.html#echartsInstance.setOption)
* `loading` **[reactive]**
Optional; `false` by default. Modifying this property will trigger ECharts' `showLoading` or `hideLoading` method.
* `loadingOpts`
Optional; [Detail](https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.showLoading)
* `resizable`
Optional; `false` by default.
See more [ECharts' Option](http://echarts.baidu.com/option.html)
## Instance Methods
* `resize`
* `update`
* `mergeOption`
* `dispatchAction`
* `convertToPixel`
* `convertFromPixel`
* `containPixel`
* `showLoading`
* `hideLoading`
* `getDataURL`
* `getConnectedDataURL`
* `clear`
## Static Methods
* `connect`
* `disConnect`
* `dispose`
* `getInstanceByDom`
* `registerMap`
* `getMap`
* `registerTheme`
Learn more [ECharts' API](http://echarts.baidu.com/api.html)
## Demo
[vue-echarts-v3-demo](https://github.com/xlsdg/vue-echarts-v3-demo)
# License
MIT