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

Posted 2021-12-29 iwishicould

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

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

2==>在当前的页面中使用axios  和   引入放在本地在static文件中的静态文件op.js    引入echarts

  import axios from ‘axios‘;
  import option from ‘../../../static/op.js‘  //将数据格式现在js文件中 等会将他暴露出去

   // 通过 npm 上安装的 ECharts 和  require(‘echarts‘) 得到 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();        
    ,

 

3==>在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]