Skip to main content

Method

Method nameParamsDescription
setNewOptionoption(require), optionSetting?重新设置图表 option.
getInstancefunctionName, params?获取图表 instance.
dispatchActioncallbackData?图表事件监听.

setNewOption

option

图表核心配置项。

<RNEChartsPro ref={(echarts) => (this.echarts = echarts)} option={this.state.options}/>

// use, no optionSetting
this.echarts.setNewOption({...})

optionSetting

默认是会合并每次更新的数据,如果不想合并可以参考:

<RNEChartsPro ref={(echarts) => (this.echarts = echarts)} option={this.state.options}/>

this.echarts.setNewOption({...}, {
notMerge?: boolean,
replaceMerge?: string | string[],
lazyUpdate?: boolean,
})

参考更多 => setOption

getInstance

获取图表实例 instance,以便做更多的操作.

usage

function resizeHeight() {
echartsRef.current.getInstance('getHeight').then(res=>{
console.log(res) // 200
})
}
return (
<View style={{ height: 300, paddingTop: 25 }}>
<RNEChartsPro ref={echartsRef} height={200} option={pieOption} />
<Button title={'Resize'} onPress={resizeHeight}/>
</View>
);

getWidth

promise

获取图表实例宽度:

echartsRef.current.getInstance('getWeight').then(res=>{
console.log(res)
})

getHeight

promise

获取图表实例高度:

echartsRef.current.getInstance('getHeight').then(res=>{
console.log(res)
})

getOption

promise

获取图表 option 配置项:

echartsRef.current.getInstance('getOption').then(res=>{
console.log(res)
})

resize

void

重新设置图表高度、宽度等属性:

echartsRef.current.getInstance('resize', {height: 300, ...other})

dispatchAction

void

Triggers chart action, like chart switch legendToggleSelect,zoom data area dataZoom, show tooltip showTip and so on. See action and events for more information.

echartsRef.current.getInstance('dispatchAction', {
type: "showTip",
seriesIndex: 0,
dataIndex: 0,
})

查看更多 => EChartsInstance

dispatchAction

功能同: getInstance.

echartsRef.current.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: 0,
})

datazoom 示例:

import React, { useRef } from "react";
import { Text, View } from "react-native";
import ECharts from "react-native-echarts-pro";
export default function StockInDetail() {
const echartsRef = new useRef(null);
function highlight() {
echartsRef.current.dispatchAction({
// This line
batch: [
{
animation: {},
batch: null,
end: 80,
start: 30,
type: "datazoom",
},
],
type: "dataZoom",
});
}
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<ECharts
ref={echartsRef}
option={{
xAxis: {
type: "category",
boundaryGap: false,
inverse: true,
data: [
"2022/9/30",
"2022/9/29",
"2022/9/28",
"2022/9/27",
"2022/9/26",
"2022/9/25",
"2022/9/24",
"2022/9/23",
"2022/9/22",
"2022/9/21",
],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
type: "value",
position: "right",
offset: 4,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#ccc",
},
},
min: 0,
max: 150,
boundaryGap: [0, "100%"],
},
animation: false,
dataZoom: [
{
type: "inside",
minValueSpan: 5,
start: 0,
throttle: 0,
end: 10,
},
{
start: 0,
end: 10,
},
],
series: [
{
name: "Fake Data",
type: "line",
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "rgb(255, 70, 131)",
},
data: [50, 70, 80, 90, 30, 40, 56, 67, 78, 87],
},
],
}}
height={300}
eventActions={{
dataZoom: params => {
console.log(params);
},
}}
/>
<Text onPress={highlight}>Click action</Text>
</View>
);
}