<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Loading</title>
<script src="../../js/echarts.js"></script>
<script src="../../js/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h
2 style="width:100%;text-align:center">ALG各部门每周工时</h
2>
<div style="margin-bottom:
20px;">
<label><input type="radio" name="chartType" value="bar" checked onchange="handleRadioChange()"/> Bar</label>
<label><input type="radio" name="chartType" value="line" onchange="handleRadioChange()"/> Line</label>
</div>
<div id="barChart" style="width: 100%; height:700px;"></div>
<div id="lineChart" style="width: 100%; height:700px;"></div>
</div>
<div>
<h
2 style="width:100%;text-align:center">ALG各部门每月工时</h
2>
<div style="margin-bottom:
20px;">
<label><input type="radio" name="chartTypeM" value="bar" checked onchange="handleRadioChangeM()"/> Bar</label>
<label><input type="radio" name="chartTypeM" value="line" onchange="handleRadioChangeM()"/> Line</label>
</div>
<div id="barChartM" style="width: 100%; height:800px;"></div>
<div id="lineChartM" style="width: 100%; height:800px;"></div>
</div>
</form>
<script>
let barChartInstance = null;
let lineChartInstance = null;
let barChartInstanceM = null;
let lineChartInstanceM = null;
window.onload = fetchDataAndDrawCharts;
function fetchDataAndDrawCharts() {
fetch('ChartW.aspx/GetData', {
method: 'POST',
headers: { 'Content-Type': 'application/json; charset=utf-8' },
body: JSON.stringify({})
})
.then(response => response.json())
.then(data => {
const parsedData = JSON.parse(data.d);
initCharts(parsedData.dataW, 'barChart', 'lineChart', 'bar', 'line');
initCharts(parsedData.dataM, 'barChartM', 'lineChartM', 'bar', 'line');
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
function initCharts(data, barChartId, lineChartId, defaultTypeBar, defaultTypeLine) {
const labels = data.map(item => item.Model);
const seriesNames = ['AG1', 'AG
2', 'AG
6', 'AG7', 'AG8', 'AG9', 'AL
2', 'AL5', 'AL
6', 'AL7', 'AL8', 'AL9', 'L03','L08', 'L1
2', 'L
23', 'L33', 'LMC'];
const seriesBar = seriesNames.map(name => ({
name: `${name}`,
type: 'bar',
data: data.map(item => item[name]),
stack: name,
barGap: '0%'
}));
const seriesLine = seriesNames.map(name => ({
name: `${name} `,
type: 'line',
data: data.map(item => item[name]),
smooth: true
}));
const barChartInstance = echarts.init(document.getElementById(barChartId));
barChartInstance.setOption(getChartOption(labels, seriesBar));
const lineChartInstance = echarts.init(document.getElementById(lineChartId));
lineChartInstance.setOption(getChartOption(labels, seriesLine));
if (barChartId === 'barChart') {
window.barChartInstance = barChartInstance;
window.lineChartInstance = lineChartInstance;
showChart(defaultTypeBar);
} else {
window.barChartInstanceM = barChartInstance;
window.lineChartInstanceM = lineChartInstance;
showChartM(defaultTypeBar);
}
}
function getChartOption(labels, seriesData) {
return {
tooltip: {
trigger: 'axis',
formatter: function (params) {
let result = params[0].name + '<br/>';
params.forEach(function (item) {
result += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br/>';
});
return result;
}
},
legend: { data: seriesData.map(s => s.name) },
color: ['#5470C
6', '#91CC75', '#B
22222', '#FF1493', '#FFE4E1', '#9400D3', '#FF4500', '#3
2CD3
2', '#008080', '#191970', '#FF8C00', '#B88
60B', '#FFFACD', '#00
6400', '#7FFFD4', '#483D8B', '#778899', '#00BFFF'],
xAxis: { type: 'category', data: labels },
yAxis: {
type: 'value',
name: '工时/h',
nameGap: 15,
nameTextStyle: { fontSize: 15, color: '#333' },
},
series: seriesData
};
}
function showChart(type) {
const barDiv = document.getElementById('barChart');
const lineDiv = document.getElementById('lineChart');
barDiv.style.display = type === 'bar' ? 'block' : 'none';
lineDiv.style.display = type === 'line' ? 'block' : 'none';
if (type === 'bar') window.barChartInstance.resize();
if (type === 'line') window.lineChartInstance.resize();
}
function handleRadioChange() {
const selectedType = document.querySelector('input[name="chartType"]:checked').value;
showChart(selectedType);
}
function showChartM(type) {
const barDivM = document.getElementById('barChartM');
const lineDivM = document.getElementById('lineChartM');
barDivM.style.display = type === 'bar' ? 'block' : 'none';
lineDivM.style.display = type === 'line' ? 'block' : 'none';
if (type === 'bar') window.barChartInstanceM.resize();
if (type === 'line') window.lineChartInstanceM.resize();
}
function handleRadioChangeM() {
const selectedType = document.querySelector('input[name="chartTypeM"]:checked').value;
showChartM(selectedType);
}
</script>
</body>
</html>在这个页面中增加两个按钮，第一个按钮可以控制前六组数据是否显示，第二个按钮控制其他数据是否显示，给出完整代码
本文介绍了JavaScript中各种事件的基础知识，包括窗口事件、鼠标事件、键盘事件及表单事件等，并详细讲解了如何通过bind和unbind方法绑定和移除事件监听器，同时探讨了hover和toggle等复合事件的应用。
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
