效果图： 首先在后台把数据包装成下面格式，lightTypeList集合中的数据格式
//获取饼状图的数据 function finLightRoadTotal(){ var lightType = $("#lightType").combobox('getValue'); // var areaId = $("#areaId").combobox('getValue'); var roadId = $("#roadId").combobox('getValue'); progressLoad(); $.post("${path}/rul",{lightType:lightType,roadId:roadId},function(data){ progressClose(); console.log(data); //路段名称集合，也就是legend要显示的 var roadName = data.map(function (item) { return item.roadName; }); var list = []; //就是series中data需要的数据 //这里注意，一定要把对象中的属性命名为name和value，这样可以覆盖series中的属性，使用我们自己的数据 $.each(data,function (i,item) { var light = new Object(); light.value=item.lightTotal; light.name=item.roadName; light.lightTypeList=item.lightTypeList; list.push(light); }) showPieChar(roadName,list); },'json'); } //显示饼状图 function showPieChar(roadName,list){ var pieChart = echarts.init(document.getElementById('pieChart')); var option = { tooltip: { trigger: 'item', formatter: function(param) //自定义弹出框的内容 { var lightTypeList = param.data.lightTypeList; //拼接一个字符串 var res = param.data.name + '<br/>'; //循环遍历内容 for(var i = 0, length = lightTypeList.length; i < length; i++) { var val = lightTypeList[i].lightTotal; res += lightTypeList[i].lightName + '：' + val + '<br/>'; } return res; } }, legend: { orient: 'horizontal', x: 'right', //设置legend的左右位置 y: 'top', //设置legend的上下位置 data: roadName }, series: [ { name: '路段类型', type: 'pie', radius: '55%', center: ['50%', '60%'], data: list, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; pieChart.setOption(option); }tooltip是参考：https://www.cnblogs.com/nizuimeiabc1/p/8525170.html
