echarts后台获取数据，前台实现饼图显示并自定义图形的数据表展示格式

1.实现效果图：

切换前效果：

切换后效果：

 

2.关键的js代码：

var myChart = echarts.init(document.getElementById('aaa'));
// 为echarts对象加载数据 
var opts = "";
$.post("/getUnitAllPathData",
function(data) {
    opts = formatEchartsOpts(data);
    myChart.setOption(opts);
});

function formatEchartsOpts(map) {
    var title = "";
    var xName = "";
    var yName = "";
    var xArr = "";
    var yArr = "";

    if (map != null) {
        title = map.title;
        xName = map.xName;
        yName = map.yName;
        xArr = map.xArr;
        yArr = map.yArr;
    }
    return setSimplePieOption(title, xName, yName, xArr, yArr);
}

var setSimplePieOption = function(title, xName, yName, xArr, yArr) {
    var pData = [];
    for (var i = 0; i < xArr.length; i++) {
        var obj = {
            value: yArr[i],
            name: xArr[i]
        }
        pData.push(obj);
    }
    var option = {
        title: {
            text: title,
            x: 'left'
        },
        color: ['#66ADE1', '#41C8DB', '#BD52C6', '#E8C83F', '#F28743'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
            show: true,
            right: 30,
            feature: {
                dataView: {
                    show: true,
                    title: '数据表',
                    lang: [title + "——数据表", "收起", "刷新"],
                    optionToContent: function(opt) {
                        var series = opt.series;
                        var table = '<div style="overflow-x:scroll;"><table style="width:max-content;text-align:center;" cellspacing="0" cellpadding="4" border="1"><tbody><tr>' + '<td>' + xName + '</td>'
                        for (var i = 0,l = xArr.length; i < l; i++) {
                            table += '<td>' + xArr[i] + '</td>'
                        }
                        table += '</tr><tr>' + '<td>' + yName + '</td>';
                        for (var i = 0,l = xArr.length; i < l; i++) {
                            table += '<td>' + yArr[i] + '</td>'
                        }
                        table += '</tr>'table += '</tbody></table>';
                        return table;
                    },
                    readOnly: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        series: [{
            name: xName,
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: pData,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                    label: {
                        show: true,
                        formatter: '{b} : {c} ({d}%)',
                    },
                    labelLine: {
                        show: true
                    }
                }
            }
        }],
        noDataLoadingOption: {
            text: '暂无数据',
            textStyle: {
                fontSize: '20',
            },
            effect: 'bubble',
            effectOption: {
                effect: {
                    n: 0
                }
            }
        },
    };
    return option;
}

3.Controller层代码（封装数据,此例中为静态模拟数据，实际项目中查数据库调用真是数据）

    @RequestMapping("/getUnitAllPathData")
	@ResponseBody
	public Map<String,Object> getUnitAllPathData(ModelMap modelMap, ActionValueAssistant actionValueAssistant) {
		Map<String,Object> map = new HashMap<String, Object>();
		try {
			map.put("title", "企业数据");
			map.put("xName", "企业规模");
			map.put("yName", "人数（百）");
			map.put("xArr",new String[]{"超大","大","中","小","微型"});
			map.put("yArr",new String[]{"300","2000","3000","2500","1000"});
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}		
		
		return map;
	}