|
<!DOCTYPE html> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery环状图表数据统计代码 - </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="www.fjnjb.com.js"></script> <script src="www.sxdscyy.com.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 * 736 / 35500 }, { value: 100 * 5513 / 35500, 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>执行金额(7360.000) 2.07%</span></li> <li><i class="jx"></i><span>计划金额(55132.000) 15.53%</span></li> <li><i class="ztz"></i><span>总金额(355000)</span></li> </ul> </div> <div id="div_pie"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://down." target="_blank"> </a></p> </div> </body> </html> |
|
|
来自： 昵称48806104 > 《文件夹1》
