6g下载网
当前位置: 主页 > 软件教程 > 编程开发 >

echarts如何实现单击事件跳转?

时间: 2016-09-07 14:47 来源: 本站整理

分享到:

今天小编整理一篇echarts如何实现单击事件跳转的文章和大家分享,希望能给大家提供帮助。

实现方法:

在github 上git了echarts的文件。

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>ECharts</title>  
  6.  
  7.  
  8.     <!-- 文档  
  9.  
  10.         传过来的数据:  
  11.             {  
  12.                 nodes:{  
  13.  
  14.                     "name":"node1",//名称                               
  15.                     "value": 40,//圆的大小  
  16.                     "category" :1//类别  
  17.                 },  
  18.                 links:{  
  19.                     "source""node1",//源点  
  20.                     "weight" : 1,//权重  
  21.                     "target""node2"//目标  
  22.                 }  
  23.  
  24.             }  
  25.  
  26.         点击事件 例子为 node1  
  27.     -->  
  28. </head>  
  29.  
  30. <body>  
  31.     <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->  
  32.     <!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->  
  33.     <div id="main" style="height:500px;border:1px "></div>  
  34.  
  35.     <div id = "div1"></div>  
  36.     <!--Step:2 Import echarts.js-->  
  37.     <!--Step:2 引入echarts.js-->  
  38.     <script src="js/echarts.js"></script>  
  39.  
  40.     <script type="text/javascript">  
  41.  
  42.  
  43.         var tree = {  
  44.                     "name":"node1",//名称                               
  45.                     "id""node1",//id  
  46.                     "url":"http://www.baidu.com",  
  47.                     "children":[  
  48.                         {  
  49.                             "name":"node2",//名称                               
  50.                             "id""node2",//id  
  51.                             "url":"http://www.baidu.com",    
  52.                              "children":[  
  53.                                     {  
  54.                                         "name":"node5",//名称                               
  55.                                         "id""node5",//id  
  56.                                         "url":"http://www.baidu.com",      
  57.                                     },{  
  58.                                         "name":"node6",//名称                               
  59.                                         "id""node6",//id  
  60.                                         "url":"http://www.baidu.com",  
  61.                                     },{  
  62.                                         "name":"node7",//名称                               
  63.                                         "id""node7",//id  
  64.                                         "url":"http://www.baidu.com",  
  65.                                     }  
  66.                                 ]  
  67.                         },{  
  68.                             "name":"node3",//名称                               
  69.                             "id""node3",//id  
  70.                             "url":"http://www.baidu.com",  
  71.                             "children":[  
  72.                                     {  
  73.                                         "name":"node8",//名称                               
  74.                                         "id""node8",//id  
  75.                                         "url":"http://www.baidu.com",      
  76.                                     },{  
  77.                                         "name":"node9",//名称                               
  78.                                         "id""node9",//id  
  79.                                         "url":"http://www.baidu.com",  
  80.                                     },{  
  81.                                         "name":"node10",//名称                               
  82.                                         "id""node10",//id  
  83.                                         "url":"http://www.baidu.com",  
  84.                                         "children":[  
  85.                                                     {  
  86.                                                         "name":"node11",//名称                               
  87.                                                         "id""node11",//id  
  88.                                                         "url":"http://www.baidu.com",      
  89.                                                     },{  
  90.                                                         "name":"node12",//名称                               
  91.                                                         "id""node12",//id  
  92.                                                         "url":"http://www.baidu.com",  
  93.                                                     },{  
  94.                                                         "name":"node13",//名称                               
  95.                                                         "id""node13",//id  
  96.                                                         "url":"http://www.baidu.com",  
  97.                                                     }  
  98.                                                 ]  
  99.                                     }  
  100.                                 ]  
  101.                         },{  
  102.                             "name":"node4",//名称                               
  103.                             "id""node4",//id  
  104.                             "url":"http://www.baidu.com",  
  105.                         }  
  106.                     ]  
  107.         }  
  108.  
  109.  
  110.  
  111.         //定义结构  
  112.         var graph ={  
  113.             nodes:[],  
  114.             links:[]      
  115.         } ;  
  116.  
  117.         //树的深度  
  118.         dept = 0;  
  119.         //转化  
  120.         function decodeTree(myNode,num){  
  121.            var  node = {  
  122.                 "name":myNode.name,  
  123.                 "id":myNode.id,  
  124.                 "url":myNode.url,  
  125.                 "category":num,  
  126.                 "symbolSize": 40 - num * 8  
  127.             }  
  128.  
  129.             graph.nodes.push(node);  
  130.  
  131.             if(myNode.children == undefined){  
  132.                 return;  
  133.             }  
  134.  
  135.             var len = myNode.children.length;  
  136.  
  137.             num++;  
  138.             if(num > dept){  
  139.                 dept = num;  
  140.             }  
  141.             for (var i = 0; i < len; i++) {  
  142.                 var link = {  
  143.                     "source": myNode.name,  
  144.                     "weight" : 1,  
  145.                     "target": myNode.children[i].name  
  146.                 }  
  147.                 graph.links.push(link);  
  148.                 decodeTree(myNode.children[i],num);  
  149.             };  
  150.         }  
  151.         decodeTree(tree,0);  
  152.  
  153.         //类型的确定  
  154.         var categories = [];  
  155.         var categorieNames = [];  
  156.         for (var i = 0; i < dept+1; i++) {  
  157.             categories[i] = {  
  158.                 name: '类型' + i  
  159.             };  
  160.             categorieNames[i]  = '类型' + i;  
  161.         }  
  162.  
  163.  
  164.     // Step:3 conifg ECharts's path, link to echarts.js from current page.  
  165.     // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径  
  166.     require.config({  
  167.         paths: {  
  168.             echarts: './js' 
  169.         }  
  170.     });  
  171.  
  172.     // Step:4 require echarts and use it in the callback.  
  173.     // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径  
  174.  
  175.     require([   
  176.         'echarts''echarts/chart/force' // 使用柱状图就加载bar模块,按需加载    
  177.         ], function(ec) {    
  178.             // 基于准备好的dom,初始化echarts图表    
  179.             var myChart = ec.init(document.getElementById('main'));    
  180.             // 添加点击事件    
  181.             var ecConfig = require('echarts/config');    
  182.             myChart.on(ecConfig.EVENT.CLICK, eConsole);      
  183.             var option = {    
  184.                 title: {  
  185.                     text: 'demo',//文本标题  
  186.                     subtext: 'Default layout',//副标题  
  187.                     x:'right',  
  188.                     y:'bottom' 
  189.                 },  
  190.                 tooltip : {      
  191.                     formatter: function (params, ticket, callback) {//回调函数  
  192.                          var str = appendPath(graph.nodes[params.dataIndex].id);  
  193.                          document.getElementById("div1").innerHTML = str;  
  194.                          return str;//  
  195.                      }  
  196.                 },    
  197.                 toolbox : {    
  198.                     show : true,  //是否显示策略  
  199.                     feature : {    
  200.                         restore : {show: true},  
  201.                         magicType: {show: true, type: ['force''chord']},  
  202.                         saveAsImage : {show: true}    
  203.                     }    
  204.                 },    
  205.                 legend: {  
  206.                     x: 'left',  
  207.                     data:categorieNames  
  208.                 },  
  209.                 series : [ {    
  210.                     type : 'force',    
  211.                     name : "关系",    
  212.                     ribbonType : false,    
  213.                     clickable : true,    
  214.                     draggable : true,    
  215.                     categories :categories,  
  216.                     itemStyle : {    
  217.                         normal : {    
  218.                             label : {    
  219.                                 show:true 
  220.                             },    
  221.                             nodeStyle : {    
  222.                                 brushType : 'both',    
  223.                                 borderColor : 'rgba(255,215,0,0.4)',    
  224.                                 borderWidth : 1    
  225.                             },    
  226.                             linkStyle : {    
  227.                                 type : 'curve'    
  228.                             }    
  229.                         },      
  230.                     },    
  231.                     useWorker : false,    
  232.                     minRadius : 15,    
  233.                     maxRadius : 25,    
  234.                     gravity : 1.1,    
  235.                     scaling : 1.1,    
  236.                     roam : false,    
  237.                     nodes:graph.nodes,  
  238.                     links:graph.links                   
  239.                 } ]    
  240.             };    
  241.  
  242.             // 为echarts对象加载数据    
  243.             myChart.setOption(option);    
  244.  
  245.         });    
  246.  
  247.   /**  
  248.      点击事件处理  
  249.   */ 
  250.     function eConsole(param) {      
  251.         if (typeof param.seriesIndex == 'undefined') {      
  252.             return;      
  253.         }      
  254.  
  255.         if (param.type == 'click') {      
  256.             //param.dataIndex 得到节点的index  
  257.             window.location.href = graph.nodes[param.dataIndex].url;  
  258.         }      
  259.     }      
  260.  
  261.    /**  
  262.         拼接路径  
  263.      */ 
  264.     function appendPath(id){   
  265.         var str = id;  
  266.         var links = graph.links;  
  267.         var i = 0;  
  268.         var map = {};  
  269.         for( i = 0 ; i < links.length; i++){  
  270.             map[links[i].target] = links[i].source;  
  271.         }  
  272.         while(true){             
  273.             if(map[id] == undefined){  
  274.                 break;  
  275.             }  
  276.             str = map[id]  +"->" + str;  
  277.             id = map[id] ;  
  278.         }  
  279.         return str;  
  280.     }  
  281.  
  282.     </script>  
  283. </body>  
  284. </html> 

代码运行效果图:

echarts如何实现单击事件跳转?

echarts如何实现单击事件跳转的文章和大家分享结束,感谢阅读!

(责任编辑:6g下载网)

分享到:

------分隔线----------------------------