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