缃?/title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/> <link rel="stylesheet" rev="stylesheet" href="skin/g2013.css" /> <style> .xiz_bzjg{ width:200px; margin:0 auto;text-align:center;} .xiz_bzjg li{ margin-bottom:20px;color:#999;text-align:left;} .xiz_bzjg li i{color:#333; float:right; font-style:normal;} .xiz_fe8{ width:15px; height:15px;background:#fe8d25; display:block; float:left; margin-right:10px; margin-top:4px;} .xiz_4aa{width:15px; height:15px;background:#4aa8ff; display:block; float:left; margin-right:10px; margin-top:4px;} .xiz_87C{width:15px; height:15px;background:#FF7E50; display:block; float:left; margin-right:10px; margin-top:4px;} .xiz_FF7{width:15px; height:15px;background:#DB70D7; display:block; float:left; margin-right:10px; margin-top:4px;} .xiz_DA7{width:15px; height:15px;background:#87CFFB; display:block; float:left; margin-right:10px; margin-top:4px;} </style> </head> <body> <ul> <li>鏈堝潎杩樻(鍏?锛?span id="i_firstMonthpay" class="big"></span></li> <li>璐锋鎬婚(涓?锛?span id="loantotal"></span></li> <li>鏀粯鍒╂伅(涓?锛?span id="interesttotal"></span></li> <li>杩樻鎬婚(涓?锛?span id="returntotal"></span></li> <li>璐锋鏈熼檺(骞?锛?span id="i_year"></span></li> </ul> <ul> <li>棣栨湀杩樻(鍏?锛?span id="i_firstMonthpay2" class="big"></span></li> <li>姣忔湀閫掑噺(鍏?锛?span id="dijian"></span></li> <li>璐锋鎬婚(涓?锛?span id="loantotal2"></span></li> <li>鏀粯鍒╂伅(涓?锛?span id="interesttotal2"></span></li> <li>杩樻鎬婚(涓?锛?span id="returntotal2"></span></li> <li>璐锋鏈熼檺(骞?锛?span id="i_year2"></span></li> </ul> <div class=""> <form name="form1" id="form1"> <div style="display:none"> <input type="hidden" name="year" id="year" /> <input type="hidden" name="month" id="month" /> <INPUT id="loana" type="hidden" value="0" name="loana" /> <INPUT id="loanb" type="hidden" value="0" name="loanb" /> <INPUT id="loanc" type="hidden" value="0" name="loanc" /> </div> 璐锋棰濓細<input class="whiteipt" id="loana_input" name="loana_input" value="100"><br> 璐锋鏈熼檺锛?select id="year1" name="year1" class="i_select" onchange="caculate1()"> <option value="5">5骞达紙60鏈燂級</option> <option value="10">10骞达紙120鏈燂級</option> <option value="15">15骞达紙180鏈燂級</option> <option value="20">20骞达紙240鏈燂級</option> <option value="25">25骞达紙300鏈燂級</option> <option value="30" selected="true">30骞达紙360鏈燂級</option> </select><br> 鍟嗚捶鍒╃巼锛?input class="whiteipt" id="rate2a" value="4.9" name="rate2a"> <input id="sd-rate" value="4.9" type="hidden" /> <select id="sd-zk" onchange="sdRate();" class="i_select"> <option value="1.1">1.1鍊?/option> <option value="1" selected="">1鍊?/option> <option value="0.95">9.5鎶?/option> <option value="0.93">9.3鎶?/option> <option value="0.9">9.0鎶?/option> <option value="0.88">8.8鎶?/option> <option value="0.85">8.5鎶?/option> </select> <input type="button" onClick="caculate1()" value="閲嶆柊璁＄畻" /> </form> </div> <div id="main" style="width: 600px;height:400px;"></div> <select name="man2Nian" id="man2Nian"> <option value="0">婊′袱骞?/option> <option value="1">涓嶆弧涓ゅ勾</option> </select> <select name="shoutao" id="shoutao"> <option value="0">棣栧</option> <option value="1">浜屽</option> </select> <input value="100" name="shuifeiprice" id="shuifeiprice" /> 涓囧厓 <input type="button" onclick="shuifeijisuan()" value="寮€濮嬭绠? /> <div class="xiz_bzjg"> <ul> <li class="clearfix"><i class="fr" id="qishui_node">0鍏?/i><em class="xiz_87C"></em>濂戠◣锛?/li> <li class="clearfix"><i class="fr" id="yingyeshui_node">0鍏?/i><em class="xiz_DA7"></em>钀ヤ笟绋庯細</li> <li class="clearfix"><i class="fr" id="geshui_node">0鍏?/i><em class="xiz_FF7"></em>涓◣锛?/li> </ul> <p class="xiz_heji">鍚堣<span id="allshui_node">0鍏?/span></p> </div> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/echarts.common.min.js"></script> <script src="js/fangdaijisuan_s.js"></script> <script type="text/javascript"> //鎴胯捶璁＄畻 caculate1() //璁＄畻绋庤垂 function shuifeijisuan(){ var man2Nian = $('#man2Nian'),shoutao = $('#shoutao'),shuifeiprice = $('#shuifeiprice'),shuifeiprice = $('#shuifeiprice'); if(isNaN(shuifeiprice.val())){ shuifeiprice.val('100'); } var total = parseInt(shuifeiprice.val())*10000; var yingyeshui = 0,geshui = 0.01,qishui = 0.015; if(man2Nian.val()==='1'){ yingyeshui = 0.055; } if(shoutao.val()==='1'){ qishui = 0.02; } var json_data = []; var arr1 = {name:'濂戠◣',value:qishui*total}; json_data.push(arr1); var arr2 = {name:'钀ヤ笟绋?,value:yingyeshui*total}; json_data.push(arr2); var arr3 = {name:'涓◣',value:geshui*total}; json_data.push(arr3); showshuifei(json_data); echartStr(json_data); } function showshuifei(arr){ var qishui_node = $('#qishui_node'),yingyeshui_node = $('#yingyeshui_node'),geshui_node = $('#geshui_node'),allshui_node = $('#allshui_node'); qishui_node.html(arr[0].value+'鍏?) yingyeshui_node.html(arr[1].value+'鍏?) geshui_node.html(arr[2].value+'鍏?) var total = arr[0].value + arr[1].value+arr[2].value; allshui_node.html(total+'鍏?); } shuifeijisuan(); // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥 var myChart; function echartStr(brower){ if (myChart != null && myChart != "" && myChart != undefined) { myChart.dispose(); } myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '绋庤垂璁＄畻缁撴灉' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { data:brower, type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20 }, series: [{ name: '绋庤垂', type: 'pie', radius: ['50%', '70%'], color: ["#FF4500","#87CEEB", "#DB70D7"], data: brower }] }; myChart.setOption(option); } </script> </body> </html>