vue 使用 创建二维数组响应数据 渲染 echarts图标

目前我遇到的情况就是用动态的二维数组数据渲染echarts图标,我们从后端收到的接口一般是个一维数组,需要手动构建并且保证响应式。接下来我做了个案例

一、案例总逻辑

1. 先创建一个vue项目

2. 添加 echarts依赖

3. 模拟数据请求,构建二维数组响应式数据,渲染图表

二、创建一个vite项目(也就是vue项目,但使用的是vite而不是webpack)

1.找到打开vite官网
vue 使用 创建二维数组响应数据 渲染 echarts图标_第1张图片

2. 运行创建命令

yarn create vite

vue 使用 创建二维数组响应数据 渲染 echarts图标_第2张图片

3. 执行yarn install安装项目依赖,之后执行行yarn dev运行项目

vue 使用 创建二维数组响应数据 渲染 echarts图标_第3张图片

三、添加echarts依赖

 1. 搜索echarts官网
vue 使用 创建二维数组响应数据 渲染 echarts图标_第4张图片

 2. 添加依赖

yarn add echarts

三、 模拟数据请求,构建二维数组响应式数据,渲染图表

这里有两个问题值得注意
1. 处理二维数组
2. 异步请求数据:我目前的解决办法是,等数据请求完成再渲染图标。 当然也有第二种方式,就是向渲染空表,等待数据过来后,再执行一次 setOption

 






你可能感兴趣的:(Vue,vue.js,echarts,前端)