https://github.com/abdullah/vue-echarts
Echarts for vue.js
https://github.com/abdullah/vue-echarts
Last synced: 4 months ago
JSON representation
Echarts for vue.js
- Host: GitHub
- URL: https://github.com/abdullah/vue-echarts
- Owner: abdullah
- Created: 2016-06-23T09:00:19.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-06-23T15:39:54.000Z (almost 10 years ago)
- Last Synced: 2025-09-16T20:48:49.413Z (9 months ago)
- Language: JavaScript
- Size: 1.51 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-echarts
> ECharts Components for Vue.js
## İnstallation
npm i -S v-echarts
[Demo](https://echart-vue.herokuapp.com/)
##Use
// Vue Template
//JS
import Echartsv from './components/Echartsv';
export default {
data () {
return {
option = {
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
legend: {
/*
TODO : Change show key
*/
show:false,
orient: 'vertical',
x: 'left',
data:['data-one','data-two']
},
series: [
{
name:'chart-name',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'data-one'},
{value:310, name:'data-two'},
]
}
]
}
}
},
//Register Component
components: {
Echartsv
}
}
//css
.chart-style{
width: 600px;
height: 300px;
float: none;
clear: both;
}
##Options
Option object is required so It can be referenced from [Echarts Library](https://ecomfe.github.io/echarts/doc/doc-en.html)
##Classname
Default classname `___charts___` this property `height: 400px;`
## Build Setup Development
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```