var option=null,doc=null,mychart=null; doc=document; mychart=echarts.init(doc.getElementById("CPUBox")); $(".chartsBox").height($(".chartsBox").width()); window.addEventListener('resize',function () { $(".chartsBox").height($(".chartsBox").width()); },false); option= { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { show:false, feature: { restore: {}, saveAsImage: {} } }, series: [ { name: 'CPU分配比', type: 'gauge', axisLine : { show : true, lineStyle : { // 属性lineStyle控制线条样式 color : [ //表盘颜色 [ 0.5, "#0A69A3" ],//0-50%处的颜色 [ 0.7, "#0A69A3" ],//51%-70%处的颜色 [ 0.9, "#0A69A3" ],//70%-90%处的颜色 [ 1,"#0A69A3" ]//90%-100%处的颜色 ], width : 15//表盘宽度 } }, splitLine : { //分割线样式(及10、20等长线样式) length : 20, lineStyle : { // 属性lineStyle控制线条样式 width : 1 } }, axisTick : { //刻度线样式(及短线样式) length : 15 }, axisLabel : { //文字样式(及“10”、“20”等文字样式) color : "black", distance : 5 //文字离表盘的距离 }, detail: { //显示的百分数式样 formatter : "{score|{value}%}", offsetCenter: [0, "40%"], backgroundColor: '#FFEC45', height:30, rich : { score : { color : "white", fontFamily : "微软雅黑", fontSize : 32 } } }, data: [{ value: 50, name:"", label: { textStyle: { fontSize: 10 } } }] } ] }; option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; mychart.setOption(option, true);
echart
最新推荐文章于 2024-05-24 09:42:55 发布