Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/panteng/vue-echarts
A simple yet flexible custom directive for using Echarts in Vue.js(v2.x.x) apps.
https://github.com/panteng/vue-echarts
echarts vuejs
Last synced: 28 days ago
JSON representation
A simple yet flexible custom directive for using Echarts in Vue.js(v2.x.x) apps.
- Host: GitHub
- URL: https://github.com/panteng/vue-echarts
- Owner: panteng
- Created: 2016-03-02T04:27:54.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-03T10:17:14.000Z (about 6 years ago)
- Last Synced: 2024-11-02T18:41:34.431Z (about 1 month ago)
- Topics: echarts, vuejs
- Language: JavaScript
- Homepage: https://panteng.github.io/vue-echarts
- Size: 527 KB
- Stars: 201
- Watchers: 10
- Forks: 42
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-echarts - vue-echarts - A custom directive for using Apache ECharts in Vue.js apps. (Frameworks / Vue Component)
README
# Vue-Echarts
A simple yet flexible custom directive for using [Echarts](http://echarts.baidu.com/) in Vue.js(v2.x.x) apps.
![banner](https://raw.githubusercontent.com/panteng/vue-echarts/master/banner.jpg)
## Demo
[Click Here](http://panteng.github.io/vue-echarts)## Usage
1. Install via npm:
npm install vue-echarts-directive --save
2. Register Vue-Echarts as a directive in your Vue.js app:
// this is your main.js file
import Vue from 'vue';
import V_Echarts from 'vue-echarts-directive';const App = new Vue({
...
directives: {
'echarts': V_Echarts
}
...
}3. Echarts need a dom element to draw charts. You can use a `
` for that. Make sure you give a proper width and height for this ``.// this is your index.html file
// this is your style.css file
.chart {
width: 100%;
height: 400px;
}4. Add `v-echarts` directive to this `div`. And assign an object of Echarts options to `v-echarts`. This object should be defined in your main.js file.
// this is your index.html file
// this is your main.js file
...
const App = new Vue({
...
data: {
barChartOptions: {
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
name: 'Num',
type: 'bar',
data: [5, 20, 36, 10, 10]
}
]
}
}
...
}At this point, you should see a beautiful bar chart in your browser.
5. For dynamic data updating, you need to reassign a new object of Echarts options to the variable `barChartOptions`, EVERY TIME when there's an update in data.
Don't modify the old `barChartOptions` object, that won't trigger reactivity in Vue, thus Echarts won't update the chart. See the code in main.js file of this repo for more details.6. If you need to access an Echarts instance, you can do it by:
// this is your main.js file
...
mounted: function () {
const barChartElement = document.querySelector('#this-is-bar-chart');
console.log(barChartElement.echartsInstance);
// you can access an Echarts instance at the `mounted` stage of the parent VM,
// by accessing the `echartsInstance` property of the element
// that v-echarts directive is bind with
}
...## License
MIT