vue-echarts

ECharts Components for Vue.js

İnstallation

npm i -S v-echarts

Demo

Use

// Vue Template

<Echartsv classname="chart-style" :options.sync="options"></Echartsv>

//JS
import Echartsv from './components/Echartsv';

export default {
   data () {
    return {
         option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{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

Classname

Default classname ___charts___ this property height: 400px;

Build Setup Development

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build