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

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

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

1. 创建一个div,行内样式定义其宽高
在这里插入图片描述
2.引入Echarts
Vue项目中添加Echarts图(包括接口数据)详解_第1张图片
我这里使用了let (项目需求),也可以使用import,大家根据自己的需求导入即可
3.静态数据引入
静态数据大家可以前往Echarts官网,选择自己需要的echarts图。官网地址:https://echarts.apache.org/examples/zh/index.html#chart-type-bar
在methods中添加静态数据
Vue项目中添加Echarts图(包括接口数据)详解_第2张图片

4. 数据接口引入
关于数据接口,在度娘上找了很多很多,有人说使用Ajax,有人说使用axios,其实接口使用哪种方式并不重要,只有能获取到数据,都是可以的。
Vue项目中添加Echarts图(包括接口数据)详解_第3张图片
5. 数据初始化
当然,你数据啥的都整好了,是不是该让它在页面刷新的时候显示出来?这个时候就要用到我们的mounted啦(相当于js中的window.onload)
在这里插入图片描述
终于实现了
Vue项目中添加Echarts图(包括接口数据)详解_第4张图片

你可能感兴趣的:(Echarts,vue,vue,echarts)