vue可视化基本案例

可视化

一、环境

安装node

安装vscode

安装vue

在vscode的终端中

Npm install -g @vue/cli    //安装脚手架

在文件夹中创建工程

Vue create vue01

二、数据的收集与处理

1、下载echarts\axios

在终端中

Npm install –-save echarts

Npm install axios -g

2、进入创建的工程内，引入echarts\axios

import * as echarts from "echarts"

import axios from 'axios'

3、创建一个模块，

export default { }

写一个全局变量，用来存放坐标轴的数据

data(){

    return{

        allData:[],

        x_data:[], // 存放x轴数据

        y_data:[] // 存放y轴数据

    }

},

4、axios获取jar包信息

mounted(){

 

    axios({

            method:'post',

            url:'.......',

            data:{

               ..................................

            }

        }).then((result) => {

            //将数据存储在allData中

            this.allData=result.data.data

            this.processData()

             //打印台打印allData，查看是否成功

            console.log(this.allData)

        }).catch((err) => {

            console.log(err)

        })

       

    },

5、解决跨域问题

在本工程内的vue.config.js文件中添加

module.exports = {

  devServer:{

    proxy:{

      '/api':{

        target:'http://localhost:8089/',

        changeOrigen:true,

        pathRewrite:{

          '/api':''

        }

      }

    }

  }

}

6、在methods中创建一个方法，处理数据，最基本的方法有：

//筛选出需要的字段和内容

  const arr = this.allData.map(d => ({userName:d.userName, finalTotalAmount:d.finalTotalAmount}));

//相同数据相加

  const result = arr.reduce((acc,curr) => {

    //使用find方法查找

    const exis = acc.find(item =>item.userName == curr.userName );

    if (exis) {

      exis.finalTotalAmount += curr.finalTotalAmount;

    }else {

      acc.push(curr);

    }

    return acc;

  }, [])

 

  console.log(result)

//筛选年龄大于20的

  const filterdata = result.filter(f=>(f.finalTotalAmount>=0))

  console.log(filterdata);

//升序取前二

  filterdata.sort((a,b)=>{return a.finalTotalAmount-b.finalTotalAmount})

  let result1 = filterdata.slice(0,2);

到这里处理好的数据都放到了result1中，现在就可以用echarts来将数据可视化了

三、数据的可视化

7、初始化echarts，将数据插入到横纵坐标

let myCharts=echarts.init(this.$refs.myCharts)

      let xData=result1.map(d => d.userName);

      let yData=result1.map(d => d.finalTotalAmount);

8、设置柱状图的参数

//设置参数

      myCharts.setOption({

          title:{

              text:"hello word"

         

          },

       xAxis:{

          data:xData,

         

        },

       yAxis:{

         

         

          type:"value"

       },

       tooltip:{

          trigger:"item"

       },

       

       series:{//系列

         name:"牛皮",

         type:"bar",

         data:yData,

         markLine:{

          data:[{

            type:"average",

            name:"平均值"

         }],

         

         },

         markPoint:{

          data:[{

            type:"min",

            name:"最小值"

          },

          {

            type:"max",

            name:"最大值"

          }

        ]

         }

       }

      })

},

9、创建一个盒子，并设置其样式

因为是前端的内容记得先创建一个盒子以及创建盒子的样式不然无法实现效果

10、将内容引入到入口中

<template>

  <HelloWorld/>

 

</template>

<script setup>

import HelloWorld from './components/HelloWorld.vue';

</script>

11、启动！

终端中启动jar包并且启动项目

Java -jar ….

Npm run serve

以上是最简单的利用axios获取数据并处理的柱状图的可视化例子，