138 lines
5.0 KiB
HTML
138 lines
5.0 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|||
|
|
|
|||
|
|
<style type="text/css">
|
|||
|
|
#main{
|
|||
|
|
width: 320px;
|
|||
|
|
height: 200px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
|
|||
|
|
<div id="main"></div>
|
|||
|
|
<script type="text/javascript" src="echarts.min.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
data();
|
|||
|
|
function data() {
|
|||
|
|
let value = JSON.parse(Android.getData('post'));
|
|||
|
|
let sum=0;
|
|||
|
|
value.data.map((item)=>{
|
|||
|
|
sum += item.value;
|
|||
|
|
})
|
|||
|
|
let circularGraph = value;
|
|||
|
|
let option = {
|
|||
|
|
legend: {
|
|||
|
|
type:"scroll",
|
|||
|
|
orient: 'vertical',
|
|||
|
|
right: 0,
|
|||
|
|
top:'middle',
|
|||
|
|
itemHeight: 10,
|
|||
|
|
itemWidth: 10,
|
|||
|
|
formatter:function (name) {
|
|||
|
|
switch (name) {
|
|||
|
|
case "普工":
|
|||
|
|
return name + " " + GetPercent(value.data[0].value, value.sum.number)
|
|||
|
|
+ " " + value.data[0].value;
|
|||
|
|
break;
|
|||
|
|
case "技工":
|
|||
|
|
return name + " " + GetPercent(value.data[1].value, value.sum.number)
|
|||
|
|
+ " " + value.data[1].value;
|
|||
|
|
break;
|
|||
|
|
case "高空":
|
|||
|
|
return name + " " + GetPercent(value.data[2].value, value.sum.number)
|
|||
|
|
+ " " + value.data[2].value;
|
|||
|
|
break;
|
|||
|
|
case "电焊":
|
|||
|
|
return name + " " + GetPercent(value.data[3].value, value.sum.number)
|
|||
|
|
+ " " + value.data[3].value;
|
|||
|
|
break;
|
|||
|
|
case "其他":
|
|||
|
|
return name + " " + GetPercent(value.data[4].value, value.sum.number)
|
|||
|
|
+ " " + value.data[4].value;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
graphic: {
|
|||
|
|
type: "text",
|
|||
|
|
right: 195,
|
|||
|
|
top: 85,
|
|||
|
|
style: {
|
|||
|
|
text:
|
|||
|
|
circularGraph.sum.name + //圆饼中心显示数据，这里是显示得总数
|
|||
|
|
"\n" +
|
|||
|
|
String(circularGraph.sum.number).replace(
|
|||
|
|
/(\d)(?=(?:\d{6})+$)/g,
|
|||
|
|
"$1."
|
|||
|
|
),
|
|||
|
|
textAlign: "center",
|
|||
|
|
fill: "#000",
|
|||
|
|
width: 30,
|
|||
|
|
height: 30,
|
|||
|
|
fontSize: 18
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "pie",
|
|||
|
|
radius: ["55%", "85%"],
|
|||
|
|
center: ['30%', '50%'],
|
|||
|
|
label: {
|
|||
|
|
//去除句柄
|
|||
|
|
normal: {
|
|||
|
|
position: "inner",
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: { color: "#3c4858", fontSize: "12" },
|
|||
|
|
formatter: function(val) {
|
|||
|
|
//让series 中的文字进行换行
|
|||
|
|
return val.name + "\n(" + val.percent + "%)";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: { color: "#3c4858" }
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|||
|
|
textColor: "#000"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: circularGraph.data //数据
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
color: ["#0061F6", "#58CFFF", "#B8FFF2", "#B593FF", "#FFB0E3", "#23B899"] //颜色
|
|||
|
|
};
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
myChart.on('click', function(params, charts, event) {
|
|||
|
|
Android.onClick('postName', params.name);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function GetPercent(num, total) {
|
|||
|
|
num = parseFloat(num);
|
|||
|
|
total = parseFloat(total);
|
|||
|
|
if (isNaN(num) || isNaN(total)) {
|
|||
|
|
return "-";
|
|||
|
|
}
|
|||
|
|
return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00)+"%";
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|