之前使用的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>