[Bug] 移动端（Android&iOS）点击柱状图高亮阴影emphasis聚焦错误

arlovip commented 1 year ago

Version

5.4.2

Link to Minimal Reproduction

https://gist.github.com/lchenfox/46d18eea1d0e1c56520da537ecc391f8

Steps to Reproduce

import RNEChartsPro from "react-native-echarts-pro";

    render() { 

        const option = {
            tooltip: {
                trigger: 'axis',
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: [
                {
                    type: 'category',
                    data: ["2023-09-09", "2023-09-10", "2023-09-11", "2023-09-12", "2023-09-13", "2023-09-14", "2023-09-15"],
                },
            ],
            yAxis: [
                {
                    type: 'value',
                },
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    itemStyle: {
                        emphasis: {
                            barBorderWidth: 2,
                            shadowBlur: 2,
                            shadowColor: 'red',
                        },
                    },
                    data: ["--", "--", "--", "4637412.56", "--", "4755.73", "2804.98"],
                },
                {
                    name: 'Email',
                    type: 'bar',
                    stack: 'Ad',
                    itemStyle: {
                        emphasis: {
                            barBorderWidth: 2,
                            shadowBlur: 2,
                            shadowColor: 'red',
                        },
                    },
                    data: ["--", "--", "--", "-33541.57", "--", "317.68", "316.86"],
                },
            ],
        };
        return <RNEChartsPro 
            option={option}
            width={SCREEN_WIDTH}
            height={SCREEN_HEIGHT}
            backgroundColor={'#ffffff'} 
        />;
    };

如图：

点击后，tooltip显示的是对应2023-09-11的数据，但是2023-09-12柱状图高亮了。

Current Behavior

点击柱状图，高亮阴影聚焦错误，出现在未点击的柱状图数据上。

Expected Behavior

点击相应的柱状图，高亮阴影应该聚焦在当前点击的柱状图上面。

Environment

- OS:  macOS 12.5
- Browser: No（Android&iOS）
- Framework: React Native 0.72.0

Any additional comments?

No response

echarts-bot[bot] commented 1 year ago

@lchenfox It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** [Bug] Mobile (Android & iOS) click on the histogram highlight shadow emphasis focus error

echarts-bot[bot] commented 1 year ago

@lchenfox Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.

ywAlexyw commented 3 weeks ago

I also encountered the same problem [Bug] Mobile (Android & iOS) click on the histogram highlight shadow emphasis focus error

ywAlexyw commented 2 weeks ago

The issue can only be reproduced within an H5 environment.

ywAlexyw commented 2 weeks ago

import * as echarts from 'echarts';

var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option;

option = { grid: { left: 0, right: '5%', bottom: '5%', top: '10%', containLabel: true }, tooltip: { trigger: 'axis', showContent: false, axisPointer: { type: 'line', lineStyle: { type: 'solid', color: '#040415' } } }, legend: { show: false }, xAxis: { type: 'category', axisTick: { show: false }, axisLine: { show: false, lineStyle: { color: '#8A8E99' } }, data: [ '00:00', '00:10', '00:20', '00:30', '00:40', '00:50', '01:00', '01:10', '01:20', '01:30', '01:40', '01:50', '02:00', '02:10', '02:20', '02:30', '02:40', '02:50', '03:00', '03:10', '03:20', '03:30', '03:40', '03:50', '04:00', '04:10', '04:20', '04:30', '04:40', '04:50', '05:00', '05:10', '05:20', '05:30', '05:40', '05:50', '06:00', '06:10', '06:20', '06:30', '06:40', '06:50', '07:00', '07:10', '07:20', '07:30', '07:40', '07:50', '08:00', '08:10', '08:20', '08:30', '08:40', '08:50', '09:00', '09:10', '09:20', '09:30', '09:40', '09:50', '10:00', '10:10', '10:20', '10:30', '10:40', '10:50', '11:00', '11:10', '11:20', '11:30', '11:40', '11:50', '12:00', '12:10', '12:20', '12:30', '12:40', '12:50', '13:00', '13:10', '13:20', '13:30', '13:40', '13:50', '14:00', '14:10', '14:20', '14:30', '14:40', '14:50', '15:00', '15:10', '15:20', '15:30', '15:40', '15:50', '16:00', '16:10', '16:20', '16:30', '16:40', '16:50', '17:00', '17:10', '17:20', '17:30', '17:40', '17:50', '18:00', '18:10', '18:20', '18:30', '18:40', '18:50', '19:00', '19:10', '19:20', '19:30', '19:40', '19:50', '20:00', '20:10', '20:20', '20:30', '20:40', '20:50', '21:00', '21:10', '21:20', '21:30', '21:40', '21:50', '22:00', '22:10', '22:20', '22:30', '22:40', '22:50', '23:00', '23:10', '23:20', '23:30', '23:40', '23:50' ] }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#CBD0DE' } }, axisLine: { show: false, lineStyle: { color: '#8A8E99' } }, axisTick: { show: false }, interval: null, min: 80, max: 100 }, dataZoom: [ { type: 'inside', start: 0, end: 100, minSpan: 20, filterMode: 'none' } ], series: [ { data: [ { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, silent: true, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, silent: true, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 95, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 95, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 90, itemStyle: { color: '#F7B500', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 97, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 82, itemStyle: { color: '#FA6400', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: 98, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 99, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: 96, itemStyle: { color: '#4DBE85', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } }, { value: null, itemStyle: { color: '#E02020', opacity: 0.5 } } ], type: 'bar', emphasis: { itemStyle: { opacity: 1 } } } ] };

option && myChart.setOption(option);

ywAlexyw commented 2 weeks ago

Please use an H5 environment to view.

ywAlexyw commented 2 weeks ago

apache / echarts