Echarts学习笔记

原创 2016年08月28日 20:47:57

<%@ page language="java" import="java.util.*"
 pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'echarts.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<meta charset="UTF-8">

</head>
<body>
    </div>
    <div id="main" style="width: 1000px; height: 750px"></div>

   <div class = "message" style="margin-left: 80%; margin-top: -40%; width: 200px; height: 300px;border:1px solid #F00;background-color:white;display:none"  >
    <!-- <a id="close">x</a>    -->
    叙词名为:<span id="span1">原文</span>
     <br>
    <!-- <span id="span3">原文</span>  -->
    英文名为:<input id="span2">
    </div>
    <script src="js/jquery-1.4.3.min.js"></script>
 <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
      require.config({
            paths : {
                echarts : 'http://echarts.baidu.com/build/dist'
            }
        });
        require([ "echarts", "echarts/chart/force"], function(ec) {
            var i;
            var myData =${requestScope.aa };
            if(myData.length>100)
            i = myData.length/100;
            else
             i = 1.1;
            // var x=${resquestScope.value};
            //var myLink =${requestScope.aa };
            var myChart = ec.init(document.getElementById('main'), 'macarons');
            var option = {
                tooltip : {
                    show : false
                },
                tooltip : {
        trigger: 'item',
        formatter: '{a} : {b}'
    },
    toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            magicType: {show: true, type: ['force', 'chord']},
            saveAsImage : {show: true}
        }
    },
               series : [
        {
            type:'force',
           //       edgeLength: 10, //默认距离
             //   repulsion: 10, //斥力
            ribbonType: false,
            categories : [

            ],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: '#333'
                        }
                    },
                    nodeStyle : {
                        brushType : 'both',
                        borderColor : 'rgba(255,215,0,0.4)',
                        borderWidth : 1
                    },
                    linkStyle: {
                        type: 'curve'
                    }
                },
                emphasis: {
                    label: {
                        show: false
                        // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
                    },
                    nodeStyle : {
                        //r: 30
                    },
                    linkStyle : {

                    }
                }
            },          
            useWorker: false,
            minRadius : 15,
            maxRadius : 25,
            gravity: 1.1,
            scaling: i,
            roam: 'move',
                     nodes :${requestScope.aa },
                    links :${requestScope.bb }
                } ]
            };
            myChart.setOption(option);
            var ecConfig = require('echarts/config');
            function openOrFold(param) {
                var option = myChart.getOption();//获取已生成图形的option
                var nodesOption = option.series[0].nodes;//获得所有节点数组
                var linksOption = option.series[0].links;//获得所有连接的数组
                var data = param.data;//表示当前选择的某一节点
                var linksNodes = [];//中间变量
                //var value=${requestScope.value };
                var categoryLength = option.series[0].categories.length;//获取类别数组的大小
                /*
                该段代码判断当前节点的category是否为最终子节点,
                如果是,则弹出该节点的label
                */  
                if (data.category == (0)) {
                        //window.open =function () {

    //}
                }
                //添加点击事件
                 if (typeof param.seriesIndex == 'undefined') {    
                        return;    
                  }  

                    if (param.type == 'click') {    

                         $.ajax({ 
                            url:"findename", //服务器的地址 
                            data:{"name":param.name}, //参数 
                            dataType:"text", //返回数据类型 
                            type:"POST", //请求类型 
                            success:function(data){ 
                        var result = JSON.parse(data); 
                            //alert(result);

                       /*               
                        $.each(data, function(index,values){   // 解析出data对应的Object数组  
                            $.each(values,function(index2,value){   // 遍历Object数组 ,每个对象的值存放在value ,index2表示为第几个对象  
                                //  根据自己的逻辑进行数据的处理  
                                alert(value.name);  
                               //  TODO:  逻辑  
                            });  
                        }); 
                        */
                                $("#span1").text(param.name);  
                                $("#span2").val(result);   
                            },
                            error:function(data){
                            alert(shibai);
                            }
                            }); 
                            $(".message").fadeIn();
                            $(".message").fadeIn("slow");
                            $(".message").fadeIn(3000);     


                          //$("#span2").text(param.name);


                    }

                    //判断是否选择到了连接线上
                if (data != null && data != undefined) {
                    /*
                    判断所选节点的flag
                    如果为真,则表示要展开数据,
                    如果为假,则表示要折叠数据
                    */
                    if (data.flag) {
                    //遍历关系数组,最终获得所选节点的一层子节点
                        for ( var m in linksOption) {
                            //父节点为当前节点
                            if (linksOption[m].target == data.id) {

                                linksNodes.push(linksOption[m].source);//获得子节点数据
                            }
                        }
                        //遍历子节点数组,设置对应的option属性
                        if (linksNodes != null && linksNodes != undefined) {
                            for ( var p in linksNodes) {
                                nodesOption[linksNodes[p]].ignore = false;//设置展示该节点
                                nodesOption[linksNodes[p]].flag = true;
                            }
                        }
                        nodesOption[data.id].flag = false;//设置该节点的flag为false,下次点击折叠子孙节点
                        myChart.setOption(option);//重新绘制
                    } else {

                        for ( var m in linksOption) {
                                /* 
                                遍历连接关系数组,最终获得所选择节点的所有子节点
                                */
                            if (linksOption[m].target == data.id) {//父节点为当前节点
                                linksNodes.push(linksOption[m].source);//找到当前节点的第一层子节点
                            }
                            if (linksNodes != null && linksNodes != undefined) {
                                for ( var n in linksNodes) {
                                //第一层子节点作为父节点,找到所有子孙节点
                                    if (linksOption[m].target == linksNodes[n]) {
                                        linksNodes.push(linksOption[m].source);
                                    }
                                }
                            }
                        }
                        //遍历最终生成的连接关系数组
                        if (linksNodes != null && linksNodes != undefined) {
                            for ( var p in linksNodes) {
                                nodesOption[linksNodes[p]].ignore = true;//设置折叠该节点
                                nodesOption[linksNodes[p]].flag = true;
                                 $(".message").hide();
                            }
                        }
                        nodesOption[data.id].flag = true;//设置该节点的flag为true,下次点击展开子节点
                        myChart.setOption(option);//重绘
                    }
                }
            }
            myChart.on(ecConfig.EVENT.CLICK, openOrFold);
        });
    </script>
</body>
</html>


重点在节点数组和关系数组

版权声明:本文为博主原创文章,未经博主允许不得转载。

ECharts显示24小时时间数据的一种办法

ECharts3是一个超好用的图表库,在App中,我也让团队放弃原生组件,直接使用ECharts3. 我用ECharts主要是按天显示采集的时间序列数据,并且需要固定展示24小时的数据。 ...
  • yin138
  • yin138
  • 2016年12月18日 21:59
  • 13443

Echarts学习笔记~

好久没更新了,之前都在忙找实习的事情,所以就停了一段时间,现在要重新加油啦~不可以偷懒~这两天学习了Echarts的用法,实际来说,他的很多功能在echart的文档当中都写的很清楚了,我最开始学习的是...
  • zhengzhiyun
  • zhengzhiyun
  • 2016年09月23日 09:50
  • 1464

ECharts实例开发学习笔记二——时间轴

记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数...
  • Qing_yun
  • Qing_yun
  • 2015年09月24日 21:19
  • 16800

ECharts学习笔记

ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。 提供大量常用的数据可视化图表,底层基于ZRender(一...
  • tiantang_1986
  • tiantang_1986
  • 2017年06月27日 10:41
  • 225

ECharts实例开发学习笔记二——时间轴

记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数...
  • Qing_yun
  • Qing_yun
  • 2015年09月24日 21:19
  • 16800

学习笔记:使用echarts画图表

最近项目组需要在web画图表,在网上找了一下,发现百度出品的echarts非常好用...
  • imageprocessing2
  • imageprocessing2
  • 2014年10月25日 00:38
  • 37147

echarts学习笔记

echarts折线图基本配置
  • qq_39558742
  • qq_39558742
  • 2017年08月01日 16:27
  • 77

ECharts实例开发学习笔记一

由于这段时间比较忙,所以隔了这么久,才开始真正的ECharts实例学习,首先,官网参考手册里给出了一个入门的demo,即”5分钟上手写ECharts的第一个图表“,就从它开始吧,另外发现ECharts...
  • Qing_yun
  • Qing_yun
  • 2015年08月27日 11:44
  • 4058

echarts-gl学习笔记

在做毕设的时候老师提了一个需求,做一个3D的飞行轨迹展示视频,就像 http://422south.com/work/nats-future-air-traffic-patterns-for-lo...
  • l627757940
  • l627757940
  • 2017年05月07日 20:38
  • 1049

Echarts学习笔记~

好久没更新了,之前都在忙找实习的事情,所以就停了一段时间,现在要重新加油啦~不可以偷懒~这两天学习了Echarts的用法,实际来说,他的很多功能在echart的文档当中都写的很清楚了,我最开始学习的是...
  • zhengzhiyun
  • zhengzhiyun
  • 2016年09月23日 09:50
  • 1464
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Echarts学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)