Echarts-java後端封裝option ---（二）餅圖測試用例

阿新 • • 發佈：2019-02-02

餅圖測試

後端程式碼：

@Controller
@RequestMapping("/echart")
public class EchartsController {

    /**
         * 餅圖 測試用例
         * @return
         */
        @RequestMapping(value = "/pie",method = RequestMethod.POST,
        produces = {"application/text;charset=utf-8"})
        @ResponseBody
        public 
 String pie(){
            //需要的資料
            String title = "搜尋引擎統計";
            String[] searchs = {"百度","必應","豆瓣","搜狗"};
            int[] datas = {123,456,789,555};

            //建立option物件
            Option option = new GsonOption();

            //設定標題  二級標題  標題位置
            option.title().text(title).subtext("二級標題" 
).x("center");

            //設定工具欄 展示  能標記
            option.toolbox().show(true).feature(Tool.mark);

            //設定顯示工具格式
            option.tooltip().show(true).formatter("{a}</br>{b}：{c}/個");

            //設定圖例  圖例位置  圖例對齊方式 豎列對齊
            option.legend().data(searchs).x("left").orient(Orient.vertical);

            //填充資料 

            Pie pie = new Pie();//建立餅圖物件

            //設定餅圖的標題 半徑、位置
            pie.name(title).radius("55%").center("50%","50%");

            //填充資料
            for(int i = 0; i < searchs.length; i++){
                Map<String,Object> map = new HashMap<>();
                map.put("value",datas[i]);//填充餅圖資料
                map.put("name",searchs[i]);//填充餅圖資料對應的搜尋引擎
                pie.data(map);
            }
            option.series(pie); //設定資料

            return option.toString();
    }
}

返回的json資料：

 {
        "title": {"text": "搜尋引擎統計", "subtext": "二級標題", "x": "center"},
        "toolbox": {
            "feature": {
                "mark": {
                    "show": true,
                    "title": {"markUndo": "刪除輔助線", "markClear": "清空輔助線", "mark": "輔助線開關"},
                    "lineStyle": {"color": "#1e90ff", "type": "dashed", "width": 2}
                }
            }, "show": true
        },
        "tooltip": {"formatter": "{a}</br>{b}：{c}/個", "show": true},
        "legend": {"orient": "vertical", "data": ["百度", "必應", "豆瓣", "搜狗"], "x": "left"},
        "series": [{
            "center": ["50%", "50%"],
            "radius": "55%",
            "name": "搜尋引擎統計",
            "type": "pie",
            "data": [{"name": "百度", "value": 123}, {"name": "必應", "value": 456}, {
                "name": "豆瓣",
                "value": 789
            }, {"name": "搜狗", "value": 555}]
        }]
    }

前端程式碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
   //一定要指定div的高度和寬度以便能撐起圖示
    <div id="echart"style="height:300px;width:600px;>

    </div>


<script src="/static/jquery.min.js"></script>
<script src="/static/echarts.min.js"></script>
<script>
    //圖表的初始化
    var echarts = echarts.init(document.getElementById('echart');

    initEcharts();
    function initEcharts(){
         echarts.clear();
         echarts.showLoading({text: '正在努力的讀取資料中...'});
        $.ajax({
            url:"/echarts/pie",
            type:"post",
            success:function(data){
                var option = eval("("+data+")");
                echarts.setOption(option);
                echarts.hideLoading();

            }

        })

    }

</script>

效果圖：
這裡寫圖片描述

多少不凡、只因不甘

Echarts-java後端封裝option ---（二）餅圖測試用例

餅圖測試後端程式碼： @Controller @RequestMapping("/echart") public class EchartsController { /**

RabbitMQ學習之Java客戶端連線測試（二）

前面花了幾天糾結完RabbitMQ在Linux下的安裝之後，開始找簡單的例子來測試RabbitMQ和Java的連線。和前面的安裝一樣，問題依舊。因為網上的帖子大多數都是很正常的步驟，並且沒有貼出來自己途中可能遇到的低階錯誤。本文將沿用網上很經典的一個帖子來說出我過程中出

echarts的簡單應用之（二）餅圖

數據 rest 官網獲取這也 ucc 保存折線圖 alt 　　接上一篇文章： echarts的簡單應用之（一）柱形圖：https://www.cnblogs.com/jylee/p/9359363.html 本篇文章講述餅圖，撇過折線圖不說，是因為折線圖與柱形圖的數據

post方式介面測試（一）_新建測試用例

第一種方式：拷貝別人的第二種方式：自己建立二、開啟瀏覽器(此處chrome)，F12開啟開發模式，輸入網址登入，此時可獲取到登入的 Request URL 二、開啟postman，進入自己的Collections,新建New Tab，選擇P

httprunner（4）錄製生成測試用例

# 前言寫用例之前，我們應該熟悉API的詳細資訊。建議使用抓包工具Charles或AnyProxy進行抓包。 # har2case 我們先來了解一下另一個專案har2case 他的工作原理就是將當前主流的抓包工具和瀏覽器都支援將抓取得到的資料包匯出為標準通用的 HAR 格式（HTTP Arc

java簡單部落格系統（二）導航標籤頁點選後頁面內容改變及背景色改變

一、同一個Servlet處理多個請求，顯示不同的頁面內容導航標籤頁 bootStrap模板： <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home

java後端封裝前段請求引數

1.java後端封裝前段頁面請求引數。 /** * 快捷封裝所有請求引數 * 繼承此類的子類可以使用此方法 * @param request * @return Map */ protected final

Java 後端封裝接收值的通用方法

1、前端 iso-8859-1，需要進行轉碼，需要先測試一下字元，然後再看一下是否需要轉碼，前面有介紹怎麼判斷前端傳來的字元。 /** * 封裝頁面VO資料 *&n

Java學習——前後端資料互動（二）

以下是前端頁面資料傳遞後Java後臺。前段時間在前行前後端資料互動的時候，點選提交沒有響應。原因是因為下面這個地方出錯了。js目錄的指向不對。這裡最前面的一個表示該檔案所屬的資料夾的上一級目錄的父目錄。如果是兩級的話則加兩個..表示上兩級的父目錄。接著又是一步步除錯

Android Java Web實現登入註冊（二）——伺服器端

Eclipse新建Dynamic Web Project，新建index.html，執行看見沒有提示404錯誤的頁面即Tomcat伺服器部署成功。這是搭建Java Web環境時需要完成的工作。詳細內容請看點選開啟連結涉及的檔案與專案結構：一、Servlet類

關於kindeitor java後端封裝上傳的jsp檔案

請求方面： @RequestMapping(value = "/fileUpload", method = RequestMet

JAVA學習第十九課（java程序的異常處理（二））

num 函數錯誤 style col 編譯失敗 return [] java 異常處理的捕捉形式：這是能夠對異常進行針對性處理的方式六、try、catch的理解詳細格式： try { //須要被檢測異常的代碼 } catch（異常類變量）//改變量用

java.util包詳解（二）——Connection接口

操作相同元素叠代 cat roo soft true nbsp Connection接口介紹　　Connection接口是java集合的root接口，沒有實現類，只有子接口和實現子接口的各種容器。主要用來表示java集合這一大的抽象概念。　　Connection接

java-類生命周期（二）

.net ava 初始化啟動 pri pos 入口原理 tails 上文介紹了java-類生命周期（一），理論性比較強。認為太復雜的同學，瞟一下本文的樣例加深理解。先給道題目，看看答對沒。 /** * 類載入試驗基類 * * @author peter

Java多線程基礎（二）

常用進程上下文技術進入返回 ren 說明多線程基礎常用api 基本概念進程：程序的執行過程。持有資源（共享內存、共享文件）和線程。線程： - 是一個程序內部的順序控制流。 - 它包含在進程之中，是系統中最小執行單元，同一個進程可以有多個線程。 - 線程共享進

上門洗車APP --- Androidclient開發之網絡框架封裝介紹（二）

glob imp success rgb sed error margin p s 再次上門洗車APP --- Androidclient開發之網絡框架封裝介紹（二）前幾篇博文中給大家介紹了一下APP中的基本業務及開發本項目使用的網絡架構：上門洗車APP ---

java nio之 channel通道（二）

java niojava nio 通道上一篇文章裏就講述過，channel總是寫數據的時候，要先把數據寫入到bytebuffer，讀數據的時候總是要先從channel中讀入到bytebuffer。如下圖，這個圖是好多知名博客常用的圖，很好理解這個channel。channel分為一下幾種：FileChanne

Java 並發編程（二）對象的不變性和安全的公布對象

不一致字段更新要求 nts ava 然而 caching mut 一、不變性滿足同步需求的還有一種方法是使用不可變對象（Immutable Object）。到眼下為止，我們介紹了很多與原子性和可見性相關的問題，比如得到失效數據。丟失更新操作

java代碼實現highchart與數據庫數據結合完整案例分析（二）---折線圖

end idt 。。客戶端屬性 hid pla 循環 scrip 作者原創：未經博主允許不許轉載在上一篇的博客中，展示和分析了如何做一個餅狀圖，有疑問可以參考上一篇博客。現在分析和展示折線圖的繪制和案例分析，先展示效果圖：與餅狀圖不同的是，折線圖展現更多的數據

[轉載] java多線程總結（二）

判斷 home run 選擇作者得到生命周期 on() .com 轉載自：http://www.cnblogs.com/lwbqqyumidi/p/3817517.html 作者：Windstep 四.Java多線程的阻塞狀態與線程控制上文已經提到Java阻塞的

Echarts-java後端封裝option ---（二）餅圖測試用例

餅圖測試

相關推薦