这是个x轴数据很多的图表,允许图表左右拖动拉出未显示的数据,本页面还有其他界面,允许页面下拉刷新,当页面频繁下拉上啦的时候报错ignored attempt to cancel a touchmove event with cancelable=false for example because scrolling is in progress and cannot be interrupted at echarts.min.js
配置项如下
var colors = ['#4C8CF5', '#DF6FAC', '#979797'];
option = {
color: colors,
dataZoom: [{
type: 'inside',
start: 0,
end: 20
}],
legend: {
textStyle: {
color: '#999999',
},
top: 0,
itemWidth: 0,
itemHeight: 0,
data: ['(mm)', '(℃)']
},
grid: {
width: '80%',
top: 10,
bottom: 32,
left: '13%',
borderColor: '#EEEEEE',
axisPointer: {
handle: {
show: true
}
}
},
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: true,
lineStyle: {
color: colors[2]
}
},
axisTick: {
length: 0,
},
boundaryGap: false,
data: []
}, {
show: false,
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
data: []
}],
yAxis: [{
type: 'value',
min: 100,
splitNumber: 10,
axisLine: {
onZero: true,
lineStyle: {
color: colors[2]
}
},
axisTick: {
length: 0,
},
silent: true,
splitLine: {
lineStyle: {
color: '#EEEEEE'
}
}
}, {
type: 'value',
min: 0,
splitNumber: 5,
axisLine: {
onZero: true,
lineStyle: {
color: colors[2]
}
},
axisTick: {
length: 0,
},
silent: true,
splitLine: {
lineStyle: {
color: '#EEEEEE'
}
}
}
],
series: [{
type: 'line',
yAxisIndex: 1,
smooth: true,
showSymbol: false,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 0.99,
colorStops: [{
offset: 0,
color: 'rgba(97,166,246,0.2)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(255,255,255,0.07)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
data: []
}, {
type: 'line',
yAxisIndex: 0,
smooth: true,
showSymbol: false,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 0.99,
colorStops: [{
offset: 0,
color: 'rgba(243,215,229,0.77)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(244,218,244,0.06)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
data: []
}]
};