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