<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%> <% //清除缓存 response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cache"); response.setDateHeader("Expires", 0); String ctx = request.getContextPath(); if ("/".equals(ctx)) { ctx = ""; } request.setAttribute("ctx", ctx); %> <div id="main" style="width: 1000px;height: 600px;border: 1px solid red;"></div> <script src="${ctx }/scripts/common/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="${ctx}/scripts/plugin/echarts3.1.10/echarts.min.js"></script> <script src="../js/echarts-liquidfill.min.js" type="text/javascript"></script> <script> $(function(){ var myChart = echarts.init(document.getElementById('main')); var option = { color : [ '#4096ee', '#3fcf91', '#f58d30' ], tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c}%" }, legend: { data : ['总办件','正常办件','超期办件'], x:"left" }, series : [ { name:'正常办件', type:'gauge', center: ['25%','55%'], splitNumber: 10, // 分割段数,默认为5 axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], width: 8 } }, axisTick: { // 坐标轴小标记 splitNumber: 10, // 每份split细分多少段 length :12, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: 'auto' } }, axisLabel: { // 坐标轴文本标签,详见axis.axisLabel textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: 'auto' } }, splitLine: { // 分隔线 show: true, // 默认显示,属性show控制显示与否 length :30, // 属性length控制线长 lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 color: 'auto' } }, pointer : { width : 5 }, title : { show : true, offsetCenter: [0, '-40%'], // x, y,单位px textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE fontWeight: 'bolder' } }, detail : { formatter:'{value}%', textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: 'auto', fontWeight: 'bolder' } }, data:[{value: (Math.random() * 100).toFixed(2) - 0, name: '完成率'}] }, { name:'项目监控', type:'funnel', width: '30%', x:"55%", data:[ {value:100, name:'总办件'}, {value:(Math.random() * 100).toFixed(2) - 0, name:'正常办件'}, {value:(Math.random() * 100).toFixed(2) - 0, name:'超期办件'} ] } ] }; myChart.setOption(option,true); }); </script>
请您注意
·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款