在在vue中通过中通过axios异步使用异步使用echarts的方法的方法
本篇文章主要介绍了在vue中通过axios异步使用echarts的方法，小编觉得挺不错的，现在分享给大家，也给大
家做个参考。一起跟随小编过来看看吧
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文
章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数
据。
一、一、 实现异步加载数据实现异步加载数据
(一一)引入引入vue-resource
通过npm下载axios
//命令行中输入
npm install axios --save
在main.js中引入axios并注册
// main.js
import http from './http'
Vue.prototype.$http = http //挂载到原型上
(二二)设置设置data.json
将该柱状图的没有数据的option抽取到data.json中, 代码如下:
{
"title": { "text": "简单饼状图" },
"tooltip": {},
"xAxis": {
"data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
"name": "产品"
},
"yAxis": {},
"series": [{
"name": "销量",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20],
"itemStyle": {
"normal": {
"color": "hotpink"
}
}
}]
}
(三三)在在async-bar-chart.vue中请求数据中请求数据
1. 从aysnc-barChart-option.js中引入option
2. 在methods中添加drawBarChart()方法
3. 在mounted()钩子函数中调用drawBarChart()
代码如下:
<template>
<div id="myChart" :style="{width: '800px', height: '400px'}"></div>
</template>
<script>
export default {
name: 'echarts',
data() {
return {
msg: 'Welcome to Your Vue.js App',
goods: {}
}
},
mounted() {
this.drawLine();
},
created() {
this.$http.get('./static/dat.json').then(res => {
const data = res.data;
this.goods = data
weixin_38707217
- 粉丝: 3
- 资源: 903
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- Xilinx SRIO详解.pptx
- Informatica PowerCenter 10.2 for Centos7.6安装配置说明.pdf
- 现代无线系统射频电路实用设计卷II 英文版.pdf
- 电子产品可靠性设计 自己讲课用的PPT，包括设计方案的可靠性选择，元器件的选择与使用，降额设计，热设计，余度设计，参数优化设计 和 失效分析等
- MPC5744P-DEV-KIT-REVE-QSG.pdf
- 通信原理课程设计报告（ASK FSK PSK Matlab仿真--数字调制技术的仿真实现及性能研究）
- ORIGIN7.0使用说明
- 在VMware Player 3.1.3下安装Redhat Linux详尽步骤
- python学生信息管理系统实现代码
- 西门子MES手册 13 OpcenterEXCR_PortalStudio1_81RB1.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0