vue后台返回的数据渲染到echarts饼图上_vue2中的echart展示后端返回的list数据

1.安装echarts

npm install echarts --save

2.在组件内引入echarts

import * as echarts from 'echarts' 

3.准备好装图表的容器

<template>
   <div class="echart" id="applyChart" style="width:50%;height: 550px;"></div>
</template>

4.初始化图表 并获取后台数据渲染到饼图上

<script>
  import * as echarts from 'echarts'
  export default {
   data(){
    return {
      applyChart: {},
      pieName: [],
      // 后台数据
      list: [],
    }
},
mounted(){
  this.initApplyCharts()
  this.initData()
},
methods:{
    // 初始化图表
  initApplyCharts(){
    this.applyChart = echarts.init(document.querySelector('#applyChart'))
    // 饼图
     this.applyChart.setOption ({
        legend: {
          // 图例
          left:"left",
          orient: "vertical"
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "部门申请所占比",
          top:'0%',
          left: "center"
        },
        tooltip: {
            trigger: 'item',
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
            },
            radius: "30%", //饼图半径
            data: [],
            //每一个扇形的颜色
            itemStyle: {
             normal: {
                color: function (colors) {
                  let colorList = [
                    '#fc8251',
                    '#5470c6',
                    '#33FFDD', 
                  ];
                  return colorList[colors.dataIndex];
                }
            },
         }
          },
          
        ],
         emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
      });
  },
//  动态获取饼图数据 并对数据进行处理
    initData(){
      // 处理查询参数
      let params = {...this.queryParams};
      // 执行查询 查询工单运维表
      getOrderPage(params).then((response) => {
        this.list = response.data.list;
        // 从后台返回的数据中(返回的数据格式[{...},{...}] ) 分离出图表展示需要的name字段
        let applyName = this.list.map(item=>{
          return item.applyUserDept
        })
        // 如果分离出来的字段存在重复的，需要计算重复字段出现的次数 ['A','B','C','A']
        let getData = applyName.reduce((obj, name) => { 
              if (name in obj) {
                obj[name]++
              } else {
                obj[name]=1
              }
              return obj //{'A':2,'B':1,'C':1}
            }, {})
        //存放形式为[{name1:value},{name2:value2}]  
        let dataList = []; 
        //计算完数组中每个元素出现的次数,得到一个对象 属性->name 属性值->value
        for(const key in getData) {
            let obj1 = {name:key,value:getData[key]}
            dataList.push(obj1)
            }
         this.applyChart.setOption({
					series:[{
                            // 饼图的数据源
							data: dataList,
						}]
				});
      });  
    },
}
   }
 
</script>

后台返回的数据格式：

展示到饼图上的data需要的格式是data[{name:'A',value:1}] ,后台返回的数据里没有name和value,需要处理一下后台数据(注意：在后台数据中如：applyUserDept字段可能在不同的对象中)

// 从后台返回的数据中(返回的数据格式[{...},{...}] ) 分离出图表展示需要的name字段
        let applyName = this.list.map(item=>{
          return item.applyUserDept
        })
        // 如果分离出来的字段存在重复的，需要计算重复字段出现的次数 ['A','B','C','A']
        let getData = applyName.reduce((obj, name) => { 
              if (name in obj) {
                obj[name]++
              } else {
                obj[name]=1
              }
              return obj //{'A':2,'B':1,'C':1}
            }, {})
        //存放形式为[{name1:value},{name2:value2}]  
        let dataList = []; 
        //计算完数组中每个元素出现的次数,得到一个对象 属性->name 属性值->value
        for(const key in getData) {
            let obj1 = {name:key,value:getData[key]}
            dataList.push(obj1)
            }
        // 饼图中使用处理好的数据
         this.applyChart.setOption({
					series:[{
                            // 饼图的数据源
							data: dataList,
						}]
				});

 处理好的数据：

最后尽管后台并没有返回带有name和value字段的数据，通过处理也成功的把需要展示的数据，渲染到饼图上 最后效果图：