前言
近期接到客户一需求,要在chart图上展示markLine标线,由于RN项目使用的chart图展示插件为:react-native-charts-wrapper,该插件没法实现此功能,只好另寻方案,试过使用webView实现此功能,但实际运行却经常白屏,故废弃,综合对比,选用了native-echarts来实现此功能
一、安装native-echarts
npm install native-echarts
二、使用步骤
1. tpl.html的配置
在node_modules包中找到native-charts包,拷贝native-echarts/src/components/Echarts文件夹下面的tpl.html
在项目android/app/src/main/assets目录下,粘贴tpl.html
如果没有assets文件夹,则直接新建assets文件夹即可
建议:拷贝及粘贴tpl.html,建议在项目对应的磁盘文件夹中操作,不直接在编辑中操作;本人刚开始在编辑器中操作,结果assets目录的tpl.html总是无法保存或自动被修改
2. 修改source源,以便打包后chart图能正常显示
编辑 node_modules/native-echarts/src/components/Echarts/index.js文件,
在顶部添加如下代码
const iosPlatform = Platform.OS === 'ios' ? 'true' : 'false';
修改WebView标签的source属性如下:
source={iosPlatform === 'true' ? require('./tpl.html') : {uri: 'file:///android_asset/tpl.html'}}
3. 调用并显示chart图
引入naitve-charts
import Echarts from 'native-echarts';
调用
<Echarts option={this.state.option} height={250} />
option代码参考:
initChartOption = () => {
let option = {
tooltip: {
trigger: 'axis',
formatter: '{b0}: {c0}/{a0}'
},
grid: {
left: 10, //图表距边框的距离
right: 60,
bottom: 40,
top: 10,
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
rotate:-40,
formatter: function (value) {
return value.substr(0,10);
}
},
data: ['星期一','星期二','星期三','星期四','星期五']
},
yAxis: {
type: 'value'
},
color : ['#66A7E8'],
series: [{
name : '',
data: [1,2,3,4,5],
type: 'line',
connectNulls : true,
lineStyle : {
normal : {
color : '#66A7E8'
}
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#8CB2FA'
},
{
offset: 1,
color: '#fff',
},
],
globaCoord: false,
},
},
},
markLine: {
symbol:"none",
silent: false,
lineStyle: {
type:"solid",
normal: {
type : 'solid',
color: '#ff0000' // 这儿设置安全基线颜色
}
},
data: [],
label: {
normal: {
formatter: '{b}: {c}'
}
},
},
}]
};
return option;
}