zoukankan      html  css  js  c++  java
  • echart字符云之添加点击事件

    // 路径配置
    require.config({
        paths : {
            echarts : 'jquery/echarts-2.2.7/build/dist'
        }
    });
    // 使用EChart.js画图
    function drawChart() {
        require([ 'echarts', 'echarts/chart/force' // 使用柱状图就加载bar模块,按需加载
        ], function(ec) {
            // 基于准备好的dom,初始化echarts图表
            var myChart = ec.init(document.getElementById('myChart'));
            // 添加点击事件
            var ecConfig = require('echarts/config');
            myChart.on(ecConfig.EVENT.CLICK, eConsole);  
            var option = {
                tooltip : {
                    show : false,
                    trigger : 'item',
                    formatter : '{a} : {b}'
                },
                toolbox : {
                    show : true,
                    feature : {
                        restore : {
                            show : true
                        },
                    }
                },
                series : [ {
                    type : 'force',
                    name : "关系",
                    ribbonType : false,
                    clickable : true,
                    draggable : false,
                    categories : [ {
                        name : '属性'
                    }, {
                        name : '实例'
                    } ],
                    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 : 1.1,
                    roam : false,
                    nodes : [ {
                        category : 1,
                        name : '实例',
                        value : 10,
                        label : '宝马',
                    }, {
                        category : 0,
                        name : '属性1',
                        value : 6,
                        label : '宝马X1'
                    }, {
                        category : 0,
                        name : '属性2',
                        value : 6,
                        label : '宝马X5'
                    }, {
                        category : 0,
                        name : '属性3',
                        value : 6,
                        label : '宝马3系'
                    }, {
                        category : 0,
                        name : '属性4',
                        value : 6,
                        label : '宝马7系'
                    }, {
                        category : 0,
                        name : '属性5',
                        value : 6,
                        label : '宝马X6'
                    }, {
                        category : 0,
                        name : '属性6',
                        value : 6,
                        label : '宝马1系'
                    }, {
                        category : 0,
                        name : '属性7',
                        value : 6,
                        label : '宝马i8'
                    } ],
                    links : [ {
                        source : '属性1',
                        target : '实例',
                        weight : 1,
                        name : '属性1'
                    }, {
                        source : '属性2',
                        target : '实例',
                        weight : 1,
                        name : '属性2'
                    }, {
                        source : '属性3',
                        target : '实例',
                        weight : 1,
                        name : '属性3'
                    }, {
                        source : '属性4',
                        target : '实例',
                        weight : 1,
                        name : '属性4'
                    }, {
                        source : '属性5',
                        target : '实例',
                        weight : 1,
                        name : '属性5'
                    }, {
                        source : '属性6',
                        target : '实例',
                        weight : 1,
                        name : '属性6'
                    }, {
                        source : '属性7',
                        target : '实例',
                        weight : 1,
                        name : '属性7'
                    }, ]
                } ]
            };
    
            // 为echarts对象加载数据
            myChart.setOption(option);
            
        });
    }
    
    function eConsole(param) {  
        if (typeof param.seriesIndex == 'undefined') {  
            return;  
        }  
        if (param.type == 'click') {  
            alert(param.name);  
        }  
    }  

    实现节点可点击,重点在于三行代码,如下:

    var ecConfig = require('echarts/config');
    myChart.on(ecConfig.EVENT.CLICK, eConsole);
    clickable : true,
  • 相关阅读:
    浅析项目失败的原因
    软件项目失败的五大原因
    敏捷软件开发最佳实践之Scrum站立会议
    精益原则之延迟决策
    三条常见的质量管理策略
    固定报价项目中,如何进行客户期望管理
    关于软件需求必须知道的事情
    PMP备考感触和经验
    软件开发过程中的7大浪费(译)
    精益软件开发七原则之我见
  • 原文地址:https://www.cnblogs.com/dfghjkl/p/5284730.html
Copyright © 2011-2022 走看看