在vue中通过axios异步使用echarts的方法_为什么axios赋值的变量echars没用 - CSDN文库

152 浏览量更新于2023-05-15 评论 1 收藏 69KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

在在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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38707217

粉丝: 3
资源: 903

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈