html获取后端传入的数据生成折线图 - 业余

最新推荐文章于 2024-05-13 17:00:28 发布

墨羽辞

最新推荐文章于 2024-05-13 17:00:28 发布

阅读量278

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_38331058/article/details/132476870

版权

1、后端 model 传参 -- modelMap

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.ArrayList;
import java.util.List;

@Controller
public class Test{

    @GetMapping("/testweb")
    public String putinfo(Model model){
        // 添加测试 List 作为数据源
        List<String> x=new ArrayList<>();
        List<Integer> y=new ArrayList<>();
        String titles="测试";

        x.add("a");
        x.add("b");
        x.add("c");
        y.add(1);
        y.add(2);
        y.add(1);
        
        // 使用 model 传递参数
        model.addAttribute("xz",x);
        model.addAttribute("yz",y);
        model.addAttribute("tl",titles);

        return "picture2";
    }

}

2、简单 html 页面 -- picture.html

方式一： var datainfo = "[[${xx}]]"

方式二：<span th:text="${info1.date}"></span>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>测试折线图</title>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body bgcolor="#e0ffff">
<div id="main" style="width: 1400px;height:600px;"></div>
</body>

<script type="text/javascript">
    // 后端传入的值会包含"[","]"和"，"，会导致数据错位
    var datafb = {
        labels:"[[${xz}]]".split('[')[1].split(']')[0].split(','),
        values:"[[${yz}]]".split('[')[1].split(']')[0].split(','),
        titleinfo:"[[${tl}]]"
    }
    // 初始化ECharts组件到id为main的元素上
    let myChart = echarts.init(document.getElementById('main'));
    // 定义图标的配置项
    let option = {
        title: {
            text: datafb.titleinfo.concat("折线图")
        },
        tooltip: {},
        // x轴配置
        xAxis: {
            data: datafb.labels
        },
        // y轴配置
        yAxis: {},
        series: [{
            // 数据集（也可以从后端的Controller中传入）
            data: datafb.values,
            // 图表类型，这里使用line，为折线图
            type: 'line'
        }]
    };
    myChart.setOption(option);
</script>
</html>

3、结果展示