96 lines
3.0 KiB
HTML
96 lines
3.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: 300px;
|
|||
|
|
height: 200px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
|
|||
|
|
<div id="main"></div>
|
|||
|
|
<script type="text/javascript" src="echarts.min.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
data();
|
|||
|
|
function data() {
|
|||
|
|
let value = JSON.parse(Android.getData('pro'));
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
var option = {
|
|||
|
|
legend: {
|
|||
|
|
type:"scroll",
|
|||
|
|
orient: 'vertical',
|
|||
|
|
right:'20',
|
|||
|
|
top:'middle',
|
|||
|
|
itemHeight: 10,
|
|||
|
|
itemWidth: 10,
|
|||
|
|
formatter:function (name) {
|
|||
|
|
switch (name) {
|
|||
|
|
case "110kV":
|
|||
|
|
return name + " " + value[0].value;
|
|||
|
|
break;
|
|||
|
|
case "220kV":
|
|||
|
|
return name + " " + value[1].value;
|
|||
|
|
break;
|
|||
|
|
case "500kV":
|
|||
|
|
return name + " " + value[2].value;
|
|||
|
|
break;
|
|||
|
|
case "±800kV":
|
|||
|
|
return name + " " + value[3].value;
|
|||
|
|
break;
|
|||
|
|
case "1000kV及以上":
|
|||
|
|
return name + " " + value[4].value;
|
|||
|
|
break;
|
|||
|
|
case "其它":
|
|||
|
|
return name + " " + value[5].value;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toolbox: {
|
|||
|
|
show: true,
|
|||
|
|
feature: {
|
|||
|
|
mark: { show: true }
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: "{b} : {c} ({d}%)"
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'Nightingale Chart',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: [15, 75],
|
|||
|
|
center: ['25%', '50%'],
|
|||
|
|
roseType: 'area',
|
|||
|
|
color: ["#0061F6", "#781FF1", "#4992F4", "#01CFFF", "#85FFFF", "#CEE1F9"],
|
|||
|
|
label:{
|
|||
|
|
show:false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show:false
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
borderRadius: 8,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
option.series[0].data = value;
|
|||
|
|
option.legend.data = value;
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
myChart.on('click', function(params, charts, event) {
|
|||
|
|
Android.onClick('level', params.name);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|