美文网首页
Vue导入echarts的方法

Vue导入echarts的方法

作者: 一学就会的小天才 | 来源:发表于2021-01-04 13:58 被阅读0次

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

相关文章

网友评论

      本文标题:Vue导入echarts的方法

      本文链接:https://www.haomeiwen.com/subject/jkcvoktx.html