图表
2021-01-20 本文已影响0人
糖糖_2c32
移动端横屏展示
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- ECharts单文件引入 -->
<!-- <script src="file:///android_asset/web/js/echarts.min.js"></script> -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1609266909542"></script>
<style>
table {
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid #b0b0b0;
}
th {
background-color: green;
color: white;
}
#mask {
display: none;
background: rgba(0, 0, 0, 0.3);
z-index: 999999999;
width: 100%;
height: 300%;
position: fixed;
/*利用固定定位的好处：页面还可以上下翻动，但是始终处于灰色背景下*/
}
#show {
display: none;
background: white;
width: 90%;
/* height: 90%; */
position: fixed;
left: 45%;
top: 50%;
/* padding-bottom: 3%; */
padding: 0 2% 3%;
z-index: 999999999;
transform: translate(-45%, -50%);
}
#show #close_show {
position: relative;
left: 99%;
top: 1%;
font-size: 20px;
z-index: 999999999;
color: red;
width: 20px;
height: 20px;
cursor: pointer;
}
.main {
transform: rotate(90deg);
transform-origin: bottom left;
position: absolute;
top: -100vw;
height: 100vw;
width: 100vh;
}
</style>
</head>
<body style="height: 100%;width: 100%; margin: 0">
<div class="main">
<!-- 定义一个蒙层 -->
<div id="mask"></div>
<!-- 显示放大后的图 -->
<div id="show">
<span id="close_show">×</span>
<div id="enlarge" style="width:100%;height:80%"></div>
</div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="lineChart" style="height: 100%;width:100%;padding-top:5%;"></div>
</div>
<script type="text/javascript">
var dom = document.getElementById('lineChart');
var myChart = echarts.init(dom);
var app = {};
var option = null;
var xAxisData = [
'00:00', '00:15', '00:30', '00:45','01:00', '01:15', '01:30', '01:45',
'02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45',
'04:00', '04:15', '04:30', '04:45','05:00', '05:15', '05:30', '05:45',
'06:00', '06:15', '06:30', '06:45','07:00', '07:15', '07:30', '07:45',
'08:00', '08:15', '08:30', '08:45','09:00', '09:15', '09:30', '09:45',
'10:00', '10:15', '10:30', '10:45','11:00', '11:15', '11:30', '11:45',
'12:00', '12:15', '12:30', '12:45','13:00', '13:15', '13:30', '13:45',
'14:00', '14:15', '14:30', '14:45','15:00', '15:15', '15:30', '15:45',
'16:00', '16:15', '16:30', '16:45','17:00', '17:15', '17:30', '17:45',
'18:00', '18:15', '18:30', '18:45','19:00', '19:15', '19:30', '19:45',
'20:00', '20:15', '20:30', '20:45','21:00', '21:15', '21:30', '21:45',
'22:00', '22:15', '22:30', '22:45','23:00', '23:15', '23:30', '23:45', '24:00'
];
var datas = [
['00:00', 111],['00:15', 220],['00:30', 130],['00:45', 150],
['01:00', 124],['01:15', 120],['01:30', 210],['01:45', 240],
['02:00', 139],['02:15', 220],['02:30', 320],['02:45', 250],
['03:00', 211],['03:15', 120],['03:30', 310],['03:45', 320],
['04:00', 311],['04:15', 210],['04:30', 110],['04:45', 120],
['05:00', 151],['05:15', 230],['05:30', 210],['05:45', 240],
['06:00', 124],['06:15', 120],['06:30', 310],['06:45', 210],
['07:00', 139],['07:15', 230],['07:30', 240],['07:45', 320],
['08:00', 131],['08:15', 310],['08:30', 110],['08:45', 150],
['09:00', 123],['09:15', 201],['09:30', 320],['09:45', 170],
['10:00', 212],['10:15', 209],['10:30', 130],['10:45', 290],
['11:00', 141],['11:15', 220],['11:30', 230],['11:45', 250],
['12:00', 132],['12:15', 120],['12:30', 330],['12:45', 450],
['13:00', 251],['13:15', 201],['13:30', 130],['13:45', 150],
['14:00', 113],['14:15', 120],['14:30', 230],['14:45', 250],
['15:00', 131],['15:15', 220],['15:30', 130],['15:45', 350],
['16:00', 111],['16:15', 320],['16:30', 320],['16:45', 250],
['17:00', 142],['17:15', 220],['17:30', 340],['17:45', 150],
['18:00', 219],['18:15', 120],['18:30', 130],['18:45', 123],
['19:00', 241],['19:15', 320],['19:30', 340],['19:45', 234],
['20:00', 123],['20:15', 120],['20:30', 130],['20:45', 123],
['21:00', 142],['21:15', 220],['21:30', 350],['21:45', 213],
['22:00', 156],['22:15', 320],['22:30', 130],['22:45', 123],
['23:00', 241],['23:15', 210],['23:30', 320],['23:45', 150]
];
var datasLast = [
['21:00', 11],['21:15', 20],['21:30', 30],['21:45', 50],['22:00', 11],['22:15', 20],
['22:30', 30],['22:45', 50],['23:00', 11],['23:15', 20],['23:30', 30],['23:45', 50]
];
var datasNew = [
['00:00', 9],['00:15', 10],['00:30', 31],['00:45', 34],['01:00', 21],['01:15', 12],
['01:30', 12],['01:45', 43],['02:00', 15],['02:15', 32],['02:30', 32],['02:45', 23],
['03:00', 11],['03:15', 23],['03:30', 42],['03:45', 12],['04:00', 11],['04:15', 20],
['04:30', 12],['04:45', 21]
];
var dateList = datas.map(function(item) {
return item[0];
});
var valueList = datas.map(function(item) {
return item[1];
});
var dateListNew = datasNew.map(function(item) {
return item[1];
});
var dateListLast = datasLast.map(function(item) {
return item[1];
});
// console.log(getMaxArray(datas));
function getMaxArray(dataList) {
var max = dataList[0][1];
var maxIndex = 0;
var min = dataList[0][1];
var minIndex = 0;
for (var i = 0; i < dataList.length; i++) {
if (typeof dataList[i][1] !== 'undefined') {
if (max < dataList[i][1]) {
max = dataList[i][1];
maxIndex = i;
}
if (min > dataList[i][1]) {
min = dataList[i][1];
minIndex = i;
}
}
}
return [
[dataList[maxIndex][0], max],
[dataList[minIndex][0], min]
];
}
function getMaxArrayByList(xAxisList, yAxisList) {
var max = yAxisList[0];
var maxIndex = 0;
var min = yAxisList[0];
var minIndex = 0;
var num = 0;
var numIndex = 0;
for (var i = 0; i < yAxisList.length; i++) {
if (max < yAxisList[i]) {
max = yAxisList[i];
maxIndex = i;
}
if (min > yAxisList[i]) {
min = yAxisList[i];
minIndex = i;
}
num += yAxisList[i];
numIndex = i + 1;
}
num = num / numIndex;
console.log(num + ' , ' + numIndex);
// console.log(min + ' , ' + dataList[minIndex][0]);
return [
[xAxisList[maxIndex], yAxisList[maxIndex]],
[xAxisList[minIndex], yAxisList[minIndex]],
[num]
];
}
option = {
//title: {
// text: '未来一周气温变化',
// subtext: '纯属虚构'
//},
tooltip: {
trigger: 'axis',
// backgroundColor: "rgba(255,255,255,0.8)"
},
color: ['#ffcc00', '#33cc00', '#cc0000'],
// grid: {
// containLabel: true,
// top: '13%',
// bottom: '13%',
// left: '13%',
// right: '13%'
// },
legend: {
data: ['A相电流', 'B相电流', 'C相电流']
},
toolbox: {
show: true,
feature: {
//自定义图形按钮，需以my开头
myButton: {
show: true,
title: '表格展示',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function() {
var mask = document.getElementById("mask");
var show = document.getElementById("show");
var enlarge = document.getElementById("enlarge");
mask.style.display = "block";
show.style.display = "block";
//myChart.getOption()获取当前图形的配置项option
var opt = myChart.getOption();
var axisData = opt.xAxis[0].data;
var series = opt.series;
console.log(series[0].data);
var aData = getMaxArrayByList(axisData, series[0].data);
var bData = getMaxArrayByList(axisData, series[1].data);
var cData = getMaxArrayByList(axisData, series[2].data);
console.log(aData);
var table = '<table style="width:100%;text-align:center;"><tbody><tr>' +
'<th>采集因子</th>' +
'<th>' + '最大值(A)' + '</th>' +
'<th>' + '最大时间' + '</th>' +
'<th>' + '最小值(A)' + '</th>' +
'<th>' + '最小时间' + '</th>' +
'<th>' + '平均值(A)' + '</th>' +
'</tr>';
table += '<tr>' +
'<td>' + series[0].name + '</td>' +
'<td>' + aData[0][1] + '</td>' +
'<td>' + aData[0][0] + '</td>' +
'<td>' + aData[1][1] + '</td>' +
'<td>' + aData[1][0] + '</td>' +
'<td>' + aData[2][0].toFixed(2) + '</td>' +
'</tr>';
table += '<tr>' +
'<td>' + series[1].name + '</td>' +
'<td>' + bData[0][1] + '</td>' +
'<td>' + bData[0][0] + '</td>' +
'<td>' + bData[1][1] + '</td>' +
'<td>' + bData[1][0] + '</td>' +
'<td>' + bData[2][0].toFixed(2) + '</td>' +
'</tr>';
table += '<tr>' +
'<td>' + series[2].name + '</td>' +
'<td>' + cData[0][1] + '</td>' +
'<td>' + cData[0][0] + '</td>' +
'<td>' + cData[1][1] + '</td>' +
'<td>' + cData[1][0] + '</td>' +
'<td>' + cData[2][0].toFixed(2) + '</td>' +
'</tr>';
// console.log(series[0].data);
table += '</tbody></table>';
enlarge.innerHTML = table;
console.log(show.outerWidth);
var close_show = document.getElementById("close_show");
close_show.addEventListener('click', function() {
console.log('----------');
mask.style.display = "none";
show.style.display = "none";
});
}
},
// dataZoom: {
// yAxisIndex: 'none'
// },
// dataView: {
// readOnly: false
// },
dataView: {
show: true,
title: '数据视图',
readOnly: true,
},
magicType: {
type: ['line', 'bar']
},
restore: {},
// saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData
},
yAxis: {
name: '单位(A)',
type: 'value',
},
series: [{
name: 'A相电流',
type: 'line',
smooth: true,
data: valueList,
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}, {
name: 'B相电流',
type: 'line',
smooth: true,
data: dateListNew,
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}, ]
}
}, {
name: 'C相电流',
type: 'line',
smooth: true,
data: dateListLast,
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}, ]
}
}, {
type: 'line',
markArea: {
data: [
[{
name: '谷',
xAxis: '00:00',
//区域的颜色
itemStyle: {
color: "rgba(255, 0, 0, 0.05)"
},
//字‘谷’的颜色
// label: {
// color: 'rgba(255, 0, 0, 0.05)'
// }
}, {
xAxis: '08:00'
}],
[{
name: '尖',
xAxis: '08:00',
itemStyle: {
color: 'rgba(51, 153, 255, 0.05)'
}
}, {
xAxis: '12:00'
}],
[{
name: '峰',
xAxis: '12:00',
itemStyle: {
color: "rgba(255, 0, 0, 0.05)"
},
}, {
xAxis: '21:00'
}],
[{
name: '平',
xAxis: '21:00',
itemStyle: {
color: 'rgba(51, 153, 255, 0.05)'
}
}, {
xAxis: '24:00'
}]
]
}
}, ]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
function resetNull() {
//option.series = [];
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
</script>
</body>
</html>
浏览器展示
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- ECharts单文件引入 -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1609266909542"></script>
</head>
<body style="height: 100%; margin: 0">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="lineChart" style="height: 100%"></div>
<script type="text/javascript">
var dom = document.getElementById('lineChart');
var myChart = echarts.init(dom);
var app = {};
var option = null;
var xAxisData = [
'00:00', '00:15', '00:30', '00:45',
'01:00', '01:15', '01:30', '01:45',
'02:00', '02:15', '02:30', '02:45',
'03:00', '03:15', '03:30', '03:45',
'04:00', '04:15', '04:30', '04:45',
'05:00', '05:15', '05:30', '05:45',
'06:00', '06:15', '06:30', '06:45',
'07:00', '07:15', '07:30', '07:45',
'08:00', '08:15', '08:30', '08:45',
'09:00', '09:15', '09:30', '09:45',
'10:00', '10:15', '10:30', '10:45',
'11:00', '11:15', '11:30', '11:45',
'12:00', '12:15', '12:30', '12:45',
'13:00', '13:15', '13:30', '13:45',
'14:00', '14:15', '14:30', '14:45',
'15:00', '15:15', '15:30', '15:45',
'16:00', '16:15', '16:30', '16:45',
'17:00', '17:15', '17:30', '17:45',
'18:00', '18:15', '18:30', '18:45',
'19:00', '19:15', '19:30', '19:45',
'20:00', '20:15', '20:30', '20:45',
'21:00', '21:15', '21:30', '21:45',
'22:00', '22:15', '22:30', '22:45',
'23:00', '23:15', '23:30', '23:45', '24:00'
];
var datas = [
['00:00', 111],
['00:15', 220],
['00:30', 130],
['00:45', 150],
['01:00', 124],
['01:15', 120],
['01:30', 210],
['01:45', 240],
['02:00', 139],
['02:15', 220],
['02:30', 320],
['02:45', 250],
['03:00', 211],
['03:15', 120],
['03:30', 310],
['03:45', 320],
['04:00', 311],
['04:15', 210],
['04:30', 110],
['04:45', 120],
['05:00', 151],
['05:15', 230],
['05:30', 210],
['05:45', 240],
['06:00', 124],
['06:15', 120],
['06:30', 310],
['06:45', 210],
['07:00', 139],
['07:15', 230],
['07:30', 240],
['07:45', 320],
['08:00', 131],
['08:15', 310],
['08:30', 110],
['08:45', 150],
['09:00', 123],
['09:15', 201],
['09:30', 320],
['09:45', 170],
['10:00', 212],
['10:15', 209],
['10:30', 130],
['10:45', 290],
['11:00', 141],
['11:15', 220],
['11:30', 230],
['11:45', 250],
['12:00', 132],
['12:15', 120],
['12:30', 330],
['12:45', 450],
['13:00', 251],
['13:15', 201],
['13:30', 130],
['13:45', 150],
['14:00', 113],
['14:15', 120],
['14:30', 230],
['14:45', 250],
['15:00', 131],
['15:15', 220],
['15:30', 130],
['15:45', 350],
['16:00', 111],
['16:15', 320],
['16:30', 320],
['16:45', 250],
['17:00', 142],
['17:15', 220],
['17:30', 340],
['17:45', 150],
['18:00', 219],
['18:15', 120],
['18:30', 130],
['18:45', 123],
['19:00', 241],
['19:15', 320],
['19:30', 340],
['19:45', 234],
['20:00', 123],
['20:15', 120],
['20:30', 130],
['20:45', 123],
['21:00', 142],
['21:15', 220],
['21:30', 350],
['21:45', 213],
['22:00', 156],
['22:15', 320],
['22:30', 130],
['22:45', 123],
['23:00', 241],
['23:15', 210],
['23:30', 320],
['23:45', 150],
];
var datasLast = [
['21:00', 11],
['21:15', 20],
['21:30', 30],
['21:45', 50],
['22:00', 11],
['22:15', 20],
['22:30', 30],
['22:45', 50],
['23:00', 11],
['23:15', 20],
['23:30', 30],
['23:45', 50]
];
var datasNew = [
['00:00', 9],
['00:15', 10],
['00:30', 31],
['00:45', 34],
['01:00', 21],
['01:15', 12],
['01:30', 12],
['01:45', 43],
['02:00', 15],
['02:15', 32],
['02:30', 32],
['02:45', 23],
['03:00', 11],
['03:15', 23],
['03:30', 42],
['03:45', 12],
['04:00', 11],
['04:15', 20],
['04:30', 12],
['04:45', 21]
];
var dateList = datas.map(function(item) {
return item[0];
});
var valueList = datas.map(function(item) {
return item[1];
});
var dateListNew = datasNew.map(function(item) {
return item[1];
});
var dateListLast = datasLast.map(function(item) {
return item[1];
});
option = {
//title: {
// text: '未来一周气温变化',
// subtext: '纯属虚构'
//},
tooltip: {
trigger: 'axis'
},
color: ['#ffcc00', '#33cc00', '#cc0000'],
legend: {
data: ['A相电流', 'B相电流', 'C相电流']
},
toolbox: {
show: true,
feature: {
myButton: {
show: true,
title: '自定义扩展方法1',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function() {
var imgChart = echarts.init(document.getElementById('lineChart'));
// imgChart.clear();
//myChart.getOption()获取当前图形的配置项option
// imgChart.setOption(myChart.getOption());
}
},
dataZoom: {
yAxisIndex: 'none'
},
// dataView: {
// readOnly: false
// },
dataView: {
show: true,
title: '数据视图',
readOnly: true,
// optionToContent: function(opt) {
// var axisData = opt.yAxis[0].data;
// console.log(axisData);
// var series = opt.series;
// var table = '<table class="dataViewTable"><tbody><tr class="dataViewTr">' +
// '<td class="dataViewHead">' + '记录要点' + '</td>' +
// '<td class="dataViewHead">' + '完成进度' + '</td>' +
// '</tr>';
// for (var i = 0, l = axisData.length; i < l; i++) {
// table += '<tr class="dataViewTr">' +
// '<td class="dataViewTd">' + axisData[i] + '</td>' +
// '<td class="dataViewTd">' + series[0].data[i] + '</td>' +
// '</tr>';
// }
// table += '</tbody></table>';
// return table;
// }
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData
},
yAxis: {
name: '单位(A)',
type: 'value',
},
series: [{
name: 'A相电流',
type: 'line',
smooth: true,
data: valueList,
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}, {
name: 'B相电流',
type: 'line',
smooth: true,
data: dateListNew,
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}, ]
}
}, {
name: 'C相电流',
type: 'line',
smooth: true,
data: dateListLast,
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}, ]
}
}, {
type: 'line',
markArea: {
data: [
[{
name: '谷',
xAxis: '00:00',
//区域的颜色
itemStyle: {
color: "rgba(255, 0, 0, 0.05)"
},
//字‘谷’的颜色
label: {
color: 'rgba(255, 0, 0, 0.05)'
}
}, {
xAxis: '08:00'
}],
[{
name: '尖',
xAxis: '08:00',
itemStyle: {
color: 'rgba(51, 153, 255, 0.05)'
}
}, {
xAxis: '12:00'
}],
[{
name: '峰',
xAxis: '12:00',
itemStyle: {
color: "rgba(255, 0, 0, 0.05)"
},
}, {
xAxis: '21:00'
}],
[{
name: '平',
xAxis: '21:00',
itemStyle: {
color: 'rgba(51, 153, 255, 0.05)'
}
}, {
xAxis: '24:00'
}]
]
}
}, ]
};
function createChart(type, json1, sign) {
option.yAxis = [];
option.yAxis.push({
'axisLabel': {
'formatter': '{value}' + sign,
'show': true,
'textStyle': {
'color': '#333',
'fontSize': 8,
'fontWeight': 'bold'
}
},
'axisLine': {
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'alignWithLabel': false,
'show': false
},
'scale': true,
'type': 'value',
});
option.series.push({
'smooth': true,
'name': json1.name,
'type': 'line',
'data': json1.data //温度数据
});
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
