The graph cannot be zoomed in and out
gzoe-kanjiro opened this issue · comments
At first we can zoom in and out of the graph, but after a few seconds of operation, we will not be able to zoom in and out.
This happened even if I just added the data zoom option to the sample. The source code is described below.
List<Map<String, Object>> _data1 = [
{
'name': 'Jan',
'value': 8726.2453,
},
{
'name': 'Feb',
'value': 2445.2453,
},
{
'name': 'Mar',
'value': 6636.2400,
},
{
'name': 'Apr',
'value': 4774.2453,
},
{
'name': 'May',
'value': 1066.2453,
},
{
'name': 'Jun',
'value': 4576.9932,
},
{
'name': 'Jul',
'value': 8926.9823,
}
];
return Container(
child: Echarts(
option: '''
{
dataZoom: [{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: 400,
height: 10,
borderColor: 'transparent',
backgroundColor: '#E2E2E2',
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
handleSize: 20,
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: '#aaa'
},
labelFormatter: ''
}, {
type: 'inside',
filterMode: 'weakFilter'
}],
dataset: {
dimensions: ['name', 'value'],
source: ${jsonEncode(_data1)},
},
color: ['#3398DB'],
legend: {
data: ['直接访问', '背景'],
show: false,
},
grid: {
left: '0%',
right: '0%',
bottom: '5%',
top: '7%',
height: '85%',
containLabel: true,
z: 22,
},
xAxis: [{
type: 'category',
gridIndex: 0,
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#0C3B71',
},
},
axisLabel: {
show: true,
color: 'rgb(170,170,170)',
formatter: function xFormatter(value, index) {
if (index === 6) {
return \${value}\\n*;
}
return value;
},
},
}],
yAxis: {
type: 'value',
gridIndex: 0,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#0C3B71',
},
},
axisLabel: {
color: 'rgb(170,170,170)',
},
splitNumber: 12,
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
},
},
},
series: [{
name: '合格率',
type: 'bar',
barWidth: '50%',
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
barBorderRadius: 5,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: '#00FEFF',
},
{
offset: 1, color: '#027EFF',
},
{
offset: 1, color: '#0286FF',
},
],
},
},
},
zlevel: 11,
}],
}
''',
extraScript: '''
chart.on('click', (params) => {
if(params.componentType === 'series') {
Messager.postMessage(JSON.stringify({
type: 'select',
payload: params.dataIndex,
}));
}
});
''',
),
width: 500,
height: 140,
// color: Colors.black,
);
Has anyone else encountered the same issue?
- Did this occures in iOS 13, but works well in lower iOS ?
- Did you put the chart on/under any gesture ditector(ScrollView, Button, GestureDetector)
- Did this happened only after you touched the chart (or something near the chart)?
- This occurs on iOS 13 and we haven't seen it on lower iOS.
- I put the chart under a ScrollView. This happens even if the chart is not placed under a ScrollView.
- This only happens after I touch the chart.
I found out the detailed conditions of occurrence. This occurs when I do any of the following.
a) Zoom in on the chart too much.
b) Slide to the end of the chart.
c) Pinch out on the chart and slide my finger to the outside of the chart.
The Flutter Widget gesture recognizers and the web touch events are different systems.
The webview can't handle the two systems well when they affect or intereact with each other, like a dragging is crossing flutter and web, or some recognizers stack on/under the web.
So in these circumstances it may be unstable, try to reduce some interactions