小哥哥，小姐姐们容我再打一波小广告，我打算用几年时间去做一份关于Java学习、面试、进阶的GitHub项目。 记得说好的Star哦！ GitHub地址： https://github.com/Ziphtracks/JavaLearningmanual ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直 观，生动，可交互，可个性化定制的数据可视化图表。 Echarts官网下载地址：https://echarts.apache.org/zh/index.html 将Echarts引入到项目中，其实官方就给了解释。可以点击5分钟上手Echarts进入。这里通过标签引入打包下载好的Echarts。 关于Echarts的使用，我们必须学会查看Echarts的官方文档，这里我给大家介绍一下官方文档的常用操作。 5分钟上手教程就是新手教程了！ 可以根据API查询在使用Echarts时的语法！可以根据语法来操作Echarts图表！ 可以根据官方实例，找到并修改自己想要的图表，最后粘贴复制到自己的项目中使用即可！ 我们在使用Echarts的时候，在页面中是写死的图标信息。但是当我们真正的用于开发时，图表的信息就必须保证动态的显示周期内统计的数据信息。这时候我们就必须使用数据库来存储信息，使得数据动态的显示。 这样我们就可以修改数据库，及时、动态的设计到服务器中显示数据图表统计信息了！
目前刚刚整理好JavaSE基础内容，我将陆续的整理好JavaWeb阶段以及框架知识体系，并添加完善到GitHub中，所以我希望大家能到我的GitHub给上一个Star ！现在我的GitHub虽然还没有完善多少技术文章，但是在几个月后，我的GitHub也会陆续成为一个完整的Java学习体系！
一、什么是Echarts？
二、Echarts的下载
三、Echarts的开发步骤
3.1 Echarts的引入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html> 3.2 Echarts入门案例步骤
<%-- 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> 四、Echarts官方文档的使用
4.1 5分钟上手教程
4.2 API
4.3 官方实例
五、Echarts与服务器的交互
5.1 为什么Echarts图表要与服务器交互？
5.2 Echarts与服务器交互的实现
项目结构
所需jar包
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(); } } 页面显示效果
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
