Closed yinyanli closed 1 year ago
More information is needed
版本: react-native: 0.62.2 react-native-svg: 12.1.0 echarts: 5.4.2 @wuba/react-native-echarts: 1.2.0 问题:没有收到showTip事件 问题代码:
import React, { useRef, useEffect, useMemo, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
import {
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
MarkLineComponent,
LegendComponent,
MarkPointComponent,
} from 'echarts/components';
echarts.use([
BarChart,
LabelLayout,
UniversalTransition,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
MarkLineComponent,
LegendComponent,
MarkPointComponent,
SVGRenderer,
]);
export default (props) => {
const echartsInstance = useRef(null);
const [dataIndex, setDataIndex] = useState(0);
const chartRef = useRef(null);
const option = useMemo(() => {
return {
tooltip: {
trigger: 'axis',
showDelay: 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(247, 54, 93, 0.04)',
width: '1',
},
},
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
formatter: function (params) {
return '';
},
},
grid: {
top: 30,
left: 10,
right: 10,
bottom: 20,
containLabel: true,
},
xAxis: {
type: 'category',
data: props.series.map((item) => item.name),
axisTick: {
show: false,
},
axisLabel: {
color: 'rgba(0,0,0,0.5)',
fontSize: 10,
fontWeight: 400,
formatter(value: string) {
return value?.replace?.('岁', '');
},
interval: 0,
},
axisLine: {
lineStyle: {
color: '#EAEAEA',
width: 0.5,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
color: 'rgba(0,0,0,0.5)',
fontSize: 10,
fontWeight: 400,
formatter(value: number) {
return `${value.toFixed(1).replace('.0', '')}%`;
},
},
splitLine: {
lineStyle: {
color: '#EAEAEA',
width: 0.5,
},
},
},
series: [
{
type: 'bar',
barWidth: 12,
data: props.series,
itemStyle: {
normal: {
color: '#F7365D',
barBorderRadius: [6, 6, 0, 0],
},
},
markPoint: {
data: [
{
coord: [dataIndex, props.series[dataIndex].value],
value: props.series[dataIndex].value + '%',
symbolSize: 0,
itemStyle: {
color: 'red',
},
label: {
color: 'rgba(247, 54, 93, 1)',
position: 'outside',
show: true,
fontSize: 13,
fontFamily: 'DIN Alternate',
},
},
],
symbol: 'circle',
},
},
],
};
}, [props.series, dataIndex]);
function initChart() {
echartsInstance.current = echarts.init(chartRef.current, 'light', {
renderer: 'svg',
width: 300,
height: props.chartHeight,
});
setTimeout(() => {
echartsInstance.current.dispatchAction({
type: 'showTip',
seriesIndex: 0, // 针对series下第几个数据
dataIndex: 0, // 第几个数据
});
}, 10);
}
function paintChart(notMerge = false, lazyUpdate = true): void {
console.log('paintChart', option);
echartsInstance.current?.setOption(option, notMerge, lazyUpdate);
}
useEffect(() => {
paintChart();
}, [props.series, dataIndex]);
useEffect(() => {
initChart();
paintChart();
echartsInstance.current?.on('showTip', (params) => {
setDataIndex(params.dataIndex);
});
}, []);
return <SvgChart ref={chartRef} />;
};
尝试复现,目前安卓和ios都能触发showtip,请问这个效果不符合预期吗?
@iambool 你的看起来符合预期的,但是在我的设备上,安卓点击没反应,ios正常,能分享下你的demo吗
@iambool 你的看起来符合预期的,但是在我的设备上,安卓点击没反应,ios正常,能分享下你的demo吗
我就是用你的demo做的实验,只是加了些打印信息
import React, { useRef, useEffect, useMemo, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
import {
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
MarkLineComponent,
LegendComponent,
MarkPointComponent,
} from 'echarts/components';
import { showToast } from '@tarojs/taro';
echarts.use([
BarChart,
LabelLayout,
UniversalTransition,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
MarkLineComponent,
LegendComponent,
MarkPointComponent,
SVGRenderer,
]);
const MyChart = (props) => {
const echartsInstance = useRef(null);
const [dataIndex, setDataIndex] = useState(2);
const chartRef = useRef(null);
const option = useMemo(() => {
return {
tooltip: {
trigger: 'axis',
showDelay: 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(247, 54, 93, 0.04)',
width: '1',
},
},
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
formatter: function (params) {
return '';
},
},
grid: {
top: 30,
left: 10,
right: 10,
bottom: 20,
containLabel: true,
},
xAxis: {
type: 'category',
data: props.series.map((item) => item.name),
axisTick: {
show: false,
},
axisLabel: {
color: 'rgba(0,0,0,0.5)',
fontSize: 10,
fontWeight: 400,
formatter(value: string) {
return value?.replace?.('岁', '');
},
interval: 0,
},
axisLine: {
lineStyle: {
color: '#EAEAEA',
width: 0.5,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
color: 'rgba(0,0,0,0.5)',
fontSize: 10,
fontWeight: 400,
formatter(value: number) {
return `${value.toFixed(1).replace('.0', '')}%`;
},
},
splitLine: {
lineStyle: {
color: '#EAEAEA',
width: 0.5,
},
},
},
series: [
{
type: 'bar',
barWidth: 12,
data: props.series,
itemStyle: {
normal: {
color: '#F7365D',
borderRadius: [6, 6, 0, 0],
},
},
markPoint: {
data: [
{
coord: [dataIndex, props.series[dataIndex].value],
value: props.series[dataIndex].value + '%',
symbolSize: 0,
itemStyle: {
color: 'green',
},
label: {
color: 'rgba(247, 54, 93, 1)',
position: 'outside',
show: true,
fontSize: 13,
fontFamily: 'DIN Alternate',
},
},
],
symbol: 'circle',
},
},
],
};
}, [props.series, dataIndex]);
function initChart() {
echartsInstance.current = echarts.init(chartRef.current, 'light', {
renderer: 'svg',
width: 300,
height: props.chartHeight,
});
setTimeout(() => {
echartsInstance.current.dispatchAction({
type: 'showTip',
seriesIndex: 0, // 针对series下第几个数据
dataIndex: 0, // 第几个数据
});
}, 10);
}
function paintChart(notMerge = false, lazyUpdate = true): void {
console.log('paintChart', option);
echartsInstance.current?.setOption(option, notMerge, lazyUpdate);
}
useEffect(() => {
paintChart();
}, [props.series, dataIndex]);
useEffect(() => {
initChart();
paintChart();
echartsInstance.current?.on('showTip', (params) => {
console.log('打印', params);
console.log('触发========');
showToast({
title: '触发showTip',
});
setDataIndex(params.dataIndex);
});
}, []);
return <SvgChart ref={chartRef} />;
};
export default () => {
const data = {
series: [
{
name: '衣服',
value: 20,
},
{
name: '裤子',
value: 30,
},
{
name: '帽子',
value: 15,
},
],
chartHeight: 300,
};
return <MyChart {...data} />;
};
我复现时的环境: 华为鸿蒙OS2.0 react-native 0.71.6 react-native-svg 13.9.0
其余依赖跟你在上方贴的一致
Android cannot respond to click events