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('age'));
|
||
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 "<20":
|
||
return name + " " + GetPercent(value.data[0].value, value.sum.number) +
|
||
" " + value.data[0].value;
|
||
break;
|
||
case "20-30":
|
||
return name + " " + GetPercent(value.data[1].value, value.sum.number) +
|
||
" " + value.data[1].value;
|
||
break;
|
||
case "30-40":
|
||
return name + " " + GetPercent(value.data[2].value, value.sum.number) +
|
||
" " + value.data[2].value;
|
||
break;
|
||
case "40-50":
|
||
return name + " " + GetPercent(value.data[3].value, value.sum.number) +
|
||
" " + value.data[3].value;
|
||
break;
|
||
case "50-60":
|
||
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: ["#FF8282", "#42E0FC", "#FF8F00", "#5197FF", "#B8E986"] //颜色
|
||
};
|
||
myChart.setOption(option);
|
||
myChart.on('click', function(params, charts, event) {
|
||
Android.onClick('age', 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> |