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>

效果截图：

posted @ 2016-07-18 15:21  SkyTeam_LBM  阅读(1020)  评论(0)  编辑  收藏  举报