之前使用的angular8 框架奕短,其中的ngx-echarts使用起來頗為方便,如今在使用vue的時候發(fā)現(xiàn)匀钧,并沒有找到類似的組件翎碑,v-echarts用起來雖說也還可以,但是配置參數(shù)卻是與echarts有所差異榴捡,習(xí)慣了用echarts的配置杈女,用v-echarts倒是有點麻煩,隨著echarts5版本的上線吊圾,v-echarts還停留在4版本上面,也是比較麻煩翰蠢,于是便自己造了個輪子项乒,原汁原味的保留里echarts的配置,熟悉echarts配置的小伙伴梁沧,也是可以直接上手使用的了檀何,閑話不多說,下面步入正題
1廷支、下載echarts频鉴,scyecharts
npm i --save echarts scyecharts
npm i --save element-resize-detector
2、全局引入恋拍,在根目錄中找到main.js文件
import * as echarts from 'echarts';
import scyEcharts from 'scyecharts';
Vue.prototype.$echarts = echarts; // 引入echarts
Vue.use(scyEcharts);
3垛孔、echarts的使用,在compontents文件夾中創(chuàng)建一個文件 helloworld.vue
<template>
<div>
<scy-echarts width="100%" height="300px" :options="option"></scy-echarts>
</div>
</template>
<script>
export default {
data(){
return {
option: {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
}
}
}
}
</script>