美文网首页vue
vue-echarts基本使用

vue-echarts基本使用

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-08-26 14:52 被阅读0次

    vue-echarts介绍:https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.md

    注意:vue-echarts在使用前要先安装echarts,不要只安装vue-echarts这一个

    安装vue-echarts

    此版本为"vue-echarts": "^6.0.2","echarts": "^5.3.1"

    此版本为"vue-echarts": "^6.0.2","echarts": "^5.3.1"

    cnpm i -S vue-echarts echarts

    注意:Vue 2 下使用 vue-echarts,必须还要安装 @vue/composition-api :

    cnpm i -D @vue/composition-api

    可以全局注入

    import  'echarts'

    import  ECharts from 'vue-echarts'

    Vue.component('v-chart', ECharts)

    也可以单页面使用

    基本使用

    自适应屏幕

    方式1:autoresize:true  【推荐】

    该方式自适应需满足两个条件:

    加上autoresize属性。

    图表外层需要指定vw单位的宽度,如width:100vw;

    loading效果:

    配置样式 

    官网样式:https://echarts.apache.org/zh/download-theme.html

    如:macarons、dark  、vintage、infographic、shine、roma

    相关文章

      网友评论

        本文标题:vue-echarts基本使用

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