vue中如何使用echarts,使用axios获取数据
1==》首先准备一个容器
- <div id="echartContainer" style="width:400px; height:400px"></div> <!--创建一个echarts的容器-->
2==>在当前的页面中使用axios
引入放在本地在static文件中的静态文件op.js
引入echarts
- import axios from 'axios';
- 将数据格式放在js文件中 等会将他暴露出去
- import {option} from '../../../static/op.js'
op.js文件如下,它黎曼是配置好了的参数
- export const option = {
- title: { text: '简单饼状图' },
- tooltip: {},
- xAxis: {
- data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
- name: '产品'
- },
- yAxis: {},
- series: [{
- name: '销量',
- type: 'bar',
- data: [],
- itemStyle: {
- normal: {
- color: 'hotpink'
- }
- }
- }]
- }
3==》在调用methods中写一个方法,在mounted中去调用
- mounted() {
- // 调用这个函数 在节点创建完成之后
- this.drawBarChart();
- },
4==>在methods中写一个方法
- methods:{
- drawBarChart() {
- // 基于准备好的dom,初始化echarts实例
- var myChart = this.echarts.init(document.getElementById('echartContainer'));
- // 绘制基本图表
- myChart.setOption(option); //option是一个详细的配置参数
- //没有加载出来显示加载动画
- myChart.showLoading();
- //获取数据
- axios.get('../../static/b.json').then(res => {
- setTimeout(()=>{ //未来让加载动画效果明显,这里加入了setTimeout,实现2s延时
- myChart.hideLoading(); //没有加载出来隐藏加载动画
- myChart.setOption({ //动画的配置
- series: [{
- data: res.data.product //这里数据是一个数组的形似
- }]
- })
- }, 2000 )
- })
- },
b.json的参数也是如下的
- {
- "product" : [5, 20, 36, 10, 10, 20]
- }
vue中如何使用echarts,使用axios获取数据的更多相关文章
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vueX、vue中transition的使用、axios
引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!
- vue中如何使用echarts
在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新 主要是以下几步: echarts的option配置项放在在data(){}或者computed(){}中 在 ...
- vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)
两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...
- 【4】axios 获取数据
API:https://www.kancloud.cn/yunye/axios/234845 基于axios进行二次封装 安装axios npm install axios --save 安装成功 [ ...
- vue中的iviewUI导出1W条列表数据每次只导出2000条的逻辑
导出弹窗的html <template> <Modal v-model="exportModal" width=400 :closable="false ...
- VUE中父组件向子组件传递数据 props使用
VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...
- PHP中使用CURL模拟登录并获取数据实例
cURL 是一个功能强大的PHP库,使用PHP的cURL库可以简单和有效地抓取网页并采集内容,设置cookie完成模拟登录网页,curl提供了丰富的函数,开发者可以从PHP手册中获取更多关于cURL信 ...
- 解决Vue中文本输入框v-model双向绑定后数据不显示的问题
前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...
随机推荐
- 设置API:wx.openSetting,wx.getSetting使用说明(示例:地图授权与取消授权后的重新授权)
这个API解决了过去一个长久以来无法解决的问题,如何让用户重复授权: 打开小程序的设置界面:就是主动调取授权 目前资料极少,但是已经可以让大家先看看了: 官方文档地址:https://mp.weixi ...
- Makefile 文件格式;makefile伪目标
Makefile包含 目标文件.依赖文件.可运行命令三部分. 每部分的基本格式例如以下: test: prog.o code.o gcc -o test prog.o code.o 当中 ...
- Acwing43 不分行从上往下打印二叉树
地址 https://www.acwing.com/problem/content/description/41/ 从上往下打印出二叉树的每个结点,同一层的结点按照从左到右的顺序打印. 样例 输入如下 ...
- c++用控制符控制输出格式
#include<iostream> #include<cstdio> #include<iomanip> using namespace std; int mai ...
- 《Java面试全解析》505道面试题详解
<Java面试全解析>是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了. 我本人是 ...
- HTML连载50-伪元素选择器、清除浮动方式五
一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...
- php date获取前一天的时间
结果: 结论: 第二种方式只使用了一个函数,所以更快一些,速度大约是第一种的两倍
- python接口自动化11-pytest入门
前言 pytest是一个非常成熟的全功能的Python测试框架,适合从简单的单元到复杂的功能测试,主要特点有以下几点: 简单灵活,容易上手: 支持参数化: 能够支持简单的单元测试: 标记测试功能与属性 ...
- PHP判断设备访问来源
/** * 判断用户请求设备是否是移动设备 * @return bool */ function isMobile() { //如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (is ...
- HttpClient 如何设置超时时间
今天分享一个巨坑,就是 HttpClient.这玩意有多坑呢?就是每个版本都变,近日笔者深受其害. 先看一下代码,我要发送请求调用一个c++接口. public static String doPos ...