在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 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
深入了解JavaScript代码覆盖
Jun 13 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
Js类的构建与继承案例详解
Sep 15 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/11/06 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
解决DataFrame排序sort的问题
2018/06/07 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python多任务之协程的使用详解
2019/08/26 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
养殖行业的创业计划书
2014/01/05 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
导游词之吉林吉塔
2019/11/11 职场文书