Echarts饼图自定义提示框内容

效果图：

首先在后台把数据包装成下面格式，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 + '
';
					//循环遍历内容
					for(var i = 0, length = lightTypeList.length; i < length; i++) {
     
						var val = lightTypeList[i].lightTotal;
						res += lightTypeList[i].lightName + '：' + val + '
';
					}
					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