springboot整合echarts画折线图

最新推荐文章于 2024-05-31 13:39:52 发布

识时务者111

最新推荐文章于 2024-05-31 13:39:52 发布

阅读量584

点赞数 8

本文链接：https://blog.csdn.net/fcfs_sstf/article/details/136336777

版权

实用工具快速开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

编写数据请求代码：

controller层：

@Api(tags = "测试接口")
@ApiSort(value = 4)
@RestController
@RequestMapping
@Slf4j
public class TestController {
        @Autowired
        private ZrFsElesService zrFsElesService;
    
        @GetMapping("/test")
        @ApiOperation(value = "测试echarts画图", httpMethod = "GET")
        public Result first(){
            return zrFsElesService.queryDataHistoryList("1", "2023-01-01 00:00:00", "2024-03-01 00:00:00");
        }
    }

实现层略

在resource文件夹下创建static

编写html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="zx" style="width:1800px; height: 400px"></div>
//引入网上的echarts依赖
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script>
  //echarts 折线图格式（如果想用其他图表，需要更换option代码段）
    const option = {
        title: {
            text: 'γ剂量率日报',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'line'
            }
        ]
    };
    var chartDom = document.getElementById('zx');
    var myChart = echarts.init(chartDom);

    //直接读取/test 接口数据,为option 数据赋值
     fetch("/test").then(response => response.json()).then(res => {
         console.log(res)
         console.log(res.data)
         const date = res.data.map(v => v.obsTime)
         option.xAxis.data = date;
         option.title.text = option.title.text + date[0].substr(0,10)
       res.data.forEach(item =>{
             console.log(item)
             option.series[0].data.push(data = item.a)
         })
         myChart.setOption(option);
     })
</script>
</body>
</html>

以上是折线图的具体实现，
如果想换不同的图表，可以在echarts官网查找相应option代码段如下地址 https://echarts.apache.org/examples/zh/index.html
如果有引用其他js包，可以从echarts官网下载，也可以在https://www.bootcdn.cn/echarts/地址下引用网上的依赖