在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中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
javascript流程控制语句集合
Sep 18 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
微信小程序使用gitee进行版本管理
Sep 20 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 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生成16位随机数的代码(两种方法)
2014/09/16 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
详解vscode中vue代码颜色插件
2018/10/11 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
countUp.js实现数字滚动效果
2019/10/18 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python数据结构之二叉树的建立实例
2014/04/29 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python最基本的输入输出详解
2015/04/25 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python绘制规则网络图形实例
2019/12/09 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
中级会计职业生涯规划书
2014/03/01 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
农业项目投资意向书
2015/05/09 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
《观察物体》教学反思
2016/02/17 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js