统计图表 - VueEcharts

5.48.1.快速使用
图表是 echarts 5.x ，以及 vue 组件 ecomfe/vue-echarts ，使用示例：

运行代码 新窗口打开
5.48.2.设置主题
EleAdminPlus 还提供了两套好看的 echarts 主题，可以通过 provide 给 VChart 组件设置主题：

运行代码 新窗口打开
5.48.3.自适应尺寸
增加 autoresize 即可开启自适应尺寸，例如实现一个可自由拉伸宽高的图表：

运行代码 新窗口打开
  属性 autoresize 会实时监控元素的宽高变化自动更新图表尺寸，方便的同时也会带来性能的消耗， 实际项目一般图表的容器尺寸都是固定的，只会在侧栏折叠展开以及浏览器窗口大小改变后才会变化， 所以在 src/utils/use-echarts.js 中封装了只在侧栏折叠展开和浏览器窗口大小改变后重置 echarts 尺寸， 以及自动跟随切换到暗黑主题等操作，使用示例：

运行代码 新窗口打开
如果只需要自动重置尺寸不需要自动切换主题可以单独使用 src/utils/use-body-resize.js ，使用示例：

运行代码 新窗口打开
5.48.4.监听事件
组件 v-chart 是可以直接使用 @xxx 来监听 echarts 的事件的，示例：

运行代码 新窗口打开
5.48.5.使用词云
词云可以使用 echarts-wordcloud 插件，使用示例：

运行代码 新窗口打开
词云也可以增加 ref 使用 useEcharts 或 useBodyResize 自动切换暗黑模式主题和重置尺寸。
5.48.6.使用地图
使用地图需要先用地图的轮廓数据给 echarts 注册地图(轮廓数据放在 public 下)，使用示例：

获取地图轮廓数据接口的请求代码如下：
import request from '@/utils/request';
const BASE_URL = import.meta.env.BASE_URL;

/** 获取中国地图 geo 数据 */
export async function getChinaMapData() {
const res = await request.get(
BASE_URL + 'json/china-provinces.geo.json',
{ baseURL: '' }
);
if (res.data) {
return res.data;
}
return Promise.reject(new Error('获取地图数据失败'));
}
运行代码 新窗口打开