在vue中通过axios异步使用echarts的方法


Posted in Javascript onJanuary 13, 2018

现实的工作中, 数据不可能是像之前的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
  console.log(this.goods);
  console.log(Array.from(this.goods.xAxis.data));
  })
 },
 methods: {
  drawLine() {
  // 基于准备好的dom,初始化echarts实例
  let myChart = this.$echarts.init(document.getElementById('myChart'))
  // 绘制图表
  myChart.setOption({
   title: {}, //{text: '异步数据加载示例'},
   tooltip: {},
   xAxis: {
   data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
   },
   yAxis: {},
   series: [{
   name: '销量',
   type: 'bar',
   data: [] //[5, 20, 36, 10, 10, 20]
   }]
  });
  this.$http.get("./static/dat.json") .then((res) => {
   const data = res.data;
   const list = data.series.map(good=>{
     let list = good.data;
     return [...list]
    })
    console.log(list);
    console.log(Array.from(...list));
   myChart.setOption({
    title: data.title,
    xAxis: [{
    data: data.xAxis.data
    }],
    series: [{
    name: '销量',
    type: 'bar',
    data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
    }]
   });
   })
  }
 }
 }
</script>

在vue中通过axios异步使用echarts的方法

二. 添加加载动画

如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

在drawLine()方法中添加showLoading()和hideLoading(), 代码如下:

methods: {
  drawLine() {
  // 基于准备好的dom,初始化echarts实例
  let myChart = this.$echarts.init(document.getElementById('myChart'))
  // 绘制图表
  myChart.setOption({
   title: {}, //{text: '异步数据加载示例'},
   tooltip: {},
   xAxis: {
   data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
   },
   yAxis: {},
   series: [{
   name: '销量',
   type: 'bar',
   data: [] //[5, 20, 36, 10, 10, 20]
   }]
  });
  //显示加载动画
  myChart.showLoading();

  this.$http.get("./static/dat.json").then((res) => {
   setTimeout(() => { //未来让加载动画效果明显,这里加入了setTimeout,实现3s延时
   const data = res.data;
   const list = data.series.map(good => {
    let list = good.data;
    return [...list]
   })
   console.log(list);
   console.log(Array.from(...list));
   myChart.hideLoading(); //隐藏加载动画
   myChart.setOption({
    title: data.title,
    xAxis: [{
    data: data.xAxis.data
    }],
    series: [{
    name: '销量',
    type: 'bar',
    data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
    }]
   });
   }, 3000)
  })
  }
 }

在vue中通过axios异步使用echarts的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
简单分析javascript中的函数
Sep 10 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 #Javascript
javascript用rem来做响应式开发
Jan 13 #Javascript
深入理解ES6之数据解构的用法
Jan 13 #Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 #Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 #Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 #Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 #Javascript
You might like
有关PHP性能优化的介绍
2013/06/20 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
php-fpm中max_children的配置
2019/03/15 PHP
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python版百度语音识别功能
2019/07/09 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
人民检察院起诉书
2015/05/20 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
在Python中如何使用yield
2021/06/07 Python
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android