hover饼图外部某个div,如何实现选中对应扇形echarts 饼配置项内容和展示

hover饼图外部某个div,如何实现选中对应扇形(选中的效果与hover扇形相同)。上图是我做出的选中效果,但是选中的扇形区域有白色的区域和hover扇形区域弹出的效果不同。请问怎么实现?

配置项如下
      var option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    /*legend: {
        orient : 'vertical',
        x : 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },*/
    series: [{
        name: '访问来源',
        type: 'pie',
        seriesId: "0",
        radius: '70%',
        center: ['50%', '60%'],
        data: [{
            value: 335,
            name: '直接访问'
        }, {
            value: 310,
            name: '邮件营销'
        }, {
            value: 234,
            name: '联盟广告'
        }, {
            value: 135,
            name: '视频广告'
        }, {
            value: 1548,
            name: '搜索引擎'
        }].sort(function(a, b) {
            return a.value - b.value
        }),

        itemStyle: {
            emphasis: {
                shadowBlur: 10, //阴影大小
                shadowOffsetX: 0, //阴影水平方向上的偏移
                shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色
            }
        }
    }],
    color: ['red', 'blue', 'yellow', 'green', 'black']
};

$("p.direct").mouseover(function() {
    myChart.dispatchAction({
        type: 'pieSelect',
        name: '直接访问', // 数据名称

    })


});
    
截图如下