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动态获取数据的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。