| DIR:/home/drsekaran/public_html/admin/vendors/echarts/test/ |
| Current File : /home/drsekaran/public_html/admin/vendors/echarts/test/dataZoomHighPrecision.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> |