Echarts 可视化图标库
1、五分钟案例
1.1、引入资源
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/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: '五分钟案例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
效果如下💁
2、与后台交互
给个点击事件,此事件最好是查询事件,点击后,请求后台,传递Echars规定的数据结构。再用Js接收
// 默认引用 jquery
$("#seach").click(funcation(){
search();
})
// ajax 请求
funcation seach(){
var code = $("#code").val();
$.ajax({
url: "/eachrs/seach",
data: {code:code},
type: "get",
dataType: "json",
success: function (data) {
treeDiagram(data);
}
});
}
function treeDiagram(datas) {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
myChart.hideLoading();
datas.children.forEach(function (datum, index) {
index % 2 === 0 && (datum.collapsed = true);
});
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data:[datas],
top: '1%',
left: '45%',
bottom: '1%',
right: '45%',
symbolSize: 17,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 17,
textStyle: {
color: '#000000'
}
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
option && myChart.setOption(option);
}
treeDiagram 方法是 Echars 默认提供的 大括号 图形结构,可以根据自身要求在官网中查找所需
3、树形结构详解
最终返回的数据结构是 (二级案例)
- children:
- 1->
- children:[]
- code:“门诊次均药品费用增幅”
- name:“住院次均费用”
- 2->
- children:[]
- code:“门诊次均药品费用增幅”
- name:“去年同期住院次均费用”
- name :“门诊次均药品费用增幅”
展示 浏览器后台单引数据如下:
展示 浏览器最终效果如下:
3.1、后台组装数据详解
数据库中原始数据:
TAB | NODE | PARENT_NODE |
---|---|---|
1 | 住院次均费用 | 门诊次均药品费用增幅 |
2 | 去年同期住院次均费用 | 门诊次均药品费用增幅 |
实现代码如下:
1、查询数据
List<Dictionary> tree = indexDefineDao.findTree(code);
解析:查询条件为: 门诊次均药品费用增幅
以 此为根节点,利用 START WITH 查询出所有数据,在后台进行组装
SELECT PARENT_NODE as CODE,NODE as NAME FROM TAB C
START WITH C.PARENT_NODE = '门诊次均药品费用增幅'
CONNECT BY PRIOR C.NODE = C.PARENT_NODE
Dictionary为自定义对象 内有属性: CODE、NAME
可以查询出:
1 门诊次均药品费用增幅 住院次均费用
2 门诊次均药品费用增幅 去年同期住院次均费用
2、组装数据
将上述数据拼接成如下结构
name:'门诊次均药品费用增幅',
children: {[
{
name: '住院次均费用',
children:{}
},{
name: '去年同期住院次均费用',
children:{}
}
]}
TreeNodeMap 自定义类,请查看 TreeNodeMap.md 文件
private List<TreeNodeMap> compositeTree(List<Dictionary> treeMap,String parentId) {
List<TreeNodeMap> l = new ArrayList<TreeNodeMap>();
TreeNodeMap n;
for (Dictionary k : treeMap) {
if(parentId.equals(k.getCode())){
n = new TreeNodeMap();
n.setChildren(compositeTree(treeMap, k.getName()));
n.attr("name",k.getName());
n.attr("code",k.getCode());
l.add(n);
}
}
return l;
}
到这一步,就快成功了,到目前,我们的数据是 List
TreeNodeMap treeNodeMap = new TreeNodeMap();
treeNodeMap.attr("name",name);
treeNodeMap.setChildren(treeNodeMaps);
我们再拼接一个 根 name
就可以了
最终返回到前端是类型是 TreeNodeMap
3、前端ajax获取
获取数据后,再次调用 treeDiagram();
最终能到动态查询展示
好了到这我们的分享也就结束了😉 希望以上方法可以帮到您,祝您工作愉快!💖 👇 对您有帮助的话记点赞得收藏哦!👍 我是 Xiang想 从一个小白一步一步地变成工具人 😛
TreeNodeMap.java 源码附下:
package net.gbicc.core.util.ext;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import net.gbicc.core.Constant;
/**
* 此方法可自定义传到前台的数据类型
* ClassName:TreeNodeMap
* @author Leo D.J
* @Date 2013-12-30 下午03:15:58
*/
public class TreeNodeMap extends HashMap<String, Object> {
private static final long serialVersionUID = 787979937037454849L;
public TreeNodeMap(){}
public TreeNodeMap(String id,String text){
attr("id",id);
attr("text",text);
}
public TreeNodeMap(String id,String text,boolean leaf){
attr("id",id);
attr("text",text);
attr("leaf",leaf);
}
public void setChecked(boolean checked){
attr("checked",checked);
}
public void setExpanded(boolean expanded){
attr("expanded",expanded);
}
public void setChildren(List<TreeNodeMap> children){
attr("children",children);
}
public TreeNodeMap addChildren(TreeNodeMap node){
List<TreeNodeMap> children = getChildren();
if(null == children) setChildren(new ArrayList<TreeNodeMap>());
children = getChildren();
children.add(node);
return this;
}
@SuppressWarnings("unchecked")
public List<TreeNodeMap> getChildren(){
List<TreeNodeMap> children = (List<TreeNodeMap>) get("children");
return children;
}
public Object attr(String k){
return get(k);
}
public void attr(String k,Object v){
put(k,v);
}
public void setLeaf(boolean leaf){
attr("leaf",leaf);
}
public String getParentId(){
return (String) get("parentId");
}
public void setParentId(String parentId){
attr("parentId",parentId);
}
public String getId(){
return (String) get("id");
}
public String getText() {
return (String) get("text");
}
public static String NODE_ATTRI_NAMES = "id,text,checked,leaf,parentId,expanded,children,code";
public static String[] attrArr = NODE_ATTRI_NAMES.split(",");
private static String getTreeNodeAttrName(String key){
for (int i = 0,l = attrArr.length; i <l; i++ ) {
String attrName = attrArr[i];
if(attrName.toLowerCase().equals(key.toLowerCase()))
return attrName;
}
return null;
}
public static List<TreeNodeMap> createNodes(List<Map<String, Object>> list){
return createCheckedNodes(list,false,null,new String[]{});
}
public static List<TreeNodeMap> createNodes(List<Map<String, Object>> list,String[] extraAttrNames){
return createCheckedNodes(list,false,null,extraAttrNames);
}
/**
* 转换,可转以下字段
* id,text,checked,leaf,parentId,expanded,children
* @param list
* @param widthChecked 是否需要
* @param checkedName
* @return
* @throws
* @created 2013-12-30 下午04:55:35
*/
public static List<TreeNodeMap> createCheckedNodes(List<Map<String, Object>> list,boolean withChecked,String checkedColumnName){
return createCheckedNodes(list, withChecked, checkedColumnName,new String[]{});
}
public static List<TreeNodeMap> createCheckedNodes(List<Map<String, Object>> list,boolean withChecked,String checkedColumnName,String[] extraAttrNames){
List<TreeNodeMap> nodes = new ArrayList<TreeNodeMap>();
for (Map<String, Object> map : list) {
nodes.add(createNode(map, withChecked, checkedColumnName,extraAttrNames));
}
return nodes;
}
public static TreeNodeMap createNode(Map<String, Object> v,boolean widthChecked,String checkedName, String[] extraAttrNames){
TreeNodeMap n = new TreeNodeMap();
for(String key :v.keySet()){
String attrName = getTreeNodeAttrName(key);
if("parent_id".equals(key.toLowerCase()))attrName = "parentId";
if(null != attrName)n.attr(attrName, v.get(key));
}
for (int i = 0 , l = extraAttrNames.length; i < l; i++) {
String extraAttrName = extraAttrNames[i];
Object extraAttrValue = v.get(extraAttrName.toUpperCase());
if(extraAttrValue != null)n.attr(extraAttrName, extraAttrValue);
}
if(widthChecked){
checkedName = checkedName == null ?"checked": checkedName;
n.setChecked(v.get(checkedName.toUpperCase())!=null);
}
return n;
}
public TreeNodeMap copy(){
TreeNodeMap m = new TreeNodeMap();
for(String k : keySet())
m.attr(k, get(k));
return m;
}
private static List<TreeNodeMap> compositeTree(List<TreeNodeMap> unCompsityTreeMap,String parentId,boolean expaned) {
List<TreeNodeMap> tree = new ArrayList<TreeNodeMap>();
for (TreeNodeMap m : unCompsityTreeMap) {
if(parentId.equals(m.getParentId())){
m.setChildren(compositeTree(unCompsityTreeMap,m.getId(),expaned));
m.setExpanded(expaned);
tree.add(m.copy());
}
}
return tree;
}
/**
* 组装树节点,此仅适用于,从根节点开始完整的树节点
* @param unCompsityTreeMap
* @return
* @throws
* @created 2014-1-3 上午10:17:27
*/
public static List<TreeNodeMap> compositeTree(List<TreeNodeMap> unCompsityTreeMap,boolean expaned) {
return compositeTree(unCompsityTreeMap,Constant.TREE_ROOT_NODE_ID,expaned);
}
}