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 动态获取数据的全部内容,欢迎大家交流。

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue中Echarts如何使用axios动态获取数据

发表回复