vue-echarts基本使用

 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"

cnpm i -S vue-echarts echarts

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

cnpm i -D @vue/composition-api

main.js中全局注册组件

import 'echarts'
import ECharts from 'vue-echarts'
Vue.component('VueEcharts', ECharts)

 查看

基本使用

自适应屏幕

方式1：autoresize:true  【推荐】

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

1. 加上autoresize属性。
2. 图表外层需要指定vw单位的宽度，如width：100vw;

方式二：给window注册resize监听事件

loading效果：

配置样式 

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

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

引入Echarts内置样式

 Echarts内置了很多样式，在使用时需手动导入指定的样式。

自定义主题样式：

配置主题地址：https://echarts.apache.org/zh/theme-builder.html

 注意这里下载json版本。js版本没有引入成功

 给当前vue页面中的所有图表注册样式：