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动态获取数据
码云笔记 » vue中Echarts如何使用axios动态获取数据