181 lines
5.1 KiB
HTML
181 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>ECharts</title>
|
||
<!-- ECharts单文件引入 -->
|
||
<script src="common/js/echarts-2.2.2/echarts.js"></script>
|
||
<script type="text/javascript">
|
||
// 初始化仪表盘字段
|
||
function initDefaultChart(ec){
|
||
var myChart = ec.init(document.getElementById('main01'));
|
||
var option = {
|
||
tooltip : {
|
||
formatter: "{a} <br/>{b} : {c}%"
|
||
},
|
||
toolbox: {
|
||
show : false,
|
||
feature : {
|
||
mark : {show: true},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
series : [
|
||
{
|
||
name:'业务指标',
|
||
type:'gauge',
|
||
splitNumber: 10, // 分割段数，默认为5
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
|
||
width: 3
|
||
}
|
||
},
|
||
axisTick: { // 坐标轴小标记
|
||
splitNumber: 10, // 每份split细分多少段
|
||
length :10, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
color: 'auto'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
show: true, // 默认显示，属性show控制显示与否
|
||
length :15, // 属性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: 25, name: '完成率'}]
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
setInterval(function (){
|
||
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
|
||
myChart.setOption(option,true);
|
||
},2000);
|
||
|
||
//02
|
||
var myChart02 = ec.init(document.getElementById('main02'));
|
||
var option02 = {
|
||
tooltip : {
|
||
formatter: "{a} <br/>{b} : {c}%"
|
||
},
|
||
toolbox: {
|
||
show : false,
|
||
feature : {
|
||
mark : {show: true},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
series : [
|
||
{
|
||
name:'温度指标',
|
||
type:'gauge',
|
||
splitNumber: 10, // 分割段数，默认为5
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
|
||
width: 3
|
||
}
|
||
},
|
||
axisTick: { // 坐标轴小标记
|
||
splitNumber: 10, // 每份split细分多少段
|
||
length :10, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
color: 'auto'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
show: true, // 默认显示，属性show控制显示与否
|
||
length :15, // 属性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: 50, name: '完成率'}]
|
||
}
|
||
]
|
||
};
|
||
myChart02.setOption(option);
|
||
setInterval(function (){
|
||
option02.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
|
||
myChart02.setOption(option02,true);
|
||
},2000);
|
||
}
|
||
|
||
</script>
|
||
<script type="text/javascript">
|
||
//仪表盘
|
||
require.config({
|
||
paths: {
|
||
echarts: 'common/js/echarts-2.2.2'
|
||
}
|
||
});
|
||
require(
|
||
[
|
||
'echarts',
|
||
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
|
||
'echarts/chart/bar',
|
||
'echarts/chart/gauge'
|
||
],
|
||
function (ec) {
|
||
initDefaultChart(ec);
|
||
}
|
||
|
||
);
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
||
<div id="main01" style="height:400px"></div>
|
||
|
||
<div id="main02" style="height:400px"></div>
|
||
</body>
|
||
</html> |