利用Echarts--针对图表的数据处理

 在使用之前,需要利用 Echarts官网 (依据自己所需的图表及内容属性 : 需要自己处理) 最后封装函数 再利用数据处理配合图表达到效果

 柱状图:

//点击第几次成绩 , 在图标中渲染
const lis = document.querySelectorAll('#batch li')
// for (let i = 0; i < lis.length; i++) {
//   lis[i].addEventListener('click',function () {
//     console.log(i)
//   })
// }

lis.forEach((item, index) => {
  item.addEventListener('click', function () {
    //console.log(index)

    //发送ajax请求
    axios({
      url: `/score/batch?batch=${index + 1}`,
      method: 'get',
    }).then(({ data: res }) => {
      //成功回调
      //console.log(res)

      //判断业务状态码
      if (res.code == 0) {
        //把 res.data 中的数据, 渲染到 柱形图的表中去 (函数调用)
        setBar(res.data)
      }
    })
  })
})

//页面加载的时候 , 触发第一个li标签的点击事件
lis[0].click()

 在函数中传参处理数据,

折线图: 

 在折线图中显示,名字,期望薪资,实际薪资

实现方法:

//需要从 res.data 中组合出三个数组, 姓名, 期望薪资, 实际薪资
    const lineData = { //定义一个对象,里面放三个属性 , 每一个属性是一个数组
      name: [],
      salary: [],
      truesalary: []
    }

    //遍历 res.data(所有的学生信息) 把姓名,期望薪资,实际薪资放入指定的数组中
    res.data.forEach(item => {
      lineData.name.push(item.name)
      lineData.salary.push(item.salary)
      lineData.truesalary.push(item.truesalary)
}

    //循环外面,if 里面输出结果
    setLine(lineData)

 饼状图:

 要将数据处理成如下:(每个省份有多少人)

 实现方法:

     //饼状图 - 制作 : 只需要一个数组即可 ! (数组中的元素是对象)
    // 例如 : [{ value: 40, name: '湖北省' },{ value: 38, name: '河北省' }]
    //定义一个数组, 将来里面放入对象

const piedata = []
    res.data.forEach(item => {
      let index = piedata.findIndex(value => value.name == item.province)
      index === -1 ? piedata.push({ value: 1, name: item.province }) : piedata[index].value++
    })
      
    //循环外面,if 里面输出结果
    setPie(pieData)

思路分析:

定义一个空的数组 piedata  ,forEach 循环请求回来的数据,然后用 indexof 判断piedata 里是否有对应的省份
有就返回 索引值,没有就返回 -1
如果index为-1,就往piedata 里添加一个对象{ value: 1, name: item.province },value值为1
如果index不等于-1,就让piedata 对应索引值的对象的value值++
 

补充 :indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。