Closed HelloAnnis closed 1 year ago
可以参考下 md
文档中代码的写法:MD代码粘贴
此外,你可以试下下面的代码,点击 Update
是可以触发的:
import React, { useRef } from "react";
import { View, Button } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";
export default function ChartsComponent() {
const echartsRef = new useRef(null);
const pieOption = {
tooltip: {
show: true,
backgroundColor: "rgba(255,255,255,0.8)",
borderColor: "#668BEE",
alwaysShowContent: true,
borderWidth: 1,
padding: [5, 10],
textStyle: {
color: "#24283C",
fontSize: 12,
},
trigger: "item",
formatter: function (a) {
return (
'<i style="display: inline-block;width: 10px;height: 10px;background: ' +
a["color"] +
';margin-right: 5px;border-radius: 50%;}"></i>' +
a["name"] +
"</br>" +
'<div style="font-size:20px;font-weight:bold;color:red">' +
a["percent"] +
"%" +
"</div>"
);
},
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
data: [
{ value: 235, name: "视频广告" },
{ value: 274, name: "联盟广告" },
{ value: 310, name: "邮件营销" },
{ value: 335, name: "直接访问" },
{ value: 400, name: "搜索引擎" },
],
roseType: "angle",
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
const echartOnclick = async () => {
await echartsRef.current.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: 2,
});
echartsRef.current.setNewOption({
title: {
text: "ECharts demo",
},
});
};
return (
<View
style={{
backgroundColor: "#fff",
height: 350,
paddingTop: 25,
}}>
<RNEChartsPro
eventActions={{
finished: () => {
console.log(1);
},
}}
ref={echartsRef}
onPress={res => alert(JSON.stringify(res))}
legendSelectChanged={res => alert(res)}
height={250}
option={pieOption}
/>
<Button title="Update" onPress={echartOnclick} />
</View>
);
}
react-native-echarts-pro【1.8.7】 react-native version【0.62.2】 react-native-webview 【11.22.3】 Platform【android】 System【11】 Demo:import { Text, Toast } from '@components';
import React, { useCallback, useRef, useEffect, useState } from 'react'; import { View } from 'react-native'; import RNEChartsPro from 'react-native-echarts-pro'; import { useNavigation } from '@react-navigation/native'; import { Button } from '@components';
const Demo = () => { const echartsRef = useRef(); const pieOption = { tooltip: { show: true, backgroundColor: 'rgba(255,255,255,0.8)', borderColor: '#668BEE',
}; const pieOption = { tooltip: { show: true, backgroundColor: 'rgba(255,255,255,0.8)', borderColor: '#668BEE',
};
const [visible, setVisible] = useState(true);
const navigation = useNavigation(); const echartOnclick = async () => { await echartsRef.current.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: 2, });
};
return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
); }; export default Demo;