echart模块化单文件引入百度上面是推荐这样使用。今天看了一下，做了个Demo.
文件结构如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<style type="text/css">
.ui-progressbar {position: relative;}
.progress-label {position: absolute;left: 50%;top: 4px;font-weight: bold;text-shadow: 1px 1px 0 #fff;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script src="js/dist/echarts.js"></script>
</head>
<body>
<div id="cpu" style="height:400px"></div>
<div id="memory" style="height:400px;"></div>
<div id="net" style="height:400px;"></div>
<div id="divProgressbar" class="ui-progressbar"><div class="progress-label"></div></div> <script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'js/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line',//推挤面积图
'echarts/chart/gauge' // 仪器表
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var cpu = ec.init(document.getElementById('cpu'));
var memory = ec.init(document.getElementById('memory'));
var net = ec.init(document.getElementById('net')); var cpu_option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'CPU',
type:'gauge',
detail : {formatter:'{value}%'},
data:[{value: 50, name: 'CPU'}]
}
]
}; var memory_option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'内存',
type:'gauge',
detail : {formatter:'{value}%'},
data:[{value: 50, name: 'Memory'}]
}
]
}; var net_option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['Net']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['2016-07-11','2016-07-12','2016-07-13','2016-07-14','2016-07-15','2016-07-16','2016-07-17']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'Net',
type:'line',
stack: '总量',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
}; net.setOption(net_option, true);
//图表调用
clearInterval(timeTicket);
timeTicket = setInterval(function (){
cpu_option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
memory_option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
cpu.setOption(cpu_option, true);
memory.setOption(memory_option, true);
},1000);
}
);
</script>
<script type="text/javascript"> var timeTicket;</script>
<script type="text/javascript">
$(function(){
$("#divProgressbar").progressbar({value: 30});
$(".progress-label").text("30%");
});
</script>
</html>
效果截图：