这篇文章主要讲解了“React Native中如何利用echarts画图表”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“React Native中如何利用echarts画图表”吧！ 如果你已经有 APP 包，可以忽略前面的打包流程，直接跳到第 4 步。本地搭好 RN 开发环境，搭建过程网上一抓一大把，就不赘述了。因为是试用，所以我用 expo 新初始化了一个 rn 工程，叫 TestApp。
npxcreate-expo-appTestApp
用命令行生成包 ios android app 包。这里 ios 建议用模拟器（不需要配证书），安卓我是连的真机
yarnandroid yarnios
生成包后，手机看到已经安装了这个应用，就代表成功啦。
yarnadd@wuba/react-native-echartsecharts yarnadd@shopify/react-native-skia yarnaddreact-native-svg
注意，如果你是在已有工程中安装，安装完成后要重新打个新包，不然缺少原生依赖会报错；@wuba/react-native-echarts 支持两种渲染模式（Skia 和 Svg），先用 Skia 试一个简单的图表。大致分为这几个小步骤：引入 echarts、图表组件等依赖注册图表组件创建图表实例，并设置图表的配置（option）页面销毁时要记得同步销毁图表实例具体代码如下：
import{useRef,useEffect}from'react';
import{View}from'react-native';
/**
*一、引入echarts依赖，这里先试下折线图
*/
import*asechartsfrom'echarts/core';
import{LineChart}from'echarts/charts';
import{GridComponent}from'echarts/components';
import{SVGRenderer,SkiaChart}from'@wuba/react-native-echarts';
/**
*二、注册需要用到的组件
*SVGRenderer:是必须注册的
*LineChart:因为用的折线图，所以要引入LineChart（如果不知道该引入哪些组件，就直接看报错，报错说缺什么就加什么）
*GridComponent:这个就是报错的时候提示，然后我加的hhh
*/
echarts.use([SVGRenderer,LineChart,GridComponent]);
exportdefault()=>{
constskiaRef=useRef(null);//Ref用于保存图表实例
useEffect(()=>{
/**
*四、图表配置
*/
constoption={
xAxis:{
type:'category',
data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
},
yAxis:{
type:'value',
},
series:[
{
data:[150,230,224,218,135,147,260],
type:'line',
},
],
};
letchart;
if(skiaRef.current){
/**
*五、初始化图表，指定下宽高
*/
chart=echarts.init(skiaRef.current,'light',{
renderer:'svg',
width:400,
height:400,
});
chart.setOption(option);
}
/**
*六、页面关闭后要销毁图表实例
*/
return()=>chart?.dispose();
},[]);
return(
);
};
写完摇一摇手机，reload bundle 包时出现了报错：ERROR Invariant Violation: requireNativeComponent: “SkiaDomView” was not found in the UIManager.google 了一下，说是需要降级解决。其实是要跟 expo 版本对应，在安装依赖的时候也会有类似这样的提示，安装提示的版本就可以了于是按照提示做了版本降级：
@shopify/react-native-skia@0.1.157 react-native-svg@13.4.0
重新构建 app 后加载出来了，针不戳；（安卓遮住了点，看来应该自适应屏幕宽度）写个复杂点的动态排序柱状图，试试 Svg 模式，给 Svg 和 Skia 做个对比，完整代码看这里。
//...此处省略一些不重要的代码
//注册需要用到的组件，BarChart-柱状图LegendComponent-图例
echarts.use([SVGRenderer,BarChart,LegendComponent,GridComponent]);
exportdefault()=>{
constskiaRef=useRef(null);
constsvgRef=useRef(null);
useEffect(()=>{
//Skia模式
constskiaChartData=getData();//生成图表柱状图数据
letskiaChart;
letskiaInter;
if(skiaRef.current){
skiaChart=echarts.init(skiaRef.current,'light',{
renderer:'svg',
width:300,
height:300,
});
skiaChart.setOption(getDefaultOption(skiaChartData));
setTimeout(function(){
run(skiaChart,skiaChartData);
},0);
skiaInter=setInterval(function(){
run(skiaChart,skiaChartData);
},3000);
}
//Svg模式
constsvgChartData=getData();
letsvgChart;
letsvgInter;
if(svgRef.current){
svgChart=echarts.init(svgRef.current,'light',{
renderer:'svg',
width:300,
height:300,
});
svgChart.setOption(getDefaultOption(svgChartData));
setTimeout(function(){
run(svgChart,svgChartData);
},0);
svgInter=setInterval(function(){
run(svgChart,svgChartData);
},3000);
}
return()=>{
skiaChart?.dispose();
svgChart?.dispose();
//定时器得清理掉，不然退出页面后还会运行
clearInterval(skiaInter);
clearInterval(svgInter);
};
},[]);
return(
skia如下
svg如下
);
};
Skia 和 Svg 模式，肉眼看不出明显差别效果不错，不过每次使用都要把一堆东西引进去好烦，先简单封装下吧
import{useRef,useEffect}from'react';
import*asechartsfrom'echarts/core';
import{BarChart,LineChart,PieChart}from'echarts/charts';
import{
DataZoomComponent,
GridComponent,
LegendComponent,
TitleComponent,
ToolboxComponent,
TooltipComponent,
}from'echarts/components';
import{
SVGRenderer,
SvgChartas_SvgChart,
SkiaChartas_SkiaChart,
}from'@wuba/react-native-echarts';
import{Dimensions}from'react-native';
//注册需要用到的组件
echarts.use([
DataZoomComponent,
SVGRenderer,
BarChart,
GridComponent,
LegendComponent,
ToolboxComponent,
TooltipComponent,
TitleComponent,
PieChart,
LineChart,
]);
//图表默认宽高
constCHART_WIDTH=Dimensions.get('screen').width;//默认用手机屏幕宽度
constCHART_HEIGHT=300;
constChart=({
option,
onInit,
width=CHART_WIDTH,
height=CHART_HEIGHT,
ChartComponent,
})=>{
constchartRef=useRef(null);
useEffect(()=>{
letchart;
if(chartRef.current){
chart=echarts.init(chartRef.current,'light',{
renderer:'svg',
width,
height,
});
option&&chart.setOption(option);
onInit?.(chart);
}
return()=>chart?.dispose();
},[option]);
return
封装好了，咱就写个多图表同时使用的页面看看效果。这里写了个“电商数据分析”页面，分别有折线图、柱状图、饼图。下方是主要代码，用的 svg 模式。
//页面代码
import{SkiaChart}from'../../components/Chart';
import{ScrollView,Text,View}from'react-native';
import{StatusBar}from'expo-status-bar';
import{useCallback,useEffect,useState}from'react';
import{
defaultActual,
lineOption,
salesStatus,
salesVolume,
userAnaly,
getLineData,
}from'./contants';
importstylesfrom'./styles';
//开启图表loading
constshowChartLoading=(chart)=>
chart.showLoading('default',{
maskColor:'#305d9e',
});
//关闭图表loading
consthideChartLoading=(chart)=>chart.hideLoading();
exportdefault()=>{
const[actual,setActual]=useState(defaultActual);//记录实时数据
useEffect(()=>{
//假设循环请求数据
constinterv=setInterval(()=>{
constnewActual=[];
for(letitofactual){
newActual.push({
...it,
num:it.num+Math.floor((Math.random()*it.num)/100),
});
}
setActual(newActual);
},200);
return()=>clearInterval(interv);
},[actual]);
constonInitLineChart=useCallback((myChart)=>{
showChartLoading(myChart);
//模拟数据请求
setTimeout(()=>{
myChart.setOption({
series:getLineData,
});
hideChartLoading(myChart);
},1000);
},[]);
constonInitUserChart=useCallback((myChart)=>{
//模拟数据请求，跟onInitLineChart类似
},[]);
constonInitSaleChart=useCallback((myChart)=>{
//模拟数据请求，跟onInitLineChart类似
},[]);
constonInitStatusChart=useCallback((myChart)=>{
//模拟数据请求，跟onInitLineChart类似
},[]);
constchartList=[
['订单走势',lineOption,onInitLineChart],
['用户统计',userAnaly,onInitUserChart],
['各品类销售统计',salesVolume,onInitSaleChart],
['订单状态统计',salesStatus,onInitStatusChart],
];
return(
实时数据
{actual.map(({title,num,unit})=>(
{title}
{num}
{unit}
))}
{chartList.map(([title,data,callback])=>(
{title}
))}
);
};
重新加载 bundle，看看效果图渲染出来后，iOS 上交互很丝滑，安卓上交互时感觉偶尔会有卡顿（不会是因为我手机太差吧…）。再换 Skia 模式看看emmm 虽然可以，但是好像中文不能正常显示，安卓上中文都没有显示，iOS 则是乱码。看了下文档，目前 skia 在安卓端还不支持中文，在 iOS 端可以通过设置字体为 ‘PingFang SC’显示中文，比如：
constoption={
title:{
text:'我是中文',
textStyle:{
fontFamily:'PingFangSC',//指定字体类型
},
},
};
但是每个显示中文的地方都要设置字体……那还是先用 svg 吧。感谢各位的阅读，以上就是“React Native中如何免费云主机域名利用echarts画图表”的内容了，经过本文的学习后，相信大家对React Native中如何利用echarts画图表这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！
相关推荐: Python中schedule模块的定时任务如何使用
这篇文章主要介绍“Python中s免费云主机域名chedule模块的定时任务如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Python中schedule模块的定时任务如何使用”文章能帮助大家解决问题。比如当满足…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
