// 获取饼图数据
function getWaterPercentOfArea(type) {
console.log(type+"被点击")
var echartsData=[];
var url = window.serverConfig.server + window.serverConfig.getWaterPercentOfArea;
uniPost(url, {}, (res, message) => {
var pieCountList =[];
if (type==1){
pieCountList = res.resp.day;
}else if (type==2){
pieCountList = res.resp.month;
}else if (type==3){
var pieCountList = res.resp.year;
}
var itemStyle= {};
for (var i = 0; i < pieCountList.length; i++) {
if (i % 2 == 0) {
itemStyle = {color: '#73a0fb'};
} else if (i % 3 == 0) {
itemStyle = {color: '#73deb4'};
} else if (i % 5 == 0) {
itemStyle = {color: '#f78f74'};
} else {
itemStyle = {color: '#f7c639'};
}
echartsData[i] = {
value: pieCountList[i].value,
name: pieCountList[i].areaName,
itemStyle: itemStyle
};
}
gszEcharts(echartsData);
}, (data, message) => {
});
}
function gszEcharts(echartsData) {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.getInstanceByDom(document.getElementById("gszEcharts"))
if (myChart == null) { // 如果不存在,就进行初始化
myChart = echarts.init(document.getElementById("gszEcharts"));
}
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item'
},
legend: [
{
top: '80%',
left: 'center',
textStyle:{
fontSize: 12,//字体大小
color: '#fff'
},
// data:['四方台镇']
},
// {
// top: '89%',
// left: 'center',
// textStyle:{
// fontSize: 12,//字体大小
// color: '#fff'
// },
// data:['某某镇3','某某镇4']
// }
],
series: [
{
name: '供水分布',
type: 'pie',
radius: '50%',
center: ["50%", "40%"],
label: {
formatter: '{color|{b}}\n {color|{d}%} ',
rich: {
color: {
color: '#fff',
align: 'center'
}
}
},
// data: [
// {value: 157, name: '四方台镇',itemStyle: { color: '#f6c318' }},
// // {value: 735, name: '某某镇2',itemStyle: { color: '#2d80e8' }},
// // {value: 580, name: '某某镇3',itemStyle: { color: '#90ce21' }},
// // {value: 484, name: '某某镇4',itemStyle: { color: '#d96f3b' }}
// ],
data: echartsData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
}