{"id":1210,"date":"2020-11-08T18:41:00","date_gmt":"2020-11-08T10:41:00","guid":{"rendered":"http:\/\/diuut.com\/?p=1210"},"modified":"2020-11-23T15:21:00","modified_gmt":"2020-11-23T07:21:00","slug":"themleafecharts%e5%88%b6%e4%bd%9c%e5%90%8e%e5%8f%b0%e7%bb%9f%e8%ae%a1%e5%9b%be%e8%a1%a8%e9%a1%b5%e9%9d%a2","status":"publish","type":"post","link":"https:\/\/diuut.com\/?p=1210","title":{"rendered":"SpringBoot+Themleaf+Echarts\u5236\u4f5c\u540e\u53f0\u7edf\u8ba1\u56fe\u8868\u9875\u9762"},"content":{"rendered":"\n

\u9700\u6c42\uff1a<\/p>\u4f20\u7edf\u8868\u683c\u6570\u636e\u770b\u7edf\u8ba1\u4e0d\u76f4\u89c2\u4e0d\u7f8e\u89c2\uff0c\u9700\u8981\u66f4\u52a0\u76f4\u89c2\u7684\u65b9\u5f0f\u4e00\u76ee\u4e86\u7136\u7684\u4e86\u89e3\u7edf\u8ba1\u72b6\u51b5\uff0c\u56e0\u6b64\u9700\u8981\u997c\u56fe\u6298\u7ebf\u56fe\u7b49\u5f62\u5f0f\u8fdb\u884c\u5c55\u793a<\/cite><\/blockquote>\n\n\n\n

themleaf\u9700\u8981\u5bfc\u5165\u4f9d\u8d56\uff1a<\/p>\n\n\n

\n<dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-starter-thymeleaf<\/artifactId>\n<\/dependency>\n<!--\u7248\u672c\u53f7\u53bbmaven\u4e0a\u627e\u65b0\u7248\u5373\u53ef-->\n<\/pre><\/div>\n\n\n
yml\u5e94\u7528\u914d\u7f6e\uff1a<\/p>\n\n\n
\nspring:\n  application:\n    name: xxxxxxxxxxx\n  thymeleaf:\n    cache: false    #\u5173\u95edThymeleaf\u7684\u7f13\u5b58\n    mode: LEGACYHTML5    #\u9ed8\u8ba4\u503c\u662fHTML5\uff0c\u5176\u5b9e\u662f\u4e00\u4e2a\u5f88\u4e25\u683c\u7684\u68c0\u67e5\uff0c\u6539\u4e3aLEGACYHTML5\u53ef\u4ee5\u5f97\u5230\u4e00\u4e2a\u53ef\u80fd\u66f4\u53cb\u597d\u4eb2\u5207\u7684\u683c\u5f0f\u8981\u6c42\u3002\n\n<\/pre><\/div>\n\n\n
\u524d\u7aef\u9875\u9762\u9875\u9762\u56fe\u8868\u6837\u5f0f\u53ef\u4ee5\u5148\u53bbEcharts\u5b98\u7f51\u627e\u5230\u9002\u5408\u7684\u5b9e\u4f8b\uff0c\u7136\u540e\u76f4\u63a5\u62f7\u8d1d\u56fe\u8868\u7684\u5b9e\u73b0\u4ee3\u7801\u5230\u81ea\u5df1\u5c55\u793a\u7f51\u9875\u4e0a<\/p>\n\n\n\n
Echarts\u5b98\u7f51\u5b9e\u4f8b\u9875\u9762<\/a><\/p>\n\n\n\n
\u51c6\u5907\u597d\u81ea\u5df1\u6240\u8981\u5c55\u793a\u7684html\u9875\u9762\uff0c\u53ef\u4ee5\u53bb\u627e\u5408\u9002\u7684\u9875\u9762\u6a21\u677f\u7136\u540e\u66ff\u6362\u6210\u81ea\u5df1\u5728\u5b98\u7f51\u5b9e\u4f8b\u4e0a\u627e\u5230\u7684\u5408\u9002\u7684\u56fe\u8868\u5c31\u884c<\/p>\n\n\n
\n<!-th\u6807\u7b7e\u62a5\u7ea2\u7684\u8bdd\u52a0\u4e0ahtml\u6807\u7b7e\u5c5e\u6027\u5373\u53ef-> \n<html lang="en" xmlns:th="http:\/\/www.thymeleaf.org\/">\n\n<!-head\u4e2d\u5f15\u5165echartsjs->\n<script src="..\/static\/js\/echarts.min.js"><\/script>\n\n<!-\u9875\u9762\u4e2d\u7684\u4e00\u4e2aecharts\u56fe\u8868\u5185\u5bb9->\n <div class="leftMain_middle">\n            <div class="leftMain_middle_left">\n                <div class="leftMain_middle_leftIn">\n                    <div class="biaoge" style="height:29vh" id="main1"><\/div>\n                    <script type="text\/javascript" th:inline = "javascript">\n                    \/\/\u8fd9\u91cc\u4e00\u5b9a\u8981\u52a0\u4e0ath:line \u6807\u7b7e\u624d\u80fd\u5728javascript\u4e2d\u53d6\u5230themleaf\u4e2d\u4f20\u9012\u7684\u6570\u636e\n                        var app1 = echarts.init(document.getElementById("main1"));\n                        \/\/\u521d\u59cb\u5316\n                        option1 = {\n                            \/\/ backgroundColor:'#fff',\/\/\u56fe\u8868\u80cc\u666f\n                            color: ['#60acfc', '#32d3eb', '#5bc49f ', '#feb64d', '#ff7c7c', '#9287e7', '#dd3ee5'],\/\/\u56fe\u8868\u5185\u5bb9\u53d6\u8272\u76d8\n                            title: {\/\/\u6807\u9898\n                                left: 'left',\n                                text: '\u672c\u6708\u6bcf\u65e5\u6d3b\u8dc3\u7528\u6237\u6570',\n                                textStyle: {color: '#fff'}\n                            },\n                            legend: {\n                                \/\/ backgroundColor:'#fff'      \/\/\u56fe\u4f8b\u80cc\u666f\u8272\n                                borderColor: '#fff',\n                                textStyle: {\n                                    color: '#fff'\n                                }\n                            },\n                            tooltip: {      \n                                trigger: 'axis',\n                                showContent: false\n                            },\n                            toolbox: {\/\/\u5de5\u5177\u680f\u5c5e\u6027\u8bbe\u7f6e\n                                show: true,\n                                iconStyle: {\n                                    borderColor: '#fff',         \/\/\u5de5\u5177\u7bb1\u8fb9\u7ebf\u989c\u8272\n                                    shadowColor: 'rgb(255,255,255)',        \/\/  \u5de5\u5177\u7bb1\u9634\u5f71\u989c\u8272\n                                    shadowBlur: 3\n                                },\n                                orient: 'vertical',\n                                left: 'right',\n                                itemSize: 14,\n                                top: 'center',\n                                feature: {      \/\/\u7ec4\u4ef6\u680f\n                                    magicType: {\n                                        type: ['line', 'bar', 'stack', 'tiled']\n                                    },\n                                    restore: {},\n                                    saveAsImage: {}\n                                },\n                            },\n                            dataset: {\n                                source: [\/\/\u8fd9\u91cc\u5c31\u662fthemleaf\u7684\u5145\u586b\u6570\u636e\u7684\u5730\u65b9\uff0c\u4e3b\u8981\u662f\u7531\u540e\u53f0\u4f20\u5165\n                                    [[${result.main1[0]}]],\n                                    [[${result.main1[1]}]],\n                                    [[${result.main1[2]}]],\n                                    [[${result.main1[3]}]],\n                                    [[${result.main1[4]}]],\n                                    [[${result.main1[5]}]],\n                                ]\n                            },\n                            xAxis: { \/\/x\u8f74\n                                type: 'category',\n                                name: '\u5929\u6570',\n                                axisLabel: {\n                                    \/*inside: true,*\/\n                                    interval: 0,\n                                    textStyle: {\n                                        color: '#fff',\n                                        fontSize: 10\n                                    }\n                                },\n                                axisTick: {\n                                    show: false,\n                                },\n                                axisLine: {\n                                    show: true,\n                                    symbol: ['none', 'arrow'],\n                                    symbolOffset: 10,\n                                    lineStyle: {\n                                        color: '#fff',\n                                    }\n                                },\n                                z: 10\n                            },\n                            yAxis: {  \/\/y\u8f74\n                                type: 'value',\n                                name: '\u4eba\u6570',\n                                scale:true,\n                                axisLine: {\n                                    show: true,\n                                    symbol: ['none', 'arrow'],\n                                    symbolOffset: 10,\n                                    lineStyle: {\n                                        color: '#fff',\n                                    }\n                                },\n                                axisTick: {\n                                    show: false\n                                },\n                                axisLabel: {\n                                    textStyle: {\n                                        color: '#fff',\n                                        fontSize: 10\n                                    }\n                                }\n                            },\n                            grid: {\n                                top: '50%',\n                                bottom: '6%',\n                            },\n                            series: [ \/\/\u6240\u663e\u793a\u7684\u5185\u5bb9\uff0c\u8fd9\u91cc\u662f5\u6761\u6298\u7ebf\u4e00\u4e2a\u997c\u56fe\n                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},\n                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},\n                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},\n                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},\n                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},\n                                {\n                                    type: 'pie',\n                                    id: 'pie',\n                                    radius: '30%',\n                                    center: ['50%', '27%'],\n                                    top:6,\n                                    label: {\n                                        formatter: '{b}: {@1} ({d}%)'\n                                    },\n                                    encode: {\n                                        itemName: [[${result.main1[0][0]}]],\n                                        value: [[${result.main1[0][1]}]],\n                                        tooltip: [[${result.main1[0][1]}]],\n                                    }\n                                }\n                            ]\n                        };\n                        \/\/\u8fd9\u91cc\u662f\u6700\u521d\u52a0\u8f7d\u7684\u9ed8\u8ba4\u997c\u56fe\u7684\u5145\u586b\u5185\u5bb9\n                        app1.on('updateAxisPointer', function (event) {\n                            var xAxisInfo = event.axesInfo[0];\n                            if (xAxisInfo) {\n                                var dimension = xAxisInfo.value + 1;\n                                app1.setOption({\n                                    series: {\n                                        id: 'pie',\n                                        label: {\n                                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'\n                                        },\n                                        encode: {\n                                            value: dimension,\n                                            tooltip: dimension\n                                        }\n                                    }\n                                });\n                            }\n                        });\n\n                        app1.setOption(option1);\n                        \/\/\u8f7d\u5165\u6570\u636e\u6e32\u67d3\u56fe\u8868\n                    <\/script>\n                <\/div>\n            <\/div>\n<\/pre><\/div>\n\n\n
\u540e\u53f0\u5145\u586b\u6570\u636e\u7684\u8bddcontroller\u5c42\u5c31\u4e0d\u80fd\u7528@RestController\u4e86\uff0c\u56e0\u4e3a\u4f1a\u81ea\u52a8\u628athemleaf\u9ed8\u8ba4\u8df3\u8f6c\u5230\u5145\u586b\u9875\u9762\u4ee5json\u683c\u5f0f\u8fd4\u56de\u7ed9\u524d\u53f0\uff0c\u6240\u4ee5\u7528\u7684\u662f@Controller<\/p>\n\n\n
\n@Controller\npublic class ThymeleafController { \n    @RequestMapping("\/chartscount")  \/\/\u8fd9\u91cc\u6ca1\u6709\u6307\u5b9amethead\uff0c\u4e0d\u5199method \u4e3aget,post,put...\u65b9\u5f0f\u90fd\u652f\u6301\n        public String indexdemo(Model model) {\n            Object result = thymeleafService.chartscount();\n            model.addAttribute("result", result);\n            return "chartscount";\n        }\n}\n<\/pre><\/div>\n\n
\n@Service\npublic class ThymeleafService {\n        \/**\n         * \u7edf\u8ba1\u56fe\u8868\u9875\u9762\u6570\u636e\u96c6\n         *\n         * @return \u6570\u636e\u96c6\n         *\/\n        public Object chartscount() {\n            Dson result = new Dson();\n            result.put("active", arpuRedisDao.getActiveUser());\n            result.put("online", arpuRedisDao.getOnlineUser());\n            result.put("watch", arpuRedisDao.getWatchNum());\n            result.put("match", arpuRedisDao.getMatchNum());\n            result.put("main1", this.getMain1());\n            result.put("main2", this.getMain2());\n            result.put("main3", this.getMain3());\n            result.put("main4", this.getMain4());\n            return result._Value();\n        }\n}\n\n\/\/this.getMain1234()\u65b9\u6cd5\u5c31\u662f\u524d\u5929\u56fe\u8868\u6240\u9700\u6570\u636e\u7684\u96c6\u5408\uff0c\u600e\u4e48\u53d6\u600e\u4e48\u62ff\u53d6\u51b3\u4e8e\u81ea\u5df1\u5728\u56fe\u8868\u9700\u8981\u54ea\u4e9b\u6570\u636e\n<\/pre><\/div>\n\n\n
\u6700\u7ec8\u6548\u679c\u793a\u4f8b<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\u8865\u5145\u4e00\u4e9b\u9664\u4e86th:value th:text\u4e4b\u5916\u53ef\u80fd\u5e38\u7528\u5230\u7684themleaf\u7684\u7528\u6cd5\u6807\u7b7e<\/p>\n\n\n\n
th:each \u5faa\u73af\u53d6\u503c\uff1a<\/p>\n\n\n
\n<tr th:each="data:${result.data}">\n        <td><\/td>\n        <td th:text="${data.groupId}"><\/td>\n        <td th:text="${data.classNum}"><\/td>\n        <td th:text="${data.className}"><\/td>\n        <td th:text="${data.price}"><\/td>\n        <td th:text="${data.sketch}"><\/td>\n        <td th:text="${data.topic}"><\/td>\n        <td th:text="${data.pic}"><\/td>\n        <td th:text="${data.url}"><\/td>\n        <td th:text="${data.version}"><\/td>\n<\/tr>\n\n<\/pre><\/div>\n\n\n
th:if \u6839\u636e\u6761\u4ef6\u9009\u62e9\u662f\u5426\u5c55\u793a\uff1a<\/p>\n\n\n
\n<div th:if="${result.isShow} eq true" class="card">\n    <div>xxxxxxxxxxx<\/div>\n    <div>xxxxxxxxxxx<\/div>\n    <div>xxxxxxxxxxx<\/div>\n    <div>xxxxxxxxxxx<\/div>\n<\/div>\n<!-\u662f\u5426\u663e\u793a\u4e0d\u80fd\u53ea\u9760\u5355\u4e2a\u6570\u636e\u7684\u6709\u65e0\u8fdb\u884c\u5224\u65ad\uff0c\u6700\u597d\u662f\u8bbe\u7f6e\u4e00\u4e2a\u5fc5\u5b9a\u5b58\u5728\u7684\u5f00\u5173->\n<-\u9ed8\u8ba4false\uff0c\u5982\u679c\u786e\u5b9a\u6709\u6570\u636e\u7684\u65f6\u5019\u624b\u52a8\u5728\u540e\u53f0\u6539\u6210true->\n<!-\u5426\u5219\u4f1a\u5b58\u5728themleaf\u627e\u4e0d\u5230\u5bf9\u5e94\u7684\u503c\u800c\u6e32\u67d3\u9636\u6bb5\u5c31\u62a5\u9519\u5bfc\u81f4\u76f4\u63a5\u65e0\u6cd5\u8fd4\u56de\u9875\u9762->\n<\/pre><\/div>\n\n
\ngt\uff1agreat than\uff08\u5927\u4e8e\uff09>\nge\uff1agreat equal\uff08\u5927\u4e8e\u7b49\u4e8e\uff09>=\neq\uff1aequal\uff08\u7b49\u4e8e\uff09==\nlt\uff1aless than\uff08\u5c0f\u4e8e\uff09<\nle\uff1aless equal\uff08\u5c0f\u4e8e\u7b49\u4e8e\uff09<=\nne\uff1anot equal\uff08\u4e0d\u7b49\u4e8e\uff09!=\n<\/pre><\/div>\n\n\n
th:selected \u591a\u9009\u6846\u4e2d\u9ed8\u8ba4\u9009\u4e2d<\/p>\n\n\n
\n<div class="form-group">\n      <label for="add_groupId">\u8bfe\u7a0b\u7c7b\u578b<\/label>\n      <select class="form-control" id="add_groupId" name="groupId" size="1">\n          <option value="\u4e2d\u56fd\u8c61\u68cb" th:selected="${result.data[0].groupId eq '\u4e2d\u56fd\u8c61\u68cb'}">\u4e2d\u56fd\u8c61\u68cb<\/option>\n          <option value="\u56fd\u9645\u8c61\u68cb" th:selected="${result.data[0].groupId eq '\u56fd\u9645\u8c61\u68cb'}">\u56fd\u9645\u8c61\u68cb<\/option>\n          <option value="\u4e94\u5b50\u68cb" th:selected="${result.data[0].groupId eq '\u4e94\u5b50\u68cb'}">\u4e94\u5b50\u68cb<\/option>\n          <option value="\u56f4\u68cb" th:selected="${result.data[0].groupId eq '\u56f4\u68cb'}">\u56f4\u68cb<\/option>\n          <option value="\u56fd\u9645\u8df3\u68cb" th:selected="${result.data[0].groupId eq '\u56fd\u9645\u8df3\u68cb'}">\u56fd\u9645\u8df3\u68cb<\/option>\n      <\/select>\n<\/div>\n<\/pre><\/div>\n\n\n
th:switch \u4e0e th:case \u591a\u6761\u4ef6\u9009\u62e9\u663e\u793a<\/p>\n\n\n
\n   <tr th:each="data:${result.data}">\n            <td><\/td>\n            <td th:text="${data.id}"><\/td>\n            <td th:text="${data.uid}"><\/td>\n            <td th:switch="${data.state}">\n                <span th:case="0" style="color: red">\u672a\u652f\u4ed8<\/span>\n                <span th:case="2" style="color: green">\u5df2\u652f\u4ed8<\/span>\n            <\/td>\n            <td th:text="${data.identifier}"><\/td>\n            <td th:text="${data.channel}"><\/td>\n            <td th:text="${data.payType}"><\/td>\n            <td th:text="${data.content}"><\/td>\n            <td th:text="${data.price}"><\/td>\n            <td th:text="${data.firstTime}"><\/td>\n            <td th:text="${data.endTime}"><\/td>\n            <td th:text="${data.result}"><\/td>\n        <\/tr>\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
\u9700\u6c42\uff1a \u4f20\u7edf\u8868\u683c\u6570\u636e\u770b\u7edf\u8ba1\u4e0d\u76f4\u89c2\u4e0d\u7f8e\u89c2\uff0c\u9700\u8981\u66f4\u52a0\u76f4\u89c2\u7684\u65b9\u5f0f\u4e00\u76ee\u4e86\u7136\u7684\u4e86\u89e3\u7edf\u8ba1\u72b6\u51b5\uff0c\u56e0\u6b64\u9700\u8981\u997c\u56fe\u6298\u7ebf\u56fe\u7b49\u5f62\u5f0f\u8fdb\u884cview all . . .SpringBoot+Themleaf+Echarts\u5236\u4f5c\u540e\u53f0\u7edf\u8ba1\u56fe\u8868\u9875\u9762<\/span><\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":1216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/diuut.com\/index.php?rest_route=\/wp\/v2\/posts\/1210"}],"collection":[{"href":"https:\/\/diuut.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/diuut.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/diuut.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/diuut.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1210"}],"version-history":[{"count":13,"href":"https:\/\/diuut.com\/index.php?rest_route=\/wp\/v2\/posts\/1210\/revisions"}],"predecessor-version":[{"id":1229,"href":"https:\/\/diuut.com\/index.php?rest_route=\/wp\/v2\/posts\/1210\/revisions\/1229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/diuut.com\/index.php?rest_route=\/wp\/v2\/media\/1216"}],"wp:attachment":[{"href":"https:\/\/diuut.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/diuut.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/diuut.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}