echarts 点击图表获取 graphic的数据

在 ECharts 中，可以通过 `zr.on()` 方法给 `zrender` 实例添加事件监听器，从而获取到鼠标点击事件的信息。可以在 `zr.on()` 方法中监听 `click` 事件，当用户点击图表时会触发该事件。在事件回调函数中，可以通过 `event.target` 属性获取被点击的图形元素，进而获取该图形元素所对应的 `graphic` 数据。

以下是一个示例代码，演示了如何在 ECharts 中获取 graphic 的数据：

// 获取 zrender 实例
let zr = myChart.getZr();

// 监听 click 事件
zr.on('click', function (event) {
  // 获取被点击的图形元素
  let target = event.target;

  // 判断被点击的元素是否是 graphic
  if (target.type === 'graphic') {
    // 获取该图形元素所对应的 graphic 数据
    let graphic = target.__ecGraphic;

    // 在控制台输出 graphic 数据
    console.log(graphic);
  }
});

需要注意的是，如果图表中存在多个 `graphic` 元素，那么在事件回调函数中需要对被点击的元素进行类型判断，以确定该元素是否是 `graphic` 元素。另外，`graphic` 数据的具体结构和属性取值，需要根据实际情况进行处理。

相关问题

echarts图表添加定时器为饼图1s切换一个hover突出的效果

可以使用echarts提供的setInterval函数来实现定时器效果，然后在每个定时器的回调函数中修改饼图的hover效果。

以下是一个示例代码：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));

// 饼图数据
var data = [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 234, name: '联盟广告'},
    {value: 135, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
];

// 饼图配置项
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: data
        }
    ]
};

// 加载饼图
myChart.setOption(option);

// 定时器回调函数
function timerCallback() {
    // 获取当前选中饼图的索引
    var currentIndex = myChart.getOption().graphic[0].elements[0].children.findIndex(function (item) {
        return item.type === 'sector' && item.style.fill !== 'transparent';
    });
    // 取消当前饼图的hover效果
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    // 计算下一个饼图的索引
    var nextIndex = (currentIndex + 1) % data.length;
    // 设置下一个饼图的hover效果
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: nextIndex
    });
}

// 设置定时器，每秒钟切换一个饼图的hover效果
setInterval(timerCallback, 1000);

在上述代码中，我们首先使用echarts.init函数初始化了一个饼图实例，并定义了饼图的样式和数据。然后通过echarts.dispatchAction函数在定时器回调函数中修改饼图的hover效果。在timerCallback函数中，我们首先使用echarts.getOption函数获取当前选中饼图的索引，然后使用echarts.dispatchAction函数将该饼图的hover效果取消。接着计算下一个饼图的索引，并使用echarts.dispatchAction函数将该饼图的hover效果设置为高亮状态。最后，我们使用setInterval函数设置定时器，每秒钟执行一次timerCallback函数，实现饼图的定时切换hover效果。

echarts柱状图点击色块收缩功能

要实现echarts柱状图点击色块收缩功能，可以使用echarts的事件处理函数。具体步骤如下：

1.在echarts的option中设置series的itemStyle，使其具有点击事件。例如：

series: [{
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    itemStyle: {
        normal: {
            color: function(params) {
                // 设置渐变色
                var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FFB64D'
                    }, {
                        offset: 1,
                        color: '#FFCB9F'
                    }]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FF7C7C'
                    }, {
                        offset: 1,
                        color: '#FFB6B6'
                    }])
                ];
                return colorList[params.dataIndex % colorList.length];
            }
        }
    }
}]

2.在echarts的option中设置series的emphasis，使其具有点击后的效果。例如：

emphasis: {
    itemStyle: {
        color: function(params) {
            // 设置点击后的颜色
            var colorList = [
                '#FFB64D', '#FF7C7C', '#A0D468', '#37BC9B', '#1E9FFF', '#FF6666'
            ];
            return colorList[params.dataIndex % colorList.length];
        }
    }
}

3.在echarts的option中设置series的event，使其具有点击事件的处理函数。例如：

event: {
    'click': function(params) {
        // 获取当前点击的数据
        var data = params.data;
        // 判断当前数据是否已经展开
        if (data.expand) {
            // 如果已经展开，则将其收缩
            data.expand = false;
            // 获取当前数据的索引
            var index = params.dataIndex;
            // 获取当前图表实例
            var chart = params.event.getChart();
            // 获取当前系列的所有数据
            var seriesData = chart.getOption().series[params.seriesIndex].data;
            // 将当前数据的值设置为0
            seriesData[index] = 0;
            // 更新图表
            chart.setOption({
                series: [{
                    data: seriesData
                }]
            });
        } else {
            // 如果未展开，则将其展开
            data.expand = true;
            // 获取当前数据的索引
            var index = params.dataIndex;
            // 获取当前图表实例
            var chart = params.event.getChart();
            // 获取当前系列的所有数据
            var seriesData = chart.getOption().series[params.seriesIndex].data;
            // 将当前数据的值设置为原始值
            seriesData[index] = data.value;
            // 更新图表
            chart.setOption({
                series: [{
                    data: seriesData
                }]
            });
        }
    }
}

以上就是实现echarts柱状图点击色块收缩功能的步骤。需要注意的是，以上代码仅为示例，具体实现需要根据实际情况进行调整。