351 lines
11 KiB
HTML
351 lines
11 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<script src="esl.js"></script>
|
||
|
|
<script src="config.js"></script>
|
||
|
|
<link ref="stylesheet" href="reset.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<style>
|
||
|
|
.split {
|
||
|
|
line-height: 60px;
|
||
|
|
height: 60px;
|
||
|
|
background: #ddd;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
.main {
|
||
|
|
height: 80%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="info"></div>
|
||
|
|
<div id="main"></div>
|
||
|
|
|
||
|
|
<div class="split">Check toolbox dataZoom normal</div>
|
||
|
|
<div id="main1" class="main"></div>
|
||
|
|
<div class="split">y max min should not be excluded, dataZoom label should be accurately right</div>
|
||
|
|
<div id="main2" class="main"></div>
|
||
|
|
<div class="split">y max min should not be excluded, dataZoom label should be accurately right</div>
|
||
|
|
<div id="main3" class="main"></div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
require([
|
||
|
|
'echarts',
|
||
|
|
'echarts/chart/line',
|
||
|
|
'echarts/component/legend',
|
||
|
|
'echarts/component/grid',
|
||
|
|
'echarts/component/tooltip',
|
||
|
|
'echarts/component/dataZoomInside',
|
||
|
|
'echarts/component/toolbox'
|
||
|
|
], function (echarts) {
|
||
|
|
|
||
|
|
var main = document.getElementById('main1');
|
||
|
|
if (!main) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var chart = echarts.init(main);
|
||
|
|
|
||
|
|
chart.setOption({
|
||
|
|
"title": {
|
||
|
|
"text": ""
|
||
|
|
},
|
||
|
|
"tooltip": {
|
||
|
|
"trigger": "axis"
|
||
|
|
},
|
||
|
|
"legend": {
|
||
|
|
"data": [
|
||
|
|
"PV维度订阅转化率"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"toolbox": {
|
||
|
|
"show": true,
|
||
|
|
"feature": {
|
||
|
|
"dataZoom": {},
|
||
|
|
"dataView": {
|
||
|
|
"readOnly": true
|
||
|
|
},
|
||
|
|
"restore": {},
|
||
|
|
"saveAsImage": {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"calculable": true,
|
||
|
|
"xAxis": [
|
||
|
|
{
|
||
|
|
"type": "category",
|
||
|
|
"boundaryGap": false,
|
||
|
|
"data": [
|
||
|
|
"20160401",
|
||
|
|
"20160402",
|
||
|
|
"20160403",
|
||
|
|
"20160404",
|
||
|
|
"20160405",
|
||
|
|
"20160406",
|
||
|
|
"20160407",
|
||
|
|
"20160408",
|
||
|
|
"20160409",
|
||
|
|
"20160410"
|
||
|
|
]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"yAxis": [
|
||
|
|
{
|
||
|
|
"type": "value",
|
||
|
|
"axisLabel": {
|
||
|
|
"formatter": "{value}%"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"series": [
|
||
|
|
{
|
||
|
|
"type": "line",
|
||
|
|
"name": "PV维度订阅转化率",
|
||
|
|
"data": [
|
||
|
|
46.646153846153844,
|
||
|
|
48.75454799888049,
|
||
|
|
49.122247047558254,
|
||
|
|
47.80918727915194,
|
||
|
|
50.140845070422536,
|
||
|
|
51.89201877934272,
|
||
|
|
52.307692307692314,
|
||
|
|
48.93327280980481,
|
||
|
|
46.012832263978005,
|
||
|
|
42.89077212806026
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
require([
|
||
|
|
'echarts',
|
||
|
|
'echarts/chart/line',
|
||
|
|
'echarts/chart/bar',
|
||
|
|
'echarts/component/legend',
|
||
|
|
'echarts/component/grid',
|
||
|
|
'echarts/component/tooltip',
|
||
|
|
'echarts/component/dataZoom'
|
||
|
|
], function (echarts) {
|
||
|
|
|
||
|
|
var main = document.getElementById('main2');
|
||
|
|
if (!main) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var chart = echarts.init(main);
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
"title": {
|
||
|
|
"text": "1个月数据",
|
||
|
|
"left": "center"
|
||
|
|
},
|
||
|
|
"tooltip": {
|
||
|
|
"trigger": "axis"
|
||
|
|
},
|
||
|
|
"dataZoom": [
|
||
|
|
{
|
||
|
|
"show": true,
|
||
|
|
"yAxisIndex": 0,
|
||
|
|
"filterMode": "empty",
|
||
|
|
"width": 12,
|
||
|
|
"handleSize": 8,
|
||
|
|
labelPrecision: 7,
|
||
|
|
"showDataShadow": false,
|
||
|
|
"right": 42
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"legend": [
|
||
|
|
{
|
||
|
|
"data": [
|
||
|
|
"重量"
|
||
|
|
],
|
||
|
|
"top": 36,
|
||
|
|
"left": "center"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"grid": [
|
||
|
|
{
|
||
|
|
"left": 80,
|
||
|
|
"top": 90,
|
||
|
|
"right": 58,
|
||
|
|
"height": 350
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"xAxis": [
|
||
|
|
{
|
||
|
|
"boundaryGap": false,
|
||
|
|
"data": [
|
||
|
|
"2016-02-17",
|
||
|
|
"2016-02-18",
|
||
|
|
"2016-02-19",
|
||
|
|
"2016-02-20",
|
||
|
|
"2016-02-21",
|
||
|
|
"2016-02-22",
|
||
|
|
"2016-02-23",
|
||
|
|
"2016-02-24",
|
||
|
|
"2016-02-25",
|
||
|
|
"2016-02-26",
|
||
|
|
"2016-02-27",
|
||
|
|
"2016-02-28",
|
||
|
|
"2016-02-29",
|
||
|
|
"2016-03-01",
|
||
|
|
"2016-03-02",
|
||
|
|
"2016-03-03",
|
||
|
|
"2016-03-04"
|
||
|
|
]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"yAxis": [
|
||
|
|
{
|
||
|
|
"name": "重量(g)"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"series": [
|
||
|
|
{
|
||
|
|
"type": "line",
|
||
|
|
"data": [
|
||
|
|
"241.68",
|
||
|
|
"12703.10",
|
||
|
|
"17724.90",
|
||
|
|
"17722.60",
|
||
|
|
"12326.70",
|
||
|
|
"12703.10",
|
||
|
|
"17724.90",
|
||
|
|
// "17755.13984",
|
||
|
|
"17722.60",
|
||
|
|
"12326.70",
|
||
|
|
"-290.01",
|
||
|
|
"-12736.80",
|
||
|
|
"-12361.40",
|
||
|
|
"-0.00",
|
||
|
|
"-290.01",
|
||
|
|
"-12736.80",
|
||
|
|
"-8525.49",
|
||
|
|
"-15918.30"
|
||
|
|
],
|
||
|
|
"name": "重量"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
chart.setOption(option);
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
require([
|
||
|
|
'echarts',
|
||
|
|
'echarts/chart/line',
|
||
|
|
'echarts/chart/bar',
|
||
|
|
'echarts/component/legend',
|
||
|
|
'echarts/component/grid',
|
||
|
|
'echarts/component/tooltip',
|
||
|
|
'echarts/component/dataZoom'
|
||
|
|
], function (echarts) {
|
||
|
|
|
||
|
|
var main = document.getElementById('main3');
|
||
|
|
if (!main) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var chart = echarts.init(main);
|
||
|
|
|
||
|
|
option = {
|
||
|
|
"title": {
|
||
|
|
"text": "1个月温度",
|
||
|
|
"left": "center"
|
||
|
|
},
|
||
|
|
"tooltip": {
|
||
|
|
"trigger": "axis"
|
||
|
|
},
|
||
|
|
"dataZoom": [
|
||
|
|
{
|
||
|
|
"show": true,
|
||
|
|
"yAxisIndex": 0,
|
||
|
|
//endValue:83.57,
|
||
|
|
"filterMode": "empty",
|
||
|
|
labelPrecision: 4,
|
||
|
|
"showDataShadow": false
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"legend": [
|
||
|
|
{
|
||
|
|
"data": [
|
||
|
|
"温度"
|
||
|
|
],
|
||
|
|
"top": 31,
|
||
|
|
"left": "center"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"grid": {},
|
||
|
|
"xAxis": [
|
||
|
|
{
|
||
|
|
"data": [
|
||
|
|
"2015-12-08",
|
||
|
|
"2015-12-09",
|
||
|
|
"2015-12-10",
|
||
|
|
"2015-12-11",
|
||
|
|
"2015-12-12"
|
||
|
|
]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"yAxis": [
|
||
|
|
{
|
||
|
|
"name": "温度(℃)"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"series": [
|
||
|
|
{
|
||
|
|
"type": "line",
|
||
|
|
"data": [
|
||
|
|
"83.56",
|
||
|
|
"83.39",
|
||
|
|
"55.10",
|
||
|
|
"-5.47",
|
||
|
|
"-62.83"
|
||
|
|
],
|
||
|
|
"name": "温度"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
chart.setOption(option);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|