加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

echarts添加点击事件

(2017-03-13 17:42:22)
分类： Echarts
 
  1. // 路径配置  
  2. require.config({  
  3.     paths : {  
  4.         echarts : 'jquery/echarts-2.2.7/build/dist'  
  5.     }  
  6. });  
  7. // 使用EChart.js画图  
  8. function drawChart() {  
  9.     require([ 'echarts', 'echarts/chart/force' // 使用柱状图就加载bar模块，按需加载  
  10.     ], function(ec) {  
  11.         // 基于准备好的dom，初始化echarts图表  
  12.         var myChart = ec.init(document.getElementByIdx_x_x('myChart'));  
  13.         // 添加点击事件  
  14.         var ecConfig = require('echarts/config');  
  15.         myChart.on(ecConfig.EVENT.CLICK, eConsole);    
  16.         var option = {  
  17.             tooltip : {  
  18.                 show : false,  
  19.                 trigger : 'item',  
  20.                 formatter : '{a} : {b}'  
  21.             },  
  22.             toolbox : {  
  23.                 show : true,  
  24.                 feature : {  
  25.                     restore : {  
  26.                         show : true  
  27.                     },  
  28.                 }  
  29.             },  
  30.             series : [ {  
  31.                 type : 'force',  
  32.                 name : "关系",  
  33.                 ribbonType : false,  
  34.                 clickable : true,  
  35.                 draggable : false,  
  36.                 categories : [ {  
  37.                     name : '属性'  
  38.                 }, {  
  39.                     name : '实例'  
  40.                 } ],  
  41.                 itemStyle : {  
  42.                     normal : {  
  43.                         label : {  
  44.                             show : true,  
  45.                             textStyle : {  
  46.                                 color : '#333'  
  47.                             }  
  48.                         },  
  49.                         nodeStyle : {  
  50.                             brushType : 'both',  
  51.                             borderColor : 'rgba(255,215,0,0.4)',  
  52.                             borderWidth : 1  
  53.                         },  
  54.                         linkStyle : {  
  55.                             type : 'curve'  
  56.                         }  
  57.                     },  
  58.                     emphasis : {  
  59.                         label : {  
  60.                             show : false  
  61.                         // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE  
  62.                         },  
  63.                         nodeStyle : {  
  64.                         // r: 30  
  65.                         },  
  66.                         linkStyle : {}  
  67.                     }  
  68.                 },  
  69.                 useWorker : false,  
  70.                 minRadius : 15,  
  71.                 maxRadius : 25,  
  72.                 gravity : 1.1,  
  73.                 scaling : 1.1,  
  74.                 roam : false,  
  75.                 nodes : [ {  
  76.                     category : 1,  
  77.                     name : '实例',  
  78.                     value : 10,  
  79.                     label : '宝马',  
  80.                 }, {  
  81.                     category : 0,  
  82.                     name : '属性1',  
  83.                     value : 6,  
  84.                     label : '宝马X1'  
  85.                 }, {  
  86.                     category : 0,  
  87.                     name : '属性2',  
  88.                     value : 6,  
  89.                     label : '宝马X5'  
  90.                 }, {  
  91.                     category : 0,  
  92.                     name : '属性3',  
  93.                     value : 6,  
  94.                     label : '宝马3系'  
  95.                 }, {  
  96.                     category : 0,  
  97.                     name : '属性4',  
  98.                     value : 6,  
  99.                     label : '宝马7系'  
  100.                 }, {  
  101.                     category : 0,  
  102.                     name : '属性5',  
  103.                     value : 6,  
  104.                     label : '宝马X6'  
  105.                 }, {  
  106.                     category : 0,  
  107.                     name : '属性6',  
  108.                     value : 6,  
  109.                     label : '宝马1系'  
  110.                 }, {  
  111.                     category : 0,  
  112.                     name : '属性7',  
  113.                     value : 6,  
  114.                     label : '宝马i8'  
  115.                 } ],  
  116.                 links : [ {  
  117.                     source : '属性1',  
  118.                     target : '实例',  
  119.                     weight : 1,  
  120.                     name : '属性1'  
  121.                 }, {  
  122.                     source : '属性2',  
  123.                     target : '实例',  
  124.                     weight : 1,  
  125.                     name : '属性2'  
  126.                 }, {  
  127.                     source : '属性3',  
  128.                     target : '实例',  
  129.                     weight : 1,  
  130.                     name : '属性3'  
  131.                 }, {  
  132.                     source : '属性4',  
  133.                     target : '实例',  
  134.                     weight : 1,  
  135.                     name : '属性4'  
  136.                 }, {  
  137.                     source : '属性5',  
  138.                     target : '实例',  
  139.                     weight : 1,  
  140.                     name : '属性5'  
  141.                 }, {  
  142.                     source : '属性6',  
  143.                     target : '实例',  
  144.                     weight : 1,  
  145.                     name : '属性6'  
  146.                 }, {  
  147.                     source : '属性7',  
  148.                     target : '实例',  
  149.                     weight : 1,  
  150.                     name : '属性7'  
  151.                 }, ]  
  152.             } ]  
  153.         };  
  154.   
  155.         // 为echarts对象加载数据  
  156.         myChart.setOption(option);  
  157.           
  158.     });  
  159. }  
  160.   
  161. function eConsole(param) {    
  162.     if (typeof param.seriesIndex == 'undefined') {    
  163.         return;    
  164.     }    
  165.     if (param.type == 'click') {    
  166.         ;    
  167.     }    
  168. }    
  169. 在html中建一个空的div，id是myChart，onclick事件是drawChart()，即可运行得到结果。

     

    实现节点可点击，重点在于三行代码，如下：

    1. var ecConfig = require('echarts/config');  
    2. myChart.on(ecConfig.EVENT.CLICK, eConsole);  
    3. clickable : true,  

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有