您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

vue中如何使用echarts,使用axios获取数据

1==》首先准备容器

  <div id="echartContainer" style="width:400px; height:400px"></div> <!--创建echarts的容器-->

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

     引入放在本地在static中的op.js

     引入echarts

import axios from 'axios';
将数据格式放在js中 等会将他暴露出去
import {option} from '../../../static/op.js'
 

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

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

 

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,20]
}

 

     


联系我
置顶