之前使用的angular8 框架，其中的ngx-echarts使用起来颇为方便，如今在使用vue的时候发现，并没有找到类似的组件，v-echarts用起来虽说也还可以，但是配置参数却是与echarts有所差异，习惯了用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文件夹中创建一个文件 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>