temperature/index.html at master · WuliMobao/temperature · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Temperature</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
	<style>
	body {
		height:100%;
		width: 100%;
		margin: 0;
		}
	</style>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width:100％;height:346px;background-color:#494A5F;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'),);

        // 指定图表的配置项和数据

option = {
    color: ['#1ABC9C', '#EDBC34', '#049DFF'],
    title: {
        text: '体温变化趋势（平均值）',
		textStyle: {
		color: '#FFF'
		},
		left: 'center'
	},
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '5%',
        right: '3%',
        top: '16%',
        bottom: '7%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            },
			axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
            },
            axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',
                        width:'2'
                    }
            }
        }
    ],
    yAxis: {
        type: 'value',
        name: '体温（℃）',
		nameLocation: 'end',
        min: 34.0,
        max: 40.0,
        interval: 1.0,
		axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
            },
            axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',
                        width:'2'
                    }
            }
    },
    series: [
        {
            name:'体温',
            type:'line',
            data:[36.9, 37.1, 38.2, 38.5, 36.6, 36.6, 35.5, 36, 38.3, 36.9, 38, 36.5],
			markArea: {
                itemStyle: {
                    color: 'rgb(225, 0, 0,0.4)'
                },
                label: {
                    color: '#FFF',
                    fontWeight: 'bolder',
					fontSize: '12',
                    position: 'insideLeft',
                },
                data: [ [{
                    name: '标\n准\n体\n温\n范\n围',
                    yAxis: '36.0'
                }, {
                    yAxis: '37.6'
                }],
                ],
				silent: true
            }
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>