移动端实现双指手势缩放
配置项如下
var symbolSize = 20;
var data = [[15, 0]];
option = {
/*tooltip: {
triggerOn: 'none',
formatter: function (params) {
return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
}
},*/
roam: true,
grid: {
},
xAxis: {
min: -80,
max: 80,
type: 'value',
axisLine: {onZero: true,symbol:['none', 'arrow']},
axisTick: {show:false},
axisLabel: {show:false}
},
yAxis: {
min: -30,
max: 30,
type: 'value',
axisLine: {onZero: true,symbol:['none', 'arrow']},
axisTick: {show:false},
axisLabel: {show:false}
},
dataZoom: [
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'empty'
},
{
type: 'inside',
yAxisIndex: 0,
filterMode: 'empty'
}
],
series: [
{
id: 'a',
type: 'line',
smooth: true,
symbolSize: symbolSize,
data: data
}
]
};
if (!app.inNode) {
setTimeout(function () {
// Add shadow circles (which is not visible) to enable drag.
myChart.setOption({
graphic: echarts.util.map(data, function (item, dataIndex) {
return {
type: 'circle',
position: myChart.convertToPixel('grid', item),
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: true,
draggable: true,
ondrag: function(){
data[dataIndex] = myChart.convertFromPixel('grid', this.position);
// Update data
if(data[dataIndex][0]>=option.xAxis.max || data[dataIndex][0]<=option.xAxis.min || data[dataIndex][1]>=option.yAxis.max || data[dataIndex][1]<=option.yAxis.min) {
return false;
}
myChart.setOption({
series: [{
id: 'a',
data: data
}]
});
},
ondragend: function(){
data[dataIndex] = myChart.convertFromPixel('grid', this.position);
console.log(data[dataIndex])
},
z: 100
};
})
});
}, 0);
window.addEventListener('resize', updatePosition);
}
myChart.on('dataZoom', updatePosition);
function updatePosition() {
myChart.setOption({
graphic: echarts.util.map(data, function (item, dataIndex) {
return {
position: myChart.convertToPixel('grid', item)
};
})
});
}
function onPointDragging(dataIndex, dx, dy) {
data[dataIndex] = myChart.convertFromPixel('grid', this.position);
if(data[dataIndex][0]>=option.xAxis.max || data[dataIndex][0]<=option.xAxis.min || data[dataIndex][1]>=option.yAxis.max || data[dataIndex][1]<=option.yAxis.min) {
return false;
}
// Update data
myChart.setOption({
series: [{
id: 'a',
data: data
}]
});
};