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);
    }
}

在html中建一个空的div，id是myChart，onclick事件是drawChart()，即可运行得到结果。

 

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

 

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

 

重要的事情说三遍：<div id="myChart" class="myChart"></div>一定要设置宽和高、一定要设置宽和高、一定要设置宽和高！！！
刚刚因为忘记给myChart设置宽，导致图无法显示，找了一天才找到原因！！！