You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
4.3 KiB
112 lines
4.3 KiB
<!DOCTYPE html> |
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
<title>Yimian SSR</title> |
|
<style type="text/css"> |
|
*{font-size:14px;border:0;margin:0;padding:0;} |
|
body{font-family:'微软雅黑'; margin:0 auto;min-width:980px;} |
|
ul{display:block;margin:0;padding:0;list-style:none;} |
|
li{display:block;margin:0;padding:0;list-style: none;} |
|
.legendShow { position: absolute; top: 10px; z-index:999; } |
|
.legendShow ul {width: 100%; } |
|
.legendShow ul li { width: 100%; text-align: left; word-wrap: break-word; line-height: 35px; margin-top:10px; margin-left: 10px; list-style:none;} |
|
.legendShow ul li i.zx { display: inline-block; text-align: center; width: 15px; height: 15px; line-height: 35px; background: rgb(134, 151, 34); } |
|
.legendShow ul li i { display: inline-block; text-align: center;width: 15px; height: 15px; line-height: 35px; } |
|
.legendShow ul li i.zx { background: #1d94bc; } |
|
.legendShow ul li i.jx { background:rgb(134, 151, 34); } |
|
.legendShow ul li i.ztz { background:#FFAA25; } |
|
.legendShow ul li span { display: inline-block; line-height: 35px; margin-left:10px;word-wrap: break-word; } |
|
</style> |
|
<script src="jquery-1.11.2.min.js"></script> |
|
<script src="echarts-3.6.js"></script> |
|
<script type="text/javascript"> |
|
$(function () |
|
{ |
|
$(".legendShow").css({"top":$(window).height()/5-100,"left":50}); |
|
$("#div_pie").height($(window).height()); |
|
$("#div_pie").width($(window).width()); |
|
var chart = echarts.init(document.getElementById('div_pie'), null, { |
|
renderer: 'canvas' |
|
}); |
|
chart.setOption({ |
|
angleAxis: { |
|
axisLabel: |
|
{ |
|
|
|
formatter: function (value, index) { return value * 33500 / 100; } |
|
} |
|
}, |
|
radiusAxis: { |
|
type: 'category', |
|
data: ["2.07%", "15.53%", ""], |
|
z: 10 |
|
}, |
|
textStyle: { |
|
color: "#104490", |
|
fontSize: 16, |
|
fontStyle: 900 |
|
}, |
|
polar: { |
|
}, |
|
series: [ |
|
{ |
|
type: 'bar', |
|
itemStyle: { |
|
normal: { |
|
color: '#1d94bc' |
|
} |
|
}, |
|
data: |
|
[ |
|
{ |
|
value: 100 * 3 / 993.6 |
|
}, |
|
{ |
|
value: 100 * 82.2 / 993.6, |
|
show: false, |
|
itemStyle: { |
|
normal: { |
|
color: 'rgb(134, 151, 34)' |
|
} |
|
|
|
}, |
|
}, |
|
{ |
|
value: 100, |
|
show: false, |
|
itemStyle: { |
|
normal: { |
|
color: '#FFAA25' |
|
} |
|
} |
|
} |
|
], |
|
coordinateSystem: 'polar', |
|
name: '总计划', |
|
stack: 'a' |
|
|
|
}], |
|
legend: { |
|
legend: { |
|
show: true, |
|
data: ["总计划"], |
|
} |
|
} |
|
}); |
|
|
|
}); |
|
|
|
</script> |
|
</head> |
|
<body> |
|
<div class="legendShow"> |
|
<ul> |
|
<li><i class="zx"></i><span>朋友捐赠(3.00) 2.07%</span></li> |
|
<li><i class="jx"></i><span>已使用(82.2) 15.53%</span></li> |
|
<li><i class="ztz"></i><span>年预算费用(993.6)</span></li> |
|
</ul> |
|
</div> |
|
<div id="div_pie"></div> |
|
</body> |
|
</html>
|
|
|