ECharts鼠标事件处理与Sunburst旭日图高级配置指南

事件处理

在ECharts中，开发者可以通过监听用户的交互操作来触发相应的回调函数。

ECharts提供了on方法用于监听用户行为，例如监控用户的点击动作。

ECharts中的事件主要分为两类：

第一类是用户的鼠标操作事件，包括'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'以及'contextmenu'等事件。

第二类是用户与可交互组件互动后触发的事件，例如切换图例开关时触发的'legendselectchanged'事件，或在数据区域缩放时触发的'datazoom'事件等。

myChart.on('click', function (params) {
    // 在用户点击后控制台打印数据的名称
    console.log(params);
});

myChart.on('legendselectchanged', function (params) {
    console.log(params);
});

chart.on('click', 'series.line', function (params) {
    console.log(params);
});

chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
    console.log(params);
});

一、鼠标事件

ECharts支持的鼠标事件类型包括'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'和'contextmenu'。

以下示例展示了在点击柱形图时弹出对话框的效果：

// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且弹出数据名称
myChart.on('click', function (params) {
    alert(params.name);
});

1、所有鼠标事件均包含params参数，该参数是一个包含点击图形数据信息的对象，其格式如下：

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

2、如何判断鼠标点击的具体位置：

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }
});

3、使用query参数仅对指定组件的图形元素触发回调：

chart.on(eventName, query, handler);

query参数可以是字符串或对象类型。

（1）若为字符串，表示组件类型，格式可为'mainType'或'mainType.subType'。例如：

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});

（2）若为对象，可包含以下一个或多个可选属性：

{
    <mainType>Index: number // 组件 index
    <mainType>Name: string // 组件 name
    <mainType>Id: string // 组件 id
    dataIndex: number // 数据项 index
    name: string // 数据项 name
    dataType: string // 数据项 type，如关系图中的 'node', 'edge'
    element: string // 自定义系列中的 el 的 name
}

例如：

chart.setOption({
    // ...
    series: [{
        name: 'uuu'
        // ...
    }]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
    // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
});

例如：

chart.setOption({
    // ...
    series: [{
        // ...
    }, {
        // ...
        data: [
            {name: 'xx', value: 121},
            {name: 'yy', value: 33}
        ]
    }]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
    // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。
});

例如：

chart.setOption({
    // ...
    series: [{
        type: 'graph',
        nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
        edges: [{source: 0, target: 1}]
    }]
});
chart.on('click', {dataType: 'node'}, function () {
    // 关系图的节点被点击时此方法被回调。
});
chart.on('click', {dataType: 'edge'}, function () {
    // 关系图的边被点击时此方法被回调。
});

例如：

chart.setOption({
    // ...
    series: {
        // ...
        type: 'custom',
        renderItem: function (params, api) {
            return {
                type: 'group',
                children: [{
                    type: 'circle',
                    name: 'my_el',
                    // ...
                }, {
                    // ...
                }]
            }
        },
        data: [[12, 33]]
    }
})
chart.on('mouseup', {element: 'my_el'}, function () {
    // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。
});

4、在回调函数中，你可以获取该对象中的数据名和系列名称，进而通过自己的数据仓库索引获取其他信息，随后更新图表或显示浮层等，如下示例代码：

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通过饼图表现单个柱子中的数据分布
                data: [detail.data]
            }]
        });
    });
});

二、组件交互的行为事件

在ECharts中，几乎所有组件的交互行为都会触发相应事件，常用事件及其对应参数可在events文档中查阅。

以下是监听图例开关的示例：

// 图例开关的行为只会触发 legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 获取点击图例的选中状态
    var isSelected = params.selected[params.name];
    // 在控制台中打印
    console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
    // 打印所有图例的状态
    console.log(params.selected);
});

事件处理

三、代码触发ECharts中组件的行为

上述内容仅涉及用户交互操作，但有时我们需要在程序中调用方法并触发图表行为，例如显示tooltip。

ECharts通过dispatchAction({ type: '' })来触发图表行为，统一管理所有动作，也可根据需求记录用户的行为路径。

以上实例用于轮播饼图中的tooltip：

setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    app.currentIndex = (app.currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
}, 1000);

旭日图

旭日图（Sunburst）由多层环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部与整体的占比，又能像矩形树图一样表现层级关系。

ECharts创建旭日图非常简单，只需在series配置项中声明类型为sunburst即可，data数据结构以树形结构声明，看下一个简单实例：

var option = {
    series: {
        type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa'
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }]
        }, {
            name: 'C',
            value: 3
        }]
    }
};

一、颜色等样式调整

默认情况下，会使用全局调色盘color分配最内层的颜色，其余层则与其父元素同色。

在旭日图中，扇形块的颜色有以下三种设置方式：

在series.data.itemStyle中设置每个扇形块的样式。
在series.levels.itemStyle中设置每一层的样式。
在series.itemStyle中设置整个旭日图的样式。

上述三者的优先级从高到低，即配置了series.data.itemStyle的扇形块将覆盖series.levels.itemStyle和series.itemStyle的设置。

下面，我们将整体颜色设为灰色#aaa，将最内层的颜色设为蓝色blue，将Aa、B这两块设为红色red。

var option = {
    series: {
        type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa',
                itemStyle: {
                    color: 'red'
                }
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }],
            itemStyle: {
                color: 'red'
            }
        }, {
            name: 'C',
            value: 3
        }],
        itemStyle: {
            color: '#aaa'
        },
        levels: [{
            // 留给数据下钻的节点属性
        }, {
            itemStyle: {
                color: 'blue'
            }
        }]
    }
};

按层配置样式是一个常用功能，能显著提高配置效率。

二、数据下钻

旭日图默认支持数据下钻，即当点击扇形块后，将以该扇形块的数据作为根节点，进一步显示该数据的细节。

在数据下钻后，图形中间会出现一个用于返回上一层的图形，该图形的样式可通过levels[0]配置。

var data = [{
    name: 'Grandpa',
    children: [{
        name: 'Uncle Leo',
        value: 15,
        children: [{
            name: 'Cousin Jack',
            value: 2
        }, {
            name: 'Cousin Mary',
            value: 5,
            children: [{
                name: 'Jackson',
                value: 2
            }]
        }, {
            name: 'Cousin Ben',
            value: 4
        }]
    }, {
        name: 'Father',
        value: 10,
        children: [{
            name: 'Me',
            value: 5
        }, {
            name: 'Brother Peter',
            value: 1
        }]
    }]
}, {
    name: 'Nancy',
    children: [{
        name: 'Uncle Nike',
        children: [{
            name: 'Cousin Betty',
            value: 1
        }, {
            name: 'Cousin Jenny',
            value: 2
        }]
    }]
}];

option = {
    series: {
        type: 'sunburst',
        // highlightPolicy: 'ancestor',
        data: data,
        radius: [0, '90%'],
        label: {
            rotate: 'radial'
        }
    }
};

如果不需要数据下钻功能，可通过将nodeClick设置为false来关闭，也可设为'link'，并将data.link设为点击扇形块对应打开的链接。

三、高亮相关扇形块

旭日图支持鼠标移动到某扇形块时高亮相关数据块的操作，可通过设置highlightPolicy实现，包括以下几种高亮方式：

'descendant'（默认值）：高亮鼠标移动所在扇形块与其后代元素；
'ancestor'：高亮鼠标所在扇形块与其祖先元素；
'self'：仅高亮鼠标所在扇形块；
'none'：不会淡化（downplay）其他元素。

上述提到的“高亮”，对于鼠标所在的扇形块，会使用emphasis样式；对于其他相关扇形块，则会使用highlight样式。通过这种方式，可以方便地实现突出显示相关数据的需求。

具体来说，对于配置项：

itemStyle: {
    color: 'yellow',
    borderWidth: 2,
    emphasis: {
        color: 'red'
    },
    highlight: {
        color: 'orange'
    },
    downplay: {
        color: '#ccc'
    }
}

highlightPolicy为'descendant':

option = {
    silent: true,
    series: {
        radius: ['15%', '95%'],
        center: ['50%', '60%'],
        type: 'sunburst',
        sort: null,
        highlightPolicy: 'descendant',
        data: [{
            value: 10,
            children: [{
                name: 'target',
                value: 4,
                children: [{
                    value: 2,
                    children: [{
                        value: 1
                    }]
                }, {
                    value: 1
                }, {
                    value: 0.5
                }]
            }, {
                value: 2
            }]
        }, {
            value: 4,
            children: [{
                children: [{
                    value: 2
                }]
            }]
        }],
        label: {
            normal: {
                rotate: 'none',
                color: '#fff'
            }
        },
        levels: [],
        itemStyle: {
            color: 'yellow',
            borderWidth: 2
        },
        emphasis: {
            itemStyle: {
                color: 'red'
            }
        },
        highlight: {
            itemStyle: {
                color: 'orange'
            }
        },
        downplay: {
            itemStyle: {
                color: '#ccc'
            }
        }
    }
};

setTimeout(function () {
    myChart.dispatchAction({
        type: 'sunburstHighlight',
        targetNodeId: 'target'
    });
});

highlightPolicy为'ancestor' :

option = {
    silent: true,
    series: {
        radius: ['15%', '95%'],
        center: ['50%', '60%'],
        type: 'sunburst',
        sort: null,
        highlightPolicy: 'ancestor',
        data: [{
            value: 10,
            children: [{
                value: 4,
                children: [{
                    value: 2,
                    children: [{
                        name: 'target',
                        value: 1
                    }]
                }, {
                    value: 1
                }, {
                    value: 0.5
                }]
            }, {
                value: 2
            }]
        }, {
            value: 4,
            children: [{
                children: [{
                    value: 2
                }]
            }]
        }],
        label: {
            normal: {
                rotate: 'none',
                color: '#fff'
            }
        },
        levels: [],
        itemStyle: {
            color: 'yellow',
            borderWidth: 2
        },
        emphasis: {
            itemStyle: {
                color: 'red'
            }
        },
        highlight: {
            itemStyle: {
                color: 'orange'
            }
        },
        downplay: {
            itemStyle: {
                color: '#ccc'
            }
        }
    }
};

setTimeout(function () {
    myChart.dispatchAction({
        type: 'sunburstHighlight',
        targetNodeId: 'target'
    });
});

到此这篇关于ECharts事件处理与实现旭日图的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持本站。

ECharts事件监听与旭日图配置详解

事件处理

一、鼠标事件

二、组件交互的行为事件

三、代码触发ECharts中组件的行为

旭日图

一、颜色等样式调整

二、数据下钻

三、高亮相关扇形块

实用工具推荐