Echars
一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8 / 9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
丰富的可视化类型
ECharts提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表盘，并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECOrts还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。
你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。曾经有同事跟我说：“我知道echars，但很少用，因为要引入的echars.js太大，其实大可不必担心这个问题，因为最小的常用包是291KB（包括折，柱，饼），如果还觉得大自己还可以定制需要引入的JS。
当然echars的强大之处远远不止我说的这些（真想说一句：中国人开发的就是叼），从echars官网中可以看到，很多大公司都在用，比如阿里，腾讯，百度，小米等等。
绘制一个简单的图表
这是官方给出的演示
在绘图前我们需要为ECharts准备一个具备高宽的DOM容器。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>然后就可以通过 echarts.init 方法初始化一个echarts实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<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>
</body>
<html>
但平时我们都是从数据库中获取数据到前端来展示的。下面教大家从数据库中获取数据到前端，前端通过解析JSON字符串为JSON对象赋值数据。
小编用的是异步的Ajax后请求获取数据的，当然也可以用其他方式获取数据能拿到数据就行。
此时需要引入jquery.js库小编用的四springboot-jsp
JSP前端页面：
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2018/8/13
Time: 14:19
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script language="javascript" src="${ctx}/resources/js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/echarts.common.min.js"></script>
<html>
<head>
<title>Echars</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<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: []
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//ajax请求
$.ajax({
type: "post",
url: "echars-first",
success: function (e) {
var e = eval('(' + e + ')');
// var e = e.parseJSON(); json字符串转为json对象
// var e = JSON.parse(e);
myChart.setOption({
xAxis: {
data: e["xAxis"]
}
, series: [{
data: e["yAxis"]
}]
});
myChart.hideLoading();
},
error: function (e) {
console.log(e)
}
});
</script>
</body>
</html>
后端代码：
@RequestMapping("/echars-first")
@ResponseBody
public String ajaxEcharsFirst(){
List<String> list =new ArrayList <>(16);
list.add("刘备");
list.add("关羽");
list.add("黄忠");
list.add("小巧");
list.add("大乔");
list.add("张飞");
List<String> list2 =new ArrayList <>(16);
for (int i =0;i<6;i++){
list2.add(i+1+"");
}
Map <String,Object> map =new HashMap <>(16);
map.put("xAxis",list);
map.put("yAxis",list2);
String json = JSON.toJSONString(map);
return json;
}
个人觉得传给前端图表做展示的数据无非是为List，Map或者混合，其余的展示功能echars都做好了比如颜色，角度，比例等等，echars里里面还有很多图例，很多好玩的，小编在曾经任职的公司给广西政府做过大数据可视化平台，有过几十万数据至今还没出过问题哦！
完整代码:https://download.csdn.net/download/qq_28953809/10601334