Closed basilbai closed 2 years ago
我想使用拖拽功能,例如以下官方示例代码,请问在rn中如何实现
const symbolSize = 20;
const data = [
[40, -10],
[-30, -5],
[-76.5, 20],
[-63.5, 40],
[-22.1, 50]
];
option = {
title: {
text: 'Try Dragging these Points',
left: 'center'
},
tooltip: {
triggerOn: 'none',
formatter: function (params) {
return (
'X: ' +
params.data[0].toFixed(2) +
'<br>Y: ' +
params.data[1].toFixed(2)
);
}
},
grid: {
top: '8%',
bottom: '12%'
},
xAxis: {
min: -100,
max: 70,
type: 'value',
axisLine: { onZero: false }
},
yAxis: {
min: -30,
max: 60,
type: 'value',
axisLine: { onZero: false }
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'none'
},
{
type: 'slider',
yAxisIndex: 0,
filterMode: 'none'
},
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'none'
},
{
type: 'inside',
yAxisIndex: 0,
filterMode: 'none'
}
],
series: [
{
id: 'a',
type: 'line',
smooth: true,
symbolSize: symbolSize,
data: data
}
]
};
setTimeout(function () {
// Add shadow circles (which is not visible) to enable drag.
myChart.setOption({
graphic: data.map(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 (dx, dy) {
onPointDragging(dataIndex, [this.x, this.y]);
},
onmousemove: function () {
showTooltip(dataIndex);
},
onmouseout: function () {
hideTooltip(dataIndex);
},
z: 100
};
})
});
}, 0);
window.addEventListener('resize', updatePosition);
myChart.on('dataZoom', updatePosition);
function updatePosition() {
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
return {
position: myChart.convertToPixel('grid', item)
};
})
});
}
function showTooltip(dataIndex) {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
}
function hideTooltip(dataIndex) {
myChart.dispatchAction({
type: 'hideTip'
});
}
function onPointDragging(dataIndex, pos) {
data[dataIndex] = myChart.convertFromPixel('grid', pos);
// Update data
myChart.setOption({
series: [
{
id: 'a',
data: data
}
]
});
}
dispatchAction已支持:
参考:https://github.com/supervons/react-native-echarts-pro/pull/19
我需要使用例如echarts.util.curry这样的功能,请问在哪里引入echarts对象呢,万分感激!谢谢!