echart模块化单文件引入
echart模块化单文件引入百度上面是推荐这样使用。今天看了一下,做了个Demo.
文件结构如下:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/jquery-ui.css"> 7 <style type="text/css"> 8 .ui-progressbar {position: relative;} 9 .progress-label {position: absolute;left: 50%;top: 4px;font-weight: bold;text-shadow: 1px 1px 0 #fff;} 10 </style> 11 <script type="text/javascript" src="js/jquery.js"></script> 12 <script type="text/javascript" src="js/jquery-ui.js"></script> 13 <script src="js/dist/echarts.js"></script> 14 </head> 15 <body> 16 <div id="cpu" style="height:400px"></div> 17 <div id="memory" style="height:400px;"></div> 18 <div id="net" style="height:400px;"></div> 19 <div id="divProgressbar" class="ui-progressbar"><div class="progress-label"></div></div> 20 21 <script type="text/javascript"> 22 // 路径配置 23 require.config({ 24 paths: { 25 echarts: 'js/dist' 26 } 27 }); 28 // 使用 29 require( 30 [ 31 'echarts', 32 'echarts/chart/line',//推挤面积图 33 'echarts/chart/gauge' // 仪器表 34 ], 35 function (ec) { 36 // 基于准备好的dom,初始化echarts图表 37 var cpu = ec.init(document.getElementById('cpu')); 38 var memory = ec.init(document.getElementById('memory')); 39 var net = ec.init(document.getElementById('net')); 40 41 var cpu_option = { 42 tooltip : { 43 formatter: "{a} <br/>{b} : {c}%" 44 }, 45 toolbox: { 46 show : true, 47 feature : { 48 mark : {show: true}, 49 restore : {show: true}, 50 saveAsImage : {show: true} 51 } 52 }, 53 series : [ 54 { 55 name:'CPU', 56 type:'gauge', 57 detail : {formatter:'{value}%'}, 58 data:[{value: 50, name: 'CPU'}] 59 } 60 ] 61 }; 62 63 var memory_option = { 64 tooltip : { 65 formatter: "{a} <br/>{b} : {c}%" 66 }, 67 toolbox: { 68 show : true, 69 feature : { 70 mark : {show: true}, 71 restore : {show: true}, 72 saveAsImage : {show: true} 73 } 74 }, 75 series : [ 76 { 77 name:'内存', 78 type:'gauge', 79 detail : {formatter:'{value}%'}, 80 data:[{value: 50, name: 'Memory'}] 81 } 82 ] 83 }; 84 85 var net_option = { 86 tooltip : { 87 trigger: 'axis' 88 }, 89 legend: { 90 data:['Net'] 91 }, 92 toolbox: { 93 show : true, 94 feature : { 95 mark : {show: true}, 96 dataView : {show: true, readOnly: false}, 97 magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, 98 restore : {show: true}, 99 saveAsImage : {show: true} 100 } 101 }, 102 calculable : true, 103 xAxis : [ 104 { 105 type : 'category', 106 boundaryGap : false, 107 data : ['2016-07-11','2016-07-12','2016-07-13','2016-07-14','2016-07-15','2016-07-16','2016-07-17'] 108 } 109 ], 110 yAxis : [ 111 { 112 type : 'value' 113 } 114 ], 115 series : [ 116 { 117 name:'Net', 118 type:'line', 119 stack: '总量', 120 itemStyle: {normal: {areaStyle: {type: 'default'}}}, 121 data:[820, 932, 901, 934, 1290, 1330, 1320] 122 } 123 ] 124 }; 125 126 net.setOption(net_option, true); 127 //图表调用 128 clearInterval(timeTicket); 129 timeTicket = setInterval(function (){ 130 cpu_option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0; 131 memory_option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0; 132 cpu.setOption(cpu_option, true); 133 memory.setOption(memory_option, true); 134 },1000); 135 } 136 ); 137 </script> 138 <script type="text/javascript"> var timeTicket;</script> 139 <script type="text/javascript"> 140 $(function(){ 141 $("#divProgressbar").progressbar({value: 30}); 142 $(".progress-label").text("30%"); 143 }); 144 </script> 145 </html>
效果截图: