mirror of
https://gitlab.com/JKANetwork/CheckServer.git
synced 2026-03-03 17:26:40 +01:00
Start again
This commit is contained in:
351
vendors/echarts/test/dataZoomHighPrecision.html
vendored
Normal file
351
vendors/echarts/test/dataZoomHighPrecision.html
vendored
Normal file
@@ -0,0 +1,351 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user