vue-echarts基本使用
2022-08-26 本文已影响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