ECharts学习篇一

最新推荐文章于 2024-03-18 00:10:54 发布

alice s

最新推荐文章于 2024-03-18 00:10:54 发布

阅读量528

点赞数

本文链接：https://blog.csdn.net/sms15732621690/article/details/78578305

版权

前言

这只是一个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有

部分代码

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>

	<!-- 显示Echarts图表 -->
	
	<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>

执行结果图