ECharts+Thymeleaf取后端数据 Json数据渲染

json

适用于现代 C++ 的 JSON。

项目地址：https://gitcode.com/gh_mirrors/js/json

免费下载资源

Curtains Down

6305人浏览 · 2019-05-19 09:53:51

Curtains Down · 2019-05-19 09:53:51 发布

选取模板（https://echarts.baidu.com/examples/）：我选择的是那个动态折线（Dynamic Data + Time Axis）的模板，因为我我需要鼠标鼠标悬停后出现数据和时间，模板上面只有这一个最合适，但是我又不需要动态显示，所以我要做的工作就是1、消除动态。2、数据处理渲染。
后端传数据

如图后端model传添加data数据，接着返回historyTest视图。

前端接受数据：我们来到historyTest这个视图，原始的动态图ECharts（Dynamic Data + Time Axis）为（侵删）

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    }
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
    data.push(randomData());
}

option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};

setInterval(function () {

    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }

    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

接受数据用Thymeleaf的行内表达式：

var str4 = [[${data}]] ;

千万别忘加入支持行内表达式。

<script type="text/javascript" th:inline="javascript">

这样就能接收到前面传入的data数据了

消除动态：我们看下面一段代码就是实现动态的“罪魁祸首”

function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),//数据的name项就是x轴
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)//y轴数据项
        ]
    }
}

var data = [];//数据变量
var now = +new Date(1997, 9, 3);//时间
var oneDay = 24 * 3600 * 1000;//天
var value = Math.random() * 1000;//y轴数据项
for (var i = 0; i < 1000; i++) {

    data.push(randomData());//把随机数据传入
}

我们只要函数randomData（）函数加上参数，换成我们的json数据就行了。

接着我们处理json数据并传入形参：


    function randomData(price,go) {
        var now1 = new Date( parseInt(go));
        var p = price.toString();
        return {
            name: now1.toString(),
            value: [
                [now1.getFullYear(), now1.getMonth() + 1, now1.getDate()].join('/'),
                parseInt(price)
            ]
        }
    }
    var str4 = [[${data}]] ;
    var str3 = JSON.parse(str4);
    console.log(str3);
    var data = [];
    for (var i=0;i<str3.listPrice.length;i++){
        data.push(randomData(str3.listPrice[i].pr,str3.listPrice[i].dt.substring(6,str3.listPrice[i].dt.length-2)));
    }

完成渲染结果如图：

完整代码：

<!DOCTYPE html>
<html style="height: 100%" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript" th:inline="javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    /*function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        alert(now)
        return {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value)
            ]
        }
    }*/

    function randomData(price,go) {
        //alert("asd"+now);
        //console.log(go);
        var now1 = new Date( parseInt(go));
        //console.log(now1);
        //alert("asdass"+str3.listPrice[1].dt.substring(6,str3.listPrice[1].dt.length-7));
        var p = price.toString();
        return {
            name: now1.toString(),
            value: [
                [now1.getFullYear(), now1.getMonth() + 1, now1.getDate()].join('/'),
                parseInt(price)
            ]
        }
    }

   //str1 = str1.replace(/[\'\"\\\/\b\f\n\r\t]/g, '');
    var str4 = [[${data}]] ;
    //去除转义字符
    //str_pretty1 = JSON.stringify(str4);
    //str4 = str4.replace(/\"\"/g,"");
    //str4 = str4.replace(/[\'\\\/\b\f\n\r\t]/g, '');
    //console.log(str_pretty1);
    //var obj = eval("(" + str_pretty1 + ")");
    //alert(obj.datePrice);
    var str3 = JSON.parse(str4);
    console.log(str3);
    //alert(str3[0].);
    //alert(str3.listPrice[0].dt.substring(6,str3.listPrice[0].dt.length-2));

    var data = [];
   /* var now = +new Date(1997, 9, 3);
    alert(now);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;*/
   /* for (var i = 0; i < 20; i++) {

        data.push(randomData());
    }*/
    //var now = new Date(now);
    //alert(str3.listPrice[1].pr);
    //alert(typeof value);
    //i<str3.listPrice.length
    //alert("asdass"+str3.listPrice[1].dt.substring(6,str3.listPrice[1].dt.length-7));
    var lowerDate =  new Date( parseInt(str3.lowerDate.substring(6,str3.lowerDate.length-7)));
    for (var i=0;i<str3.listPrice.length;i++){
        data.push(randomData(str3.listPrice[i].pr,str3.listPrice[i].dt.substring(6,str3.listPrice[i].dt.length-2)));
    }

    option = {
        //表头
        title: {
            text: str3.spName+ "|最低价："+str3.lowerPrice+"|最低价时间："+lowerDate.getDate() + '/' + (lowerDate.getMonth() + 1) + '/' + lowerDate.getFullYear()+"|直达链接"+str3.spUrl
        },
        //提示框组件
        tooltip: {
            //坐标轴触发，主要用于柱状图、折线图等
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
                animation: false
            }
        },
        //横轴
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        //纵轴
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        //系列列表，每个系列通过type决定自己的图表类型
        series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data
        }]
    };

    setInterval(function () {

        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }, 1000);
    //显示模板信息
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>

GitHub 加速计划 / js / json

41.72 K

6.61 K

下载

适用于现代 C++ 的 JSON。

最近提交(Master分支：1 个月前 )

960b763e 4 个月前

8c391e04 6 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m