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,