echart一个框里放三个饼图案例

效果图:

代码:

function(chartOption){

chartOption = $nps$.deepCopyTo({}, chartOption);

var chartDataList_region = this.__portal.componentItemMap.root.chartDataList_region || [];
var chartDataList_manufacturer = this.__portal.componentItemMap.root.chartDataList_manufacturer || [];
var chartDataList_cpName = this.__portal.componentItemMap.root.chartDataList_cpName || [];

chartOption.series = [];

// 标题
chartOption.title.text = "{icon|} 各维度劣化TOP3";
chartOption.title.textStyle.rich = {
icon: {
backgroundColor: '#3c8cd0',
2,
height: 15
}
};

var seriesData_region = this.getSeriesData(chartDataList_region, 'region');
var seriesData_manufacturer = this.getSeriesData(chartDataList_manufacturer, 'manufacturer');
var seriesData_cpName = this.getSeriesData(chartDataList_cpName, 'cpName');

// // 转换中文牌照方 厂商
var seriesData_manufacturer_zh = [],seriesData_cpName_zh = [];
seriesData_manufacturer.forEach(function(item) {
item.name = $nps$.appData.manufacturerMap[item.name] || item.name || '未知';
seriesData_manufacturer_zh.push(item);
})
seriesData_cpName.forEach(function(item) {
item.name = $nps$.appData.cpNameMap[item.name] || item.name || '未知';
seriesData_cpName_zh.push(item);
})

chartOption.legend = {show: false};
chartOption.tooltip = {
show: true,
formatter: function(option){
return option.seriesName + '<br/>' + option.data.name + ': ' + option.value + '('+option.percent+'%)';
}
};
chartOption.series.push({
name: '区域劣化告警数',
type: 'pie',
animation: false,
radius : '65%',
center: ['15%', "46%"],
data: seriesData_region,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
chartOption.series.push({
name: '厂家劣化告警数',
type: 'pie',
animation: false,
radius : '65%',
center: ['45%', "46%"],
label: {
normal: {
show: true
}
},
data: seriesData_manufacturer_zh,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
chartOption.series.push({
name: '牌照方劣化告警数',
type: 'pie',
animation: false,
radius : '65%',
center: ['75%', "46%"],
label: {
normal: {
show: true
}
},
data: seriesData_cpName_zh,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});


console.log('告警用户劣化TOP3', chartOption);
return chartOption;
}

方法:

getSeriesData: 

function(chartDataList, key){

var colors = ['#9bd049', '#1d9af9', '#663db7', '#f9c928', '#d05221', '#21d0b4'];

var dataMap = {};
chartDataList.map(function(item){
dataMap[item._time] = dataMap[item._time] || {list: [], map: {}};
dataMap[item._time].list.push(item);
dataMap[item._time].map[item[key]] = item;
});
var timeKeys = Object.keys(dataMap);
timeKeys.sort(); // 根据时间排序

// 最近一个时间点数据
var dataItem1 = dataMap[timeKeys[timeKeys.length-1]] || {list: [], map: {}};
// 前一个时间点数据
var dataItem2 = dataMap[timeKeys[timeKeys.length-2]] || dataItem1;
var increaseData = dataItem1.list.map(function(item){
var item2 = dataItem2.map[item[key]];
// 忽略 key 为空的值
if (item[key] && item2) {
return {key: item[key], increase: (item.alarmUsers-item2.alarmUsers) || 0};
} else {
return {key: item[key], increase: -1};
}
});
increaseData.sort(function(item1, item2){return Number(item2.increase)-Number(item1.increase);})
var seriesData = [];
let limitCount = $nps$._appData.data.params && $nps$._appData.data.params.overview_history ? $nps$._appData.data.params.overview_history.limitAlertCount : 3;
for (var i = 0; i < increaseData.length && seriesData.length< limitCount; i ++) {
var dataItem = increaseData[i];
if (dataItem.key) {
seriesData.push({
value: dataItem.increase,
name: dataItem.key,
itemStyle: {normal: {color: colors[i]}}
});
}
}

return seriesData;
}