桑基图echarts sankey配置项内容和展示
配置项如下
var res = {
"success": true,
"errMsg": "ok",
"data": [
{"name": "深圳市", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "广州市", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "珠海市", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "汕头市", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "佛山市", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "深圳市2", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "广州市2", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "珠海2市", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "汕头市2", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "佛山市2", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "深圳市3", "plts": [
{"name": "PM25", "rate": 95},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "广州市3", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "珠海3市", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "汕头市3", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "佛山市3", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "深圳市4", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "广州市4", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "珠海市4", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "汕头市4", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "佛山市4", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "深圳市5", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 35}
]},
{"name": "广州市5", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 35},
{"name": "SO2", "rate": 15}
]},
{"name": "珠海市5", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "汕头市5", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 45},
{"name": "O3", "rate": 15},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]},
{"name": "佛山市5", "plts": [
{"name": "PM25", "rate": 25},
{"name": "PM10", "rate": 15},
{"name": "O3", "rate": 35},
{"name": "CO", "rate": 15},
{"name": "NO2", "rate": 15},
{"name": "SO2", "rate": 15}
]}
]
};
var color = ['#78b4ff', '#f66bc7', '#2bcba7', '#ff8896', '#79c628', '#6c93ee', '#a9abff', '#f7a23f', '#27bae7', '#ff6d9d', '#cb79ff', '#f95b5a', '#ccaf27', '#38b99c', '#93d0ff', '#bd74e0', '#fd77da', '#dea700'];
var citylist = [];
var data = [];
res.data.forEach((v,i)=>{
citylist.push({name: v.name, itemStyle:{
color: '#78b4ff'
}});
v.plts.forEach((val,j)=>{
if(i === 0 ){
citylist.push({name: val.name, itemStyle:{
color: color[j]
}});
}
data.push({
target: v.name,
source: val.name,
value: val.rate,
lineStyle: {
color: color[j]
}
});
});
});
var option = {
backgroundColor:'#000',
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
formatter: function(o){
if(o.dataType!== "edge"){
return '';
}
return o.data.source + ' - ' + o.data.target + "：" + o.data.value + '%'
}
},
series: [
{
type: 'sankey',
data: citylist,
links: data,
top:'10%',
right:'10%',
bottom:'5%',
nodeWidth: 80,
nodeGap: 0,
focusNodeAdjacency: 'allEdges',
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#fff',
opacity:1
}
},
label:{
normal: {
align: 'center',
padding: [0, 0, 0, -90],
fontSize:'14',
color: '#fff'
}
},
lineStyle: {
normal: {
curveness: 0.5,
opacity:0.5
}
}
}
]
};
截图如下
