利用echarts 显示图片信息
当前有个需求,需要对其进行相关统计,这里我们采用jquery3.6 与echarts.js 做相关图表,不解释,直接上代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Line Charts Side by Side</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<style>
/* 使用 flexbox 布局使图表并排 */
#chart-container {
display: flex;
justify-content: space-around; /* 控制图表之间的间距 */
}
.chart {
width: 45%; /* 每个图表占 45% 的宽度 */
height: 400px;
}
</style>
</head>
<body>
<!-- 包含两个图表的容器 -->
<div id="chart-container">
<!-- 第一个图表容器 -->
<div id="main1" class="chart"></div>
<!-- 第二个图表容器 -->
<div id="main2" class="chart"></div>
</div>
<script>
// 初始化第一个 echarts 实例
var myChart1 = echarts.init(document.getElementById('main1'));
// 初始化第二个 echarts 实例
var myChart2 = echarts.init(document.getElementById('main2'));
// 第一个图表：使用 AJAX 获取数据
function fetchDataForChart1() {
$.ajax({
url: 'get_chart_data.php', // 请求的 PHP 接口
method: 'GET',
dataType: 'json',
success: function (data) {
var option1 = {
title: {
text: '第一个图表（通过 AJAX 加载数据）'
},
tooltip: {},
xAxis: {
type: 'category',
data: data.categories
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
data: data.series,
label: {
show: true,
position: 'top'
}
}]
};
myChart1.setOption(option1);
},
error: function () {
var demoData1 = {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
series: [150, 230, 224, 218, 135, 147, 260]
};
var option1 = {
title: {
text: '第一个图表（使用默认数据）'
},
tooltip: {},
xAxis: {
type: 'category',
data: demoData1.categories
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
data: demoData1.series,
label: {
show: true,
position: 'top'
}
}]
};
myChart1.setOption(option1);
}
});
}
// 第二个图表：使用不同的数据
function fetchDataForChart2() {
var demoData2 = {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
series: [180, 210, 190, 240, 160, 170, 220]
};
var option2 = {
title: {
text: '第二个图表（使用默认数据）'
},
tooltip: {},
xAxis: {
type: 'category',
data: demoData2.categories
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
data: demoData2.series,
label: {
show: true,
position: 'top'
}
}]
};
myChart2.setOption(option2);
}
// 加载第一个图表数据
fetchDataForChart1();
// 加载第二个图表数据
fetchDataForChart2();
</script>
</body>
</html>效果图如下图所示:
原文地址：https://blog.csdn.net/u013416034/article/details/142364675
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！