Ajax 获取 JSON 数据填充 ECharts 折线图

最新推荐文章于 2021-10-18 11:05:04 发布

小涛Dirge

最新推荐文章于 2021-10-18 11:05:04 发布

阅读量591

点赞数 1

文章标签： ECharts JSON Ajax

本文链接：https://blog.csdn.net/tyt_XiaoTao/article/details/109720681

版权

效果图
在这里插入图片描述
页面 HTML 代码
引入 echarts.js 和 jquery.js 库脚本代码。

<!DOCTYPE html>
<head>
    <title>echarts</title>
    <style>
        * {
            margin: 0%;
            padding: 0%;
        }

        html,body {
            width: 100%;
            height: 100%;
        }

        #echarts {
            height: 300px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="echarts"></div>
    <script type="text/javascript" src="echarts.js"></script>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        var mychartdd = echarts.init(document.getElementById('echarts'));
        var seriesName1 = '活动一';
        var seriesName2 = '活动二';
        var seriesName3 = '活动三';
        var seriesName4 = '活动四';
        var seriesName5 = '活动五';
        option = {
            title: {
                x: 'center',
                y: 'top',
                text: '',
                subtext: '活动趋势图',
                subtextStyle: {
                    fontWeight: 'bolder',
                    color: '#000'
                }
            },
            legend: {
                x: 'center',
                y: 'top',
                data: [seriesName1, seriesName2, seriesName3, seriesName4, seriesName5]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: false,
                feature: {
                    saveAsImage: { show: false }
                } 
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: seriesName1,
                    type: 'line',
                    data: []
                },
                {
                    name: seriesName2,
                    type: 'line',
                    data: []
                },
                {
                    name: seriesName3,
                    type: 'line',
                    data: []
                },
                {
                    name: seriesName4,
                    type: 'line',
                    data: []
                },
                {
                    name: seriesName5,
                    type: 'line',
                    data: []
                }
            ]
        };
        mychartdd.setOption(option);

        $(function(){
            var SoilTemp1 = [], SoilTemp2 = [], SoilTemp3 = [], SoilTemp4 = [], SoilTemp5 = [];// Y坐标值
            var TM = [];// x坐标值:时间
            mychartdd.showLoading({ text: "图表数据正在努力加载..." });
            $.ajax({
                type: "GET",
                // 请求地址
                url: "http://localhost:8080/proj/echarts/getAll",
                success: function (ret) {
                    var date = ret;
                    if (date == null) {
                        mychartdd.showLoading({ text: "未获取到数据，请选择正确的时间..." });
                    }
                    for (var i = 0; i < date.length; i++) {
                        TM.push(date[i].DATE);
                        SoilTemp1.push(date[i].TYPE_1);
                        SoilTemp2.push(date[i].TYPE_2);
                        SoilTemp3.push(date[i].TYPE_3);
                        SoilTemp4.push(date[i].TYPE_4);
                        SoilTemp5.push(date[i].TYPE_5);
                    }
                    mychartdd.hideLoading();    //隐藏加载动画
                    mychartdd.setOption({       //加载数据图表
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            show: false,
                            feature: {
                                saveAsImage: { show: false }
                            }
                        },
                        calculable: true,
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: TM
                        },
                        yAxis: {},//注意一定不能丢了这个，不然图表Y轴不显示
                        series: [
                            {
                                name: seriesName1,
                                type: 'line',
                                data: SoilTemp1
                            },
                            {
                                name: seriesName2,
                                type: 'line',
                                data: SoilTemp2
                            },
                            {
                                name: seriesName3,
                                type: 'line',
                                data: SoilTemp3
                            },
                            {
                                name: seriesName4,
                                type: 'line',
                                data: SoilTemp4
                            },
                            {
                                name: seriesName5,
                                type: 'line',
                                data: SoilTemp5
                            }
                        ]
                    });
                }
            });
        });
    </script>
</body>
</html>

Java 代码

@RequestMapping("/echarts/getAll")
@ResponseBody
public List<HashMap<String, Object>> echartsJson() {
   List<HashMap<String, Object>> retList = new ArrayList<>();
   Random random = new Random();
   for (int i = 1; i <= 7; i++) {
       HashMap<String, Object> map = new HashMap<>();
       map.put("DATE", "2020110" + i);
       map.put("TYPE_1", random.nextInt(100));
       map.put("TYPE_2", random.nextInt(100));
       map.put("TYPE_3", random.nextInt(100));
       map.put("TYPE_4", random.nextInt(100));
       map.put("TYPE_5", random.nextInt(100));
       retList.add(map);
   }
   return retList;
}