vue中如何使用echarts,使用axios获取数据-白红宇的个人博客

发布日期：2021-05-25 01:14:32 浏览次数：18 分类：博客文章

本文共 1536 字，大约阅读时间需要 5 分钟。

1==》首先准备一个容器

2==>在当前的页面中使用axios

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

引入echarts

import axios from 'axios';

将数据格式放在js文件中 等会将他暴露出去

import {option} from '../../../static/op.js'

引入echarts模块

var echarts = require('echarts');

op.js文件如下，它黎曼是配置好了的参数

export const option = {    title: { text: '简单饼状图' },    tooltip: {},    xAxis: {        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],        name: '产品'    },    yAxis: {},    series: [{        name: '销量',        type: 'bar',        data: [],        itemStyle: {               normal: {              color: 'hotpink'            }        }    }]}

3==》在调用methods中写一个方法，在mounted中去调用

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

4==>在methods中写一个方法

methods:{      drawBarChart() {            // 基于准备好的dom，初始化echarts实例            var myChart = this.echarts.init(document.getElementById('echartContainer'));            // 绘制基本图表            myChart.setOption(option); //option是一个详细的配置参数                      //没有加载出来显示加载动画            myChart.showLoading();            //获取数据            axios.get('../../static/b.json').then(res => {                     setTimeout(()=>{  //未来让加载动画效果明显,这里加入了setTimeout,实现2s延时                    myChart.hideLoading(); //没有加载出来隐藏加载动画                    myChart.setOption({  //动画的配置                        series: [{                        data: res.data.product  //这里数据是一个数组的形似                        }]                    })                    }, 2000 )            })            },

b.json的参数也是如下的

{    "product" : [5, 20, 36, 10, 10, 20]}

上一篇：vue之tab切换

下一篇：vue全局路由守卫beforeEach+token验证+node

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章