1. 圖形報表ECharts

1.1 ECharts簡介

ECharts縮寫來自Enterprise Charts，商業級資料圖表，是百度的一個開源的使用JavaScript實作的資料可視化工具，可以流暢的運作在 PC 和移動裝置上，相容目前絕大部分浏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直覺、互動豐富、可高度個性化定制的資料可視化圖表。

官網：https://echarts.baidu.com/

下載下傳位址：https://echarts.baidu.com/download.html

五分鐘上手ECharts圖形報表2. 會員數量折線圖

下載下傳完成可以得到如下檔案：

五分鐘上手ECharts圖形報表2. 會員數量折線圖

解壓上面的zip檔案：

五分鐘上手ECharts圖形報表2. 會員數量折線圖

我們隻需要将dist目錄下的echarts.js檔案引入到頁面上就可以使用了

五分鐘上手ECharts圖形報表2. 會員數量折線圖

1.2 五分鐘上手ECharts

我們可以參考官方提供的5分鐘上手ECharts文檔感受一下ECharts的使用方式，位址如下：

https://www.echartsjs.com/zh/tutorial.html

第一步：建立html頁面并引入echarts.js檔案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<!-- 引入 ECharts 檔案 -->
	<script src="echarts.js"></script>
</head>
</html>

第二步：在頁面中準備一個具備寬高的DOM容器。

<body>
	<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
	<div id="main" style="width: 600px;height:400px;"></div> 
</body>

第三步：通過echarts.init方法初始化一個 echarts 執行個體并通過setOption方法生成一個簡單的柱狀圖

<script src="echarts.js"></script>
<script type="text/javascript">
//	基于準備好的dom，初始化echarts執行個體
var myChart = echarts.init(document.getElementById('main'));

//	指定圖表的配置項和資料
var option = {
	title: {
		text: 'ECharts 入門示例' 
			},
	tooltip: {},
	legend: {data:['銷量']}, 
	xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},
	yAxis: {},
	series: [{ 
			name: '銷量', type: 'bar',
			data: [5, 20, 36, 10, 10, 20]
			}]
	};
//	使用剛指定的配置項和資料顯示圖表。 
myChart.setOption(option); 
</script>

效果如下：

五分鐘上手ECharts圖形報表2. 會員數量折線圖

1.3 檢視ECharts官方執行個體

ECharts提供了很多官方執行個體，我們可以通過這些官方執行個體來檢視展示效果和使用方法。

官方執行個體位址：https://www.echartsjs.com/examples/

五分鐘上手ECharts圖形報表2. 會員數量折線圖

可以點選具體的一個圖形會跳轉到編輯頁面，編輯頁面左側展示源碼（js部分源碼），右側展示圖表效果，如下：

五分鐘上手ECharts圖形報表2. 會員數量折線圖

要檢視完整代碼可以點選右下角的Download按鈕将完整頁面下載下傳到本地。

通過官方案例我們可以發現，使用ECharts展示圖表效果，關鍵點在于确定此圖表所需的資料格式，然後按照此資料格式提供資料就可以了，我們無須關注效果是如何渲染出來的。

在實際應用中，我們要展示的資料往往存儲在資料庫中，是以我們可以發送ajax請求擷取資料庫中的資料并轉為圖表所需的資料即可。

2. 會員數量折線圖

2.1 需求分析

會員資訊是體檢機構的核心資料，其會員數量和增長數量可以反映出機構的部分營運情況。通過折線圖可以直覺的反映出會員數量的增長趨勢。本章節我們需要展示過去一年時間内每個月的會員總資料量。展示效果如下圖：

五分鐘上手ECharts圖形報表2. 會員數量折線圖

2.2 完善頁面

會員數量折線圖對應的頁面為

/pages/report_member.html

(自定義)。

2.2.1 導入ECharts庫

第一步：将echarts.js檔案複制到health_backend工程的plugins目錄下(根據自己目錄即可)

第二步：在report_member.html頁面引入

echarts.js

檔案

2.2.2 參照官方執行個體導入折線圖

<div class="box">
	<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --> 
	<div id="chart1" style="height:600px;"></div>
</div>
 
<script type="text/javascript">
// 基于準備好的dom，初始化echarts執行個體
var myChart1 = echarts.init(document.getElementById('chart1'));

// 使用剛指定的配置項和資料顯示圖表。
//myChart.setOption(option);

axios.get("/report/getMemberReport.do").then((res)=>{
myChart1.setOption(
     {
         title: {
             text: '會員數量'
         },
         tooltip: {},
         legend: {
             data:['會員數量']
         },
         xAxis: {
             data: res.data.data.months
         },
         yAxis: {
             type:'value'
         },
         series: [{
             name: '會員數量',
             type: 'line',
             data: res.data.data.memberCount
         }]
     });
});
</script>

根據折線圖對資料格式的要求，我們發送ajax請求，服務端需要傳回如下格式的資料：

{
"data":{
"months":["2019.01","2019.02","2019.03","2019.04"],
"memberCount":[3,4,8,10]
},
"flag":true,
"message":"擷取會員統計資料成功"
}

2.3 背景代碼

2.3.1 Controller

在health_backend工程中建立ReportController并提供getMemberReport方法(建立Controller層)

package com.heihiehei.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.itheima.constant.MessageConstant;
import com.itheima.entity.Result;
import com.itheima.service.MemberService;
import com.itheima.utils.DateUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.text.SimpleDateFormat;
import java.util.*;

/**
 * 圖表操作
 *
 * @author 嘿嘿嘿1212
 * @version 1.0
 * @date 2019/10/25 21:55
 */
@RestController
@RequestMapping("/report")
public class ReportController {

    @Reference
    private MemberService memberService;

    @RequestMapping("/getMemberReport")
    public Result getMemberReport() {
        //顯示多少個月份之前
        int month = 12;
        Map<String, Object> map = new HashMap<>();
        List<String> months = new ArrayList<>();
        Calendar calendar = Calendar.getInstance();
        calendar.add(Calendar.MONTH, -month);
        for (int i = 0; i < month; i++) {
            calendar.add(Calendar.MONTH, 1);
            Date time = calendar.getTime();
            months.add(new SimpleDateFormat("yyyy.MM").format(time));
        }
        map.put("months", months);
        List<Integer> memberCount = memberService.findMemberByMonths(months);
        map.put("memberCount", memberCount);
        return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS, map);

    }


}

2.3.2 服務接口

在

MemberService

服務接口中擴充方法findMemberCountByMonth(Servlce層)

2.2.3 服務實作類

在

MemberServiceImpl

服務實作類中實作

findMemberCountByMonth

方法

//根據月份統計會員數量

@Autowired
private MemberDao memberDao;
/**
 * 根據月份統計使用者數量
 * @param months
 * @return
 */
@Override
public List<Integer> findMemberByMonths(List<String> months) {
    List<Integer> memberCount = new ArrayList<>();
    for (String month : months) {
        month = month + ".31";//格式:2019.10.31
        memberCount.add(memberDao.findMemberCountBeforeDate(month));
    }
    return memberCount;
}

2.3.4 Dao接口

在

MemberDao

接口中擴充方法

findMemberCountBeforeDate

2.3.5 Mapper映射檔案

在

MemberDao.xml

映射檔案中提供SQL語句

<!--根據日期統計會員數，統計指定日期之前的會員數-->
<select id="findMemberCountBeforeDate" parameterType="string" resultType="int">
select count(id) from t_member where regTime &lt;= #{value} 
</select>

注意

最後進行測試頁面出現資料報表則成功
這裡使用的SSM架構開發
使用dubbo架構,如果使用單體架構請将Controller層的 @Reference 修改為 @Autowired
項目中實作

五分鐘上手ECharts圖形報表2. 會員數量折線圖

1. 圖形報表ECharts

1.1 ECharts簡介

1.2 五分鐘上手ECharts

1.3 檢視ECharts官方執行個體

2. 會員數量折線圖

2.1 需求分析

2.2 完善頁面

2.2.1 導入ECharts庫

2.2.2 參照官方執行個體導入折線圖

2.3 背景代碼

2.3.1 Controller

2.3.2 服務接口

2.2.3 服務實作類

2.3.4 Dao接口

2.3.5 Mapper映射檔案

注意

繼續閱讀

echarts3 清空上一次加載的series資料echartsInstance.clear *

NEV與其他圖表引擎的橫向對比NEV與其他圖表引擎的橫向對比圖表類型移動端定制版支援

SVG檔案動态繪制echarts圖表

【更新中】基于Springboot+MybatisPlus+Echarts+Mysql實作各種疫情地圖及管理系統

Flume介紹、架構、安裝、及案例1、2、3

Echarts1-- angular2中引入echarts

angular中引入echarts一、項目中引入

angular項目中使用echarts

angular中如何使用echarts圖表

python爬蟲豆瓣電影資料可視化（Flask架構）部署在伺服器上1. 在寶塔面闆下載下傳“python項目管理器”2. 上傳檔案至伺服器3. 生成requirements.txt檔案4.在python項目管理器添加python項目5. 示範

Mina架構快速入門

使用webbrowser控件展示echarts的三維圖像

Echarts3執行個體 map地圖加載點資料

Vue封裝Echarts子元件動态更新圖表展示（）

Echarts滑鼠懸浮樣式

web前端技術這裡介紹web的一些基本知識。