ECharts学习篇一

墨蓝 2022-06-05 06:05 189阅读 0赞

# 前言 #

这只是一个demo本文利用SSM框架+mysql简单实现一个折线图。

# 简介 #

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。  
 支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

# 实践 #

引入需要的js,可以从官网上下载，demo中用到的js有

![Center][]

# 部分代码 #

SaleMapper.java

package com.mapper;
    
    import java.util.List;
    
    
    import com.po.Sale;
    
    public interface SaleMapper {
    	
    	List<Sale> selectById();
    
    
    }

SaleMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.mapper.SaleMapper">
       <select id="selectById" parameterType="Sale" resultType="Sale">
            SELECT product.Product_Name,sale.year,sale.month,sale.sales FROM sale INNER JOIN product ON 
    		product.Product_ID=sale.product_Id where product.Product_ID='11' AND year='2017' ORDER BY month
       </select>
    </mapper>

SaleServiceImpl.java

package com.service.impl;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.mapper.SaleMapper;
    import com.po.Sale;
    import com.service.SaleService;
    
    @Service("saleService")
    public class SaleServiceImpl implements SaleService {
    
    	@Autowired
    	private SaleMapper mapper;
    	@Override
    	public List<Sale> selectById() {
    		
    		return mapper.selectById();
    	}
    
    }

controller

package com.controller;
    
    
    import com.po.Sale;
    
    import com.service.SaleService;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.List;
    
    @Controller
    @RequestMapping(value = "/echarts")
    public class RecordController {
    
    
    	@Autowired
    	private SaleService saleService;
    
    	@RequestMapping(value = "/carnum")
    	public @ResponseBody Object getnum() {
    		List<Sale> list = saleService.selectById();
    		return list;
    	}
    
    	@RequestMapping(value = "/echart1")
    	public String show() {
    		return "echarts/showechart";
    	}
    }

showechart.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    <html>
    <head>
    <title>- 测试数据 -</title>
    </head>
    <base href="<%=basePath%>">
    <script type="text/javascript" src="static/echarts/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="static/echarts/echarts.js"></script>
    
    <body>
    
    	
    	
    	<div style="height: 410px; width:400px;min-height: 100px; margin: 0 auto;"
    		id="main"></div>
    	
    	<script type="text/javascript">
    		// 基于准备好的dom，初始化echarts实例
    		var myChart = echarts.init(document.getElementById('main'));
    
    		// 指定图表的配置项和数据
    		var option = {
    			title : { //图表标题
    				text : 'test数据图表'
    			},
    
    			tooltip : {
    				trigger : 'axis', //坐标轴触发提示框，多用于柱状、折线图中
    
    			},
    
    			legend : { //图表上方的类别显示           	
    				show : true,
    				data : [ '销售量' ]
    			},
    
    			toolbox : {
    				feature : {
    					dataView : {
    						show : true,
    						readOnly : false
    					},
    					magicType : {
    						show : true,
    						type : [ 'line', 'bar' ]
    					},
    					restore : {
    						show : true
    					},
    					saveAsImage : {
    						show : true
    					}
    				}
    			},
    			xAxis : [ //X轴       	
    			{			
    				show : true,
    				type : 'category',
    				boundaryGap : false,
    				data : []
    			} ],
    			yAxis : [
    
    			{
    				show : true
    			}
    
    			],
    			series : [ //系列（内容）列表                      
    			{
    				name : '销售量',
    				type : 'line', //折线图表示（生成温度曲线）
    				/* symbol:'emptycircle', *///设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
    				symbol : 'none',
    				smooth : true,
    				xAxisIndex : 0,
    				yAxisIndex : 0,
    				itemStyle : {
    					normal : {
    						areaStyle : {
    							type : 'default'
    						}
    					}
    				},
    				data : []
    			//数据值通过Ajax动态获取
    			}
    
    			]
    		};
    		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
    
    		var tems = []; 
    		var dates = []; //时间数组
    
    		$.ajax({ //使用JQuery内置的Ajax方法
    			type : "post", //post请求方式
    			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    			url : "echarts/carnum.action",
    			data : {
    				productId : "11"
    			}, 
    			dataType : "json", //返回数据形式为json
    			success : function(result) {
    				//请求成功时执行该函数内容，result即为服务器返回的json对象
    				if (result != null && result.length > 0) {
    					for (var i = 0; i < result.length; i++) {
    						tems.push(result[i].sales); 
    						dates.push(result[i].month);
    					}
    					myChart.hideLoading(); //隐藏加载动画
    
    					myChart.setOption({ //载入数据
    						xAxis : {
    							data : dates
    						    //填入X轴数据
    						},
    						series : [ //填入系列（内容）数据
    						{
    							// 根据名字对应到相应的系列
    							name : '销售量',
    							data : tems
    						}						
    						]
    					});
    
    				} else {
    					//返回的数据为空时显示提示信息
    					alert("图表请求数据为空，可能服务器暂未录入近五天的观测数据，您可以稍后再试！");
    					myChart.hideLoading();
    				}
    
    			},
    			error : function(errorMsg) {
    				//请求失败时执行该函数
    				alert("图表请求数据失败，可能是服务器开小差了");
    				myChart.hideLoading();
    			}
    		})
    		myChart.setOption(option); //载入图表
    	</script>
    
    </body>
    </html>

执行结果图

![Center 1][]

# 小结 #

Echarts功能还是挺强大的，官网上文档和小例子都还是不错的。

[Center]: /images/20220605/37a3edcb168d42e2ae1973c1c87954af.png
[Center 1]: /images/20220605/8bbfa44c102d455792b6bede77e30b37.png