springboot+echarts +mysql制作数据可视化大屏（四图）

由于篇幅所限，这里只提供了一个简化版的代码示例，用于演示如何在Spring Boot应用中整合ECharts，并展示一个基本的柱状图。




// 引入相关依赖
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.LinkedHashMap;
import java.util.Map;
 
@RestController
public class EChartsController {
 
    // 模拟从数据库获取数据
    private Map<String, Integer> getDataFromDatabase() {
        Map<String, Integer> data = new LinkedHashMap<>();
        // 假设这里从MySQL数据库获取数据
        data.put("类别1", 10);
        data.put("类别2", 20);
        data.put("类别3", 30);
        data.put("类别4", 40);
        return data;
    }
 
    // 提供一个API接口用于获取ECharts的数据
    @GetMapping("/echarts/data")
    public Map<String, Integer> getEChartsData() {
        return getDataFromDatabase();
    }
}

前端代码（简化版）：




<!DOCTYPE html>
<html>
<head>
    <title>ECharts 示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
        // 从后端获取数据
        fetch('/echarts/data')
            .then(response => response.json())
            .then(data => {
                // 使用获取到的数据设置ECharts的配置项
                Object.keys(data).forEach(key => {
                    option.xAxis.data.push(key);
                    option.series[0].data.push(data[key]);
                });
                // 更新图表
                myChart.setOption(option);
            });
    </script>
</body>
</html>

这个简化版的代码示例展示了如何在Spring Boot应用中使用ECharts，并通过一个API接口从数据库获取数据，然后将这些数据用于ECharts图表的展示。这个示例仅展示了ECharts的基础用法，并没有包含数据库连接、异常处理等实际开发中

springboot+echarts +mysql制作数据可视化大屏（四图）

评论已关闭

推荐阅读