当前位置：首页 > news >正文

利用echarts 显示图片信息

news 2024/9/20 11:14:40

当前有个需求,需要对其进行相关统计,这里我们采用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>

效果图如下图所示: