Vue项目中添加Echarts图(包括接口数据)详解

Vue项目中添加Echarts图(包括接口数据)详解关于在Vue项目中添加Echarts，经过反复推敲，数据终于出来了，以下是我的详细步骤：1. 创建一个div,行内样式定义其宽高2.引入Echarts我这里使用了let （项目需求），也可以使用import，大家根据自己的需求导入即可3.静态数据引入静态数据大家可以前往Echarts官网，选择自己需要的echarts图。官网地址：https://

shimily_liu

2790人浏览 · 2021-07-20 11:31:57

shimily_liu · 2021-07-20 11:31:57 发布

Vue项目中添加Echarts图(包括接口数据)详解

关于在Vue项目中添加Echarts，经过反复推敲，数据终于出来了，以下是我的详细步骤：

1. 创建一个div,行内样式定义其宽高
在这里插入图片描述
2.引入Echarts

我这里使用了let （项目需求），也可以使用import，大家根据自己的需求导入即可
3.静态数据引入
静态数据大家可以前往Echarts官网，选择自己需要的echarts图。官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-bar
在methods中添加静态数据
在这里插入图片描述

4. 数据接口引入
关于数据接口，在度娘上找了很多很多，有人说使用Ajax，有人说使用axios,其实接口使用哪种方式并不重要，只有能获取到数据，都是可以的。
在这里插入图片描述
5. 数据初始化
当然，你数据啥的都整好了，是不是该让它在页面刷新的时候显示出来？这个时候就要用到我们的mounted啦（相当于js中的window.onload）

终于实现了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^