正确安装使用vue-echarts

截至目前2016年8月11日04:06,vue-echarts的github源是旧代码,NPMJS上的才是最新的代码。
两边的文档有使用差异,遂记录下,防止再次踩坑。


首先通过npm安装vue-echarts。

引用组件:(使用了vue-loader才能这样引用)

import VueCharts from 'vue-echarts/src/components/ECharts.vue';  

图表配置&注册组件:

export default{  
……
data(){  
    return{
        chartsoption:{}
    }
},
//个人习惯,喜欢先在data设置一个空变量,再在created中设置该变量
created:function(){  
    this.$set('chartsoption',{……});
}
components:{  
//注册组件
'charts':VueCharts  
}
……
}

在template中插入组件:

 <echarts :options="chartsoption"></echarts>

可选:

为组件设置样式:

<template>  
 <echarts :options="chartsoption" class="chart"></echarts>
</template>  
<style>  
//一定要important,不要问我为什么
    .chart {
        width: 100% !important;
        height: 400px !important;
    }
</style>  

头图PixivID 56278672