105 lines
3.0 KiB
HTML
105 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<!-- saved from url=(0013)about:internet -->
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1" />
|
||
|
|
<title>ECharts</title>
|
||
|
|
<style>
|
||
|
|
#main {
|
||
|
|
width: 97%;
|
||
|
|
height: 97%;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="main" />
|
||
|
|
<script src="echarts.js"></script>
|
||
|
|
<script>
|
||
|
|
myChart = echarts.init(document.getElementById('main'));
|
||
|
|
option = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'gauge',
|
||
|
|
startAngle: 180,
|
||
|
|
endAngle: 0,
|
||
|
|
min: 0,
|
||
|
|
max: 400,
|
||
|
|
splitNumber: 10,
|
||
|
|
radius: '80%',
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
width: 10
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
length: 15,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'auto'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
length: 20,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'auto'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
detail: {
|
||
|
|
valueAnimation: true,
|
||
|
|
fontSize: 68,
|
||
|
|
fontWeight: 'bolder',
|
||
|
|
offsetCenter: [0, '-30%']
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 0,
|
||
|
|
name: '',
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
myChart.setOption(option);
|
||
|
|
|
||
|
|
function jsShowHide(info) {
|
||
|
|
if (info == 0) {
|
||
|
|
myChart.clear();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function jsSetData(name, min, max, splitNumber, label, value) {
|
||
|
|
|
||
|
|
option.series[0].name = name;
|
||
|
|
option.series[0].min = min;
|
||
|
|
option.series[0].max = max;
|
||
|
|
//option.series[0].splitNumber = splitNumber;//这个不能单纯设置他
|
||
|
|
var data = {};
|
||
|
|
data.name = label;
|
||
|
|
data.value = value;
|
||
|
|
option.series[0].data[0] = data;
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
function jsSetValue(value) {
|
||
|
|
option.series[0].data[0].value = value;
|
||
|
|
myChart.setOption(option, true);
|
||
|
|
}
|
||
|
|
|
||
|
|
function jsSetSize(x, y) {
|
||
|
|
var main = document.getElementById('main')
|
||
|
|
main.style.width = x + "px"
|
||
|
|
main.style.height = y + "px"
|
||
|
|
myChart.resize({ width: x, height: y });
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|