【Echarts教科書】Echarts數據統計圖表的強大你瞭解過嗎?

小哥哥,小姐姐們容我再打一波小廣告,我打算用幾年時間去做一份關於Java學習、面試、進階的GitHub項目。
目前剛剛整理好JavaSE基礎內容,我將陸續的整理好JavaWeb階段以及框架知識體系,並添加完善到GitHub中,所以我希望大家能到我的GitHub給上一個Star !現在我的GitHub雖然還沒有完善多少技術文章,但是在幾個月後,我的GitHub也會陸續成爲一個完整的Java學習體系!

記得說好的Star哦!

GitHub地址: https://github.com/Ziphtracks/JavaLearningmanual


一、什麼是Echarts?

ECharts 是一款由百度前端技術部開發的,基於 Javascript 的數據可視化圖表庫,提供直 觀,生動,可交互,可個性化定製的數據可視化圖表。

二、Echarts的下載

Echarts官網下載地址:https://echarts.apache.org/zh/index.html

image-20200527211614311

image-20200527211643984

三、Echarts的開發步驟

3.1 Echarts的引入

將Echarts引入到項目中,其實官方就給瞭解釋。可以點擊5分鐘上手Echarts進入。這裏通過標籤引入打包下載好的Echarts。

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

3.2 Echarts入門案例步驟

  • 引入Echarts文件
  • 爲 ECharts 準備一個具備高寬的DOM容器
  • 初始化一個echarts實例
  • 指定你所需要圖的配置項和數據
  • 通過 setOption 方法生成一個簡單的柱狀圖
<%--
  Created by IntelliJ IDEA.
  User: Ziph
  Date: 2020/5/19
  Time: 13:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>echarts入門</title>
    <%--1.引入echarts.js--%>
    <script src="echarts/echarts.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            /*3.初始化echarts容器*/
            var eCharts = echarts.init(document.getElementById("main"));
            /*4.設定echarts屬性*/
            eCharts.setOption({
                title: {
                    text: 'ECharts 入門示例'
                },
                tooltip: {},
                legend: {
                    data: ['銷量']
                },
                xAxis: {
                    data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        });
    </script>
</head>
<body>
<%--2.設定一個具有寬高的echarts容器--%>
<div id="main" style="width: 1000px;height: 400px">

</div>
</body>
</html>

image-20200527212304163

四、Echarts官方文檔的使用

關於Echarts的使用,我們必須學會查看Echarts的官方文檔,這裏我給大家介紹一下官方文檔的常用操作。

4.1 5分鐘上手教程

5分鐘上手教程就是新手教程了!

image-20200527212635138

4.2 API

可以根據API查詢在使用Echarts時的語法!可以根據語法來操作Echarts圖表!

image-20200527212909621

4.3 官方實例

可以根據官方實例,找到並修改自己想要的圖表,最後粘貼複製到自己的項目中使用即可!

image-20200527213152126

image-20200527213324952

五、Echarts與服務器的交互

5.1 爲什麼Echarts圖表要與服務器交互?

我們在使用Echarts的時候,在頁面中是寫死的圖標信息。但是當我們真正的用於開發時,圖表的信息就必須保證動態的顯示週期內統計的數據信息。這時候我們就必須使用數據庫來存儲信息,使得數據動態的顯示。

5.2 Echarts與服務器交互的實現

項目結構

image-20200527214007747

所需jar包

image-20200527214212198

LineChart.jsp頁面
<%--
  Created by IntelliJ IDEA.
  User: Ziph
  Date: 2020/5/19
  Time: 13:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>echarts折線圖</title>
    <script src="echarts/echarts.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var eCharts = echarts.init(document.getElementById("main"));
            $.get("${pageContext.request.contextPath}/LineChart", {}, function (data) {
                var option = {
                    title: {
                        text: '賣家週記錄'
                    },
                    xAxis: {
                        name: 'weeks',
                        type: 'category',
                        data: data.weekList
                    },
                    yAxis: {
                        name: '銷量/件',
                        type: 'value'
                    },
                    series: [{
                        data: data.saleList,
                        type: 'line',
                    }]
                };
                eCharts.setOption(option);
            }, "json");
        });
    </script>
</head>
<body>
<div id="main" style="width: 1000px;height: 400px"></div>
</body>
</html>
Sale實體類
package com.mylifes1110.java.bean;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Sale {
	//使用的Lombok插件,大家也可以自行生成所需的get/set方法、toString方法等
    private Integer id;
    private Integer sales;
    private String  week;
}
c3p0.properties配置文件
c3p0.driverClass=com.mysql.jdbc.Driver
c3p0.jdbcUrl=jdbc:mysql://localhost:3306/temp
c3p0.user=root
c3p0.password=123456
DBUtils連接池工具類
package com.mylifes1110.java.utils;

import com.mchange.v2.c3p0.ComboPooledDataSource;

/**
 * c3p0工具類
 */
public class DBUtils {
    private static ComboPooledDataSource dataSource;

    static {
        dataSource = new ComboPooledDataSource();
    }

    public static ComboPooledDataSource getDataSource() {
        return dataSource;
    }
}
Jackson解析工具類
package com.mylifes1110.java.utils;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * Jackson工具類
 */
public class JSONUtils {

    /**
     * 將Java對象轉換爲JSON字符串
     *
     * @param o Java對象
     * @return JSON字符串
     * @throws JsonProcessingException
     */
    public static String toJsonStr(Object o) throws JsonProcessingException {
        return new ObjectMapper().writeValueAsString(o);
    }

    /**
     * 將JSON字符串相應到瀏覽器
     *
     * @param response 響應對象
     * @param o        Java對象
     * @throws IOException
     */
    public static void writeJsonStr(HttpServletResponse response, Object o) throws IOException {
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(toJsonStr(o));
    }
}
LineChartServlet
package com.mylifes1110.java.controller;

import java.io.IOException;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.mylifes1110.java.bean.Sale;
import com.mylifes1110.java.service.SaleService;
import com.mylifes1110.java.service.impl.SaleServiceImpl;
import com.mylifes1110.java.utils.JSONUtils;

import lombok.SneakyThrows;

@WebServlet(
    name  = "LineChartServlet",
    value = "/LineChart"
)
public class LineChartServlet extends HttpServlet {
    @SneakyThrows
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        SaleService   saleService = new SaleServiceImpl();
        List<Sale>    sales       = saleService.selectSalesList();
        List<Integer> saleList    = new ArrayList<>();
        List<String>  weekList    = new ArrayList<>();

        for (Sale sale : sales) {
            saleList.add(sale.getSales());
            weekList.add(sale.getWeek());
        }

        Map<String, Object> map = new HashMap<>();

        map.put("weekList", weekList);
        map.put("saleList", saleList);
        JSONUtils.writeJsonStr(response, map);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}
SaleDao
package com.mylifes1110.java.dao;

import com.mylifes1110.java.bean.Sale;

import java.sql.SQLException;
import java.util.List;

public interface SaleDao {
    List<Sale> selectSalesList() throws SQLException;
}
SaleDaoImpl
package com.mylifes1110.java.dao.impl;

import java.sql.SQLException;

import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.mylifes1110.java.bean.Sale;
import com.mylifes1110.java.dao.SaleDao;
import com.mylifes1110.java.utils.DBUtils;

public class SaleDaoImpl implements SaleDao {
    @Override
    public List<Sale> selectSalesList() throws SQLException {
        return new QueryRunner(DBUtils.getDataSource()).query("select * from tb_sales ",
                                                              new BeanListHandler<Sale>(Sale.class));
    }
}
SaleService
package com.mylifes1110.java.service;

import com.mylifes1110.java.bean.Sale;

import java.sql.SQLException;
import java.util.List;

public interface SaleService {
    List<Sale> selectSalesList() throws SQLException;
}
SaleServiceImpl
package com.mylifes1110.java.service.impl;

import com.mylifes1110.java.bean.Sale;
import com.mylifes1110.java.dao.SaleDao;
import com.mylifes1110.java.dao.impl.SaleDaoImpl;
import com.mylifes1110.java.service.SaleService;

import java.sql.SQLException;
import java.util.List;

public class SaleServiceImpl implements SaleService {
    private SaleDao saleDao = new SaleDaoImpl();
    @Override
    public List<Sale> selectSalesList() throws SQLException {
        return saleDao.selectSalesList();
    }
}
頁面顯示效果

這樣我們就可以修改數據庫,及時、動態的設計到服務器中顯示數據圖表統計信息了!

image-20200527214852992

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章