echarts是百度推出的免费开源的图表组件，功能丰富，涵盖各行业图表。公司项目做h5项目用了不少，最近公司翻新h5页面，用react-native改造，来达到增强用户体验效果的目的。项目中遇到了一些坑，记录下。
1.安装native-echarts组件
首先我们需要在RN项目中安装native-echarts组件，该组件是兼容IOS和安卓双平台的。
github地址：https://github.com/somonus/react-native-echarts
搜索github发现其star、fork数量并不是很多，到现在为止加上我的star也就492。从这个数来看算是不太受欢迎吧！
npm install native-echarts--save
安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts。
页面引入
import Echarts from 'native-echarts';
...
render() {
return (
<Echarts option={option} height={rpx(420)} />
）
}
该组件提供了三个props属性
component props:
- option (object): The option for echarts: Documentation。
- width (number): The width of the chart. The default value is the outer container width.
- height (number): The height of the chart. The default value is 400.
按照echart文档配置好参数后
运行效果，发现android平台下 图表滚轮上下滚动，左右拖动，双击缩小。
网上找到的办法是
修改/node_modules/native-echarts/src/components/ 下 Echarts 的 index.js 代码如下
<WebView
ref="chart"
scrollEnabled = {false}
injectedJavaScript = {renderChart(this.props)}
style={{
height: this.props.height || 400,
backgroundColor: this.props.backgroundColor || 'transparent'
}}
scalesPageToFit={Platform.OS === 'android'}
source={require('./chart.html')}
onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
/>
主要是设置 scalesPageToFit在android平台下为true
2.组件优化
修改node_modules模块的代码？
对于合作的项目，node_modules不会上传到git上的，需要和每一个开发人员说下？
其实没有那个必要了，现在的做法是
提取node_modules/native-echarts 里面的核心代码，直接放到项目中去。作为一个单独的组件改写。
源码地址：https://github.com/zuobaiquan/react-native/tree/master/Echarts/component
chart.html 里面引入echarts.min.js文件。通过webView 引入到react-native项目中。
当然了，觉得echarts.min.js 嫌大，可以去百度echart官网定制一份echarts.min.js即可（地址：http://echarts.baidu.com/builder.html），差不多300k左右吧。
3.遇到的坑
现在针对公司项目，有这么一个需求
问题1：图表底部只显示第一个日期和最后一个日期
我们都知道 在 interval设置下就行。。
interval: (index, value) => {
return index === 0 || xData.length - 1 === index
},
formatter: (value, index) => {
if (index === 0) {
return `{a|${value}}`
} else if (index === xData.length - 1) {
return `{b|${value}}`
}
}
但是，这里的通过接口请求的数据 xData 值拿不到。 导致不显示最后一个日期的数据。
解决办法： 上文提到了该组件提供了三个props属性。此时为啥我们不能暴露更多的属性呢？
然后在使用组件时，设定chartContext 值就可以啦。。。
问题2：tooltips 滑动时，上面的一列文字的数据跟着变化。
首先想到的办法是 在 formatter 设置 setState 改变数值，渲染到DOM里面。但是和问题1情况一样，由于是echart图表是通过 WebView 嵌入的。无法实现render的渲染。
tooltip: {
formatter: (params)=> {
this.setState({
number1:???,
number2:???
})
}
}
此时的做法是
问题3：设置为渐变色， 此处设置的是针对网页的
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(234, 243, 253)'
}, {
offset: 1,
color: 'rgb(255, 255, 255)'
}])
}
}
RN项目这里并没有 暴露echarts 对象
因此想要设置渐变色，得需要用另外一种方式了。
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#A3C7F3' // 0% 处的颜色
}, {
offset: 1, color: '#FFFFFF' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
origin:'start'
}
路过的朋友，如果有更好的解决办法，欢迎email我哦，邮箱： zuobaiquan01@gmail.com
4.关于打包
/android／app/src/main 创建 assets文件夹 讲chart.html模板拷贝一份到该目录。
上面 设置 chartContext 解决了配置项拿不到外部变量的问题，看起来很完美，运行代码也没有什么问题，不过，在项目打包时，又出了问题，图表显示不出来了。
原因：打包时，由于自定义属性是手动加的，打包时转换成了简写，不能被识别
// renderChart.js
var chartContext = ${toString(chartContext)}; 替换为
var g_chartContext = ${toString(chartContext)};
// 使用时，把chartContext 全都替换为g_chartContext 就可以了
option.tooltip.formatter = (params) => {
return `<div style="width: ${g_chartContext.width*690}px; font-size: ${g_chartContext.width*26}px;"></div>` // 此处deviceW并不生效，获取不到外部定义的变量
}