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

矫情吗；* 2022-12-21 13:54 117阅读 0赞

**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5dF9YaWFvVGFv_size_16_color_FFFFFF_t_70_pic_center]  
**页面 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;
    }

> 参考地址：  
> https://www.cnblogs.com/benmumu/p/8316652.html  
> https://echarts.apache.org/examples/zh/editor.html?c=line-stack

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5dF9YaWFvVGFv_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f0baf0b4e14540cab5784c3d2768cae7.png