义齿

概要
Java mavenプロジェクト、spring boot+mybatis+thymeleaf+Echarts.
目標を達成する.

はhtmlにアクセスできます.

データはhtmlに持ち込むことができます.

データはEchartsで使用できます.

実装手順
1.導入依存

    
        2.1.1.RELEASE
        5.1.3.RELEASE
    
    
        
        
            
            org.springframework.boot
            spring-boot-dependencies
            ${spring-boot-version}
            pom
            import
        

        
            org.springframework.boot
            spring-boot-starter-web
            ${spring-boot-version}
            
                
                    org.springframework.boot
                    spring-boot-starter-tomcat
                
                
                    org.springframework.boot
                    spring-boot-starter-logging
                
            
        
        
            org.springframework.boot
            spring-boot-starter-jetty
            ${spring-boot-version}
        
        
            org.springframework.boot
            spring-boot-autoconfigure
            ${spring-boot-version}
        

        
            org.springframework.boot
            spring-boot-starter-log4j2
            ${spring-boot-version}
        

        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            1.3.2
        


        
        
            com.alibaba
            fastjson
            1.2.31
        


        
        
            com.alibaba
            druid
            1.0.15
        
        
        
            mysql
            mysql-connector-java
            5.1.30
        
        
            org.springframework.boot
            spring-boot-starter-aop
            ${spring-boot-version}
        

        
        
        
            log4j
            log4j
            1.2.17
        


        
        
            org.apache.httpcomponents
            httpclient
            4.5.2
        

        
            org.apache.httpcomponents
            httpmime
            4.5.2
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
            ${spring-boot-version}
        

        
        
            org.springframework.boot
            spring-boot-starter-test
            ${spring-boot-version}
            test
        
        
            junit
            junit
            4.12
            
            test
        
        
            org.skyscreamer
            jsonassert
            1.5.0
            test
        
        
            org.springframework
            spring-test
            ${spring-framework}
            test
        
    

注意:梱包するときはフロントエンドのファイルを梱包する必要があります.パッケージできない問題が発生した場合は、次のコードを入力します.

  
        
            
                    src/main/resources/static

                ${project.build.directory}/classes/static
            
            
                src/main/resources/templates

                ${project.build.directory}/classes/templates
            
       

2.バックエンドインタフェースの作成
ここで自由にプレイすればいいので、フロントエンドに伝わるパラメータに注意してください.この例ではlistが転送されます

 @RequestMapping(value = "count",method = RequestMethod.GET)
    public ModelAndView count(){
       return new ModelAndView("interface/countNumber","interfaceList",operationLogService.getInterfaceCount());
    }

3.フロントエンド受信パラメータ
デフォルトのパスは次のとおりです.
resource/static/css,resource/static/js,resource/templates/カスタム(コードのreturnに対応し、この例ではinterface)/htmlページ名
ページコード

    
    
    
    
    
    






    

        

            
                  
            
        
        
   
    
    

        

            
        
        


        
    


    /*<![CDATA[*/
    $(function () {
        var interfaceList = /*[[${interfaceList}]]*/ null;
        var description=[];
        var num=[];
        var i=0;
        $.each(interfaceList, function(){

            description[i]=this.description;
            num[i]=this.accessCount;
            i++;
        });
        console.log(description);
        console.log(num);


        //       dom，   echarts  
        var contentWidth =$("#myTabContent").width();
        $("#myTabContent").css("min-width",contentWidth);
        $("#charts").width(contentWidth-20);
        var myChart = echarts.init(document.getElementById('charts'));
        option = {
            title: {
                x: 'center',
                text: '      ',
                textStyle: {
                    color: '#ffffff'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            grid: {
                borderWidth: 0,
                y: 80,
                y2: 60
            },
            xAxis: [
                {
                    type: 'category',
                    show: false,
                    data: description
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: false
                }
            ],
            series: [
                {
                    name: '      ',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{b}
{c}'
                            }
                        }
                    },
                    data: num
            ]
        };

        //                 。
        myChart.setOption(option);
    })
    /*]]>*/