vue中Echarts如何使用axios动态获取数据

由于疫情的原因可能很多小伙伴还是在家办公,当然小编也一样,在家办公。正好今天在做公司项目时用到了Echarts,写demo的时候我们在用静态数据可能大家都会,但是如果和后端交互,通过axios动态加载数据有些新人小伙伴可能一时不知如何下手,所以特意整理一篇自己的笔记,为大家提供帮助,推荐大家阅读我之前的一篇文章《如何在 Vue 项目中使用百度Echarts.js

好了,废话不多说,直接上代码。

首先准备一个容器

<div id="echartContainer" style="height:200px"></div>

在当前的页面中使用axios,可以全局引用也可以在当前页面调用。

引入放在本地在static文件中的静态文件options.js

引入echarts

import axios from 'axios';

将数据格式放在js文件中 等会将他暴露出去
import {option} from '../../../static/options.js'

引入echarts模块
let echarts = require('echarts');

options.js文件是Echarts配置的相关参数,代码如下:

export const option = {
    title: {
        text: '数据处理统计',
        subtext: '虚构数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b} : {c} ({d}%)'
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['未处理占比', '已处理占比']
    },
    series: [
        {
            name: '21',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

在methods中写一个方法,这里再获取数据的axios方法是我自己根据项目封装的,大家可以直接换成你自己的axios方法。如下:

drawBarChart() {
  // 基于准备好的dom,初始化echarts实例
  var myChart = this.$echarts.init(document.getElementById('echartContainer'));
  // 绘制基本图表
  myChart.setOption(option); //option是一个详细的配置参数          
  //没有加载出来显示加载动画
  myChart.showLoading();
  //获取数据
  new HttpClient({
  responseResultKey:{
    code:"status",
    data:"data",
    message:"error_code"
  },
  successCode:[200]
  })
  .get('/data/option.json',{})
  .subscribe(({result,response,isSuccess})=>{
    console.log(result)
    setTimeout(()=>{  //未来让加载动画效果明显,这里加入了setTimeout,实现2s延时
      myChart.hideLoading(); //没有加载出来隐藏加载动画
      myChart.setOption({  //动画的配置
          series: [{
          data: result
          }]
      })
      }, 2000 )
  })
}

然后在在mounted中去调用在methods写的drawBarChart方法

mounted() {
   // 调用这个函数  在节点创建完成之后
   this.drawBarChart();        
},

option.json的参数也是如下

{
    "error_code": 0,
    "status": 200,
    "data":[
        {
            "value": 535,
             "name": "未处理占比"
        },
        {
            "value": 510,
            "name": "已处理占比"
        }
    ]
}

到此结束,最后附上效果图:

vue中echarts如何使用axios动态获取数据

结束语

以上就是今天码云笔记小编为大家整理的vue中echarts如何使用axios动态获取数据的全部内容,欢迎大家交流。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » vue中Echarts如何使用axios动态获取数据

发表评论