通过axios技术获取接口数据并处理后，再由基于vue的echarts可视化渲染（完全步骤）

前言：满足一些日常开发要求，或者比赛要求而制定的，首先进行接口获取数据，再进行数据的预处理，最后再进行图表渲染，

1.基础前置：

1.1 技术基础 

• html5/css/javascript
• vue 3.0
• echarts 5.1
• axios 1.6

1.2 工具

• Visual Studio Code

2.大体操作步骤：

1. 在vscode上创建vue脚手架工程
2. 通过接口获取数据（axios）
3. 再获取到的数据进行处理
4. 将处理完的数据进行echarts图表渲染
5. 总结（附总代码参考及运行结果）

3.具体操作步骤

    1.在vscode上创建vue脚手架工程

       1.1 由node去下拉vuecli脚手架（未安装node的请查看文章：安装npm）

     

         1.2 创建vue项目命令：vue create test3

                        

       然后用vscode打开该vue工程

      2.通过接口获取数据（axios）

         2.1 首先先打开vscode终端（快捷键Ctrl+`）,下载axios组件

               npm install axios (实现跨域请求)

          

         

          2.2  引入库代码如下：

import axios from 'axios'     //引入库 

         2.3 配置代理服务器

             在vuecli的工程脚手架项目中找到vue.config.js文件，有则打开，无则新     

2.4  配置代理服务器，代码如下：（注意配置的网址）

module.exports = {
    
    devServer: {
      proxy: 'http://192.168.23.51:8999'  //配置代理服务器（域名和端口为被请求方的）
    }
  }

 注意：配置完后必须重新启动vuecli脚手架服务才会生效！！！

 2.4 发送请求

    2.5  页面控制台输出（请求成功）

 到这里axios跨域请求就成功了，想看详细步骤的可看文章：axios跨域请求

 3.获取到的数据进行处理

按照题目要求，假设题目是：柱状图展示2020年消费额最高的5个省份

然后代码实现

 //数据处理
        culdata(dataArray) {
            let dataMap = new Map() //准备一个map容器

            for (let index in dataArray) {
                let finalTotalAmount = dataArray[index].finalTotalAmount  //取出金额
                let provinceName = dataArray[index].provinceName   //取出省名称
                if (dataMap.has(provinceName)) {  //如果存在则相加
                    dataMap.set(provinceName, dataMap.get(provinceName) + finalTotalAmount)
                } else {  //如果不存在则是第一个，直接存
                    dataMap.set(provinceName, finalTotalAmount)
                }
            }
            let newarr = Array.from(dataMap).sort((a, b) => b[1] - a[1]).slice(0, 5)
            console.log(newarr)


            //声明两个数组进行接收
            let yAxisdata = []
            let xAxisdata = []
            //将处理后的数据进行拆解
            for (let [k, v] of newarr) {
                yAxisdata.push(k)
                xAxisdata.push(v)
            }
            //最后将处理好的数据以对象形式进行返回
            console.log(yAxisdata)
            console.log(xAxisdata)
            // return { ydata: yAxisdata, xdata: xAxisdata }
            return [yAxisdata,xAxisdata]

        },

4.将处理完的数据进行echarts图表渲染

 setEcharts(){
        let x_data= this.Alldata[0]
        let y_data= this.Alldata[1]      //获取处理好的数据进行渲染
        console.log("123123",x_data)
    
        let echarts1 =  echarts.init(this.$refs.barone)
       
        echarts1.setOption({
            title:{
                text:"最高的5个省份"    //设置标题
            },
            tooltip:{
                tragger:'axis'
            },
            legend:{},      //图例
            
            xAxis:{
                type:'category',
                data:x_data
            },
            yAxis:{
                type:'value'
            },
            series:[{      //设置系列
                name:'柱状图最高的5个省份',
                type:'bar',
                data:y_data,                
            }]
        })
        }
    },

5.总结

   根据接口获取数据后按照题目要求进行处理最后以图表形式展现在页面

附全代码参考与运行结果：

运行结果：