一、首先看图
第一个是默认效果，后两个是需求效果图（备注：默认效果图，参考的是菜鸟教程）。
接下来将默认效果修改为需求效果。
二、名词解释
1. title 的属性字段：
text： 标题文字
show： false（不显示标题）
2. tooltip 的属性字段：
用来配置图表点击后的信息提示框，可以将坐标系中的多个图表合并提示，也可以单独对某个图表进行设置。
这里最终没用到，详情查看W3Cschool。
3. legend 的属性字段：
data： 图例组件的数据源（接收值类型为Array）
icon： 图例组件中图例项的图标类型（可选值有'circle'，'emptycircle'，'rect'，'roundRect'，'triangle'，'diamond'，'pin'，'arrow'，还可以是'image://xxxxx这里是urlxxxxx'，'path://xxxxx这里是矢量路径如SVGxxxxx'等）
orient： 图例组件中多个标示的排列方向（可选值有'horizontal'，'vertical'）
left： 图例组件距左侧的距离（可选值有具体像素值，百分比，还有'left'，'center'，'right'等）
bottom： 图例组件距右侧的距离（可选值有具体像素值，百分比，还有'start'，'center'，'middle'，'bottom'等）
textStyle： 图例组件中文字的样式（接收值类型为Object，可选属性值有fontSize，color，fontStyle，fontWeight，backgroundColor，padding，boder等常见的样式属性）
//代码示例
textStyle: {
fontSize: 12,
color: '#676767',
}
4. xAxis 的属性字段：
data： X轴上刻度的数据源（接收值类型为Array）
axisLine： X轴轴线（接收值类型为Object，可选属性值有lineStyle，等）
lineStyle：X轴轴线的样式（接受值类型为Object，可选属性值有color，width，type（'solid'，'dashed'，'dotted'）等）
axisLabel： 坐标轴刻度标签（接收值类型为Object，可选属性值有textStyle，interval等）
interval：刻度的间隔值（接收类型为Number，如0-无间隔，1-间隔为1等），比如设置为0则是0，1，2，3，4；设置为1则是0，2，4，6，8。
textStyle：刻度的文字样式（接收值类型为Object，可选属性值有fontSize， color，fontStyle，fontWeight等常见的文字样式属性）
axisTick：坐标轴刻度（接收值类型为Object，可选属性值有show，inside，length等）
show：是否显示坐标轴上的刻度线 / 延长线（接收值类型为Boolean）
inside：坐标轴刻度是否朝内（接收值类型为Boolean）
length：坐标轴刻度的长度（接收值类型为Number）
//代码示例
xAxis: {
//设置坐标轴轴线
axisLine: {
//轴线样式
lineStyle: {
color: '#ebebeb'
}
},
//设置坐标轴刻度标签
axisLabel: {
//刻度标签的间隔
interval: 0,
//文字样式
textStyle: {
color: '#808080',
}
},
//设置坐标轴刻度
axisTick: {
//不显示
show: false,
},
}
5. yAxis 的属性字段：
data： Y轴上刻度的数据源（接收值类型为Array，默认情况下设置好图表的数据源后，会自动显示刻度值）
splitLine： Y轴上的图表区域内一条一条的分割线（接收值类型为Object，可选属性值有lineStyle等其它）
lineStyle：Y轴上坐标轴分割线的样式（接收值类型为Object，可选属性值有color，width，type（'solid'，'dashed'，'dotted'）等）
其它与 xAxis 相同的属性不在赘述。
5.1 多条Y轴（比如图二，左右各有一条）
将yAxis的值改成数组类型的，传入多个对象即可实现（简言之，就是将单条Y轴时yAxis的值复制一份，与被复制的合并到一个数组中，重新设置给yAxis）。
//伪代码
yAxis: [{
name: '第一条Y轴'
},{
name: '第二条Y轴'
}]
name： 坐标轴的名称（接收值类型为String）
nameLocation： 坐标轴名称的显示位置（接收值类型为String，可选值有'start'，'middle'，'end'）
nameTextStyle： 坐标轴名称的文字样式（接收值类型为Object，可选属性值有fontSize， color，fontStyle，fontWeight等常见的文字样式属性）
type： 坐标轴刻度的设置
min： 坐标轴刻度的最小值（接收值类型为Number|String|Function）
max： 坐标轴刻度的最大值（接收值类型为Number|String|Function）
interval： 坐标轴刻度间的间隔（接收值类型为Number）
5.2 Y轴上刻度文字后显示单位
axisLabel：坐标轴刻度标签（接收值类型为Object，可选属性值有textStyle，interval，formatter等）
formatter：可以利用字符串模板设置刻度单位（接收值类型为String|Function）
//代码示例
yAxis: [{
name: '损益金额（元）',
//刻度最小值
min: -15,
//刻度最大值
max: 15,
//刻度间隔
interval: 5,
}, {
name: '损益率',
splitLine: {
lineStyle: {
color: "#ebebeb"
}
},
axisLabel: {
//刻度单位
formatter: '{value} %'
},
//刻度最小值
min: -0.30,
//刻度最大值
max: 0.30,
//刻度间隔
interval: 0.10,
}
6. series 的属性字段（接收值类型为Array）：
name： 图表的名称，需要与legend.data中的名称对应
type： 图表的类型（接收值类型为String，可选值有'bar'，'line'，'pie'，'scatter'，'effectScatter'，'radar'，'tree'，'treemap'，'sunburst'等其它，详情查看菜鸟教程）
data： 图表数据的数据源（接收值类型为Array）
symbol： 图表上的图标类型（比如图三 - 折线图中每个刻度上数据处的小圆点），（可选值有'circle'，'emptycircle'，'rect'，'roundRect'，'triangle'，'diamond'，'pin'，'arrow'，还可以是'image://xxxxx这里是urlxxxxx'，'path://xxxxx这里是矢量路径如SVGxxxxx'等，也可以设置为'none'表示不显示）
yAxisIndex： 当有多条Y轴时，表示此图表参考的Y轴是哪条（接收值类型为Number，从0开始 - 对应着参考Y轴在数组中的index值）
barWidth：柱状图的柱形宽度（接收值类型为Number|String），（这个属性会对坐标系中多个柱状图起作用，一般设置在多个柱状图的最后一个）
barGap：柱状图的柱体间距（接收值类型为String，这里的效果是两个柱状图重叠，值的设置为 '-100%' ），（这个属性会对坐标系中多个柱状图起作用，一般设置在多个柱状图的最后一个）
itemStyle：柱状图的柱体样式（接收值类型为Object，还分为正常状态和其它状态），（这里用来实现每个柱子的圆角形状 barBorderRadius 和 柱体颜色 color ）
备注： itemStyle的样式作用于柱状图中的所有柱体（统一设置），而效果图中每个柱体的样式并不相同，故采用的是单个柱体设置样式的方法，见以下代码
//伪代码：
//设置样式方式一：
series: [{
name: '营收金额',
data: [4,9,4...0]
itemStyle: {
"normal": {
"color": "#5175F3"
}
}
}]
//设置样式方式二：
series: [{
name: '营收金额',
data: [{
value: 4,
itemStyle: {
"normal": {
"barBorderRadius": [3, 3, 0, 0]
}
}
}, {
value: 9,
itemStyle: {
"normal": {
"barBorderRadius": [3, 3, 0, 0]
}
}
}
...
{
value: 0,
itemStyle: {
"normal": {
"barBorderRadius": [0, 0, 0, 0]
}
}
}
}]
markPoint：图表标注（接收值类型为Object，可选值有symbol，symbolSize，symbolOffset，data，label等其它，详情查看W3Cschool），这里用来实现效果图中折线图上悬浮的红色框和橙色框。
symbol：图表标注的图标类型（接收值类型为String，可选值有'circle'，'rect'，'roundRect'，'triangle'，'diamond'，'pin'，'arrow'，还可以是'image://xxxxx这里是urlxxxxx'，'path://xxxxx这里是矢量路径如SVGxxxxx'等）
symbolSize：标注图的大小（接收值类型为Number|Array|Function，比如10 - 表示宽高都为10，[10, 20] - 表示宽为10，高为20）
symbolOffset：标注图的偏移大小（接收值类型为Array，比如[100, 100] - 表示标注图相对原本位置横向偏移100，纵向偏移100）
data：标注图的数据源（接收值类型为Array，详情查看[W3Cschool](https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-4s9z2el9.html)）
//伪代码
series: [{
//标注框
markPoint: {
symbol: 'roundRect',
symbolSize: [35, 18],
symbolOffset: [230, -12],
data: [{ type: 'average', name: '平均值' }, [0.15, 0.15, 0.15, 0.15, 0.15, 0.15, 0.15]],
}
}]
7. grid 的属性字段：
这里用来设置图表区域的边距（去除默认的空白区域），使直观效果更美观。
x，y，x2，y2就类似left，top，right，bottom，但是是针对坐标轴的，值为偏移量。（备注：这里描述不太好，建议手动尝试一下，具体感受下效果）
以下是默认效果（图一）的代码。
// 代码摘录自菜鸟教程（https://www.runoob.com/echarts/echarts-tutorial.html）
// 指定图表的配置项和数据
var option = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
三、其它问题
1. RN中ECharts库的安装与使用
1.1 安装，npm install native-echarts。
1.2 直接运行后会报webview的错，是因为webview已经从 'react-native' 中脱离出来，独立成 'react-native-webview' 库。而native-echarts库中使用到的webview是从 'react-native' 中导入的。
解决：安装 'react-native-webview' 库，从这个库中导入webView即可。
//在native-echarts/src/components/Echarts/index.js文件中，将
import { WebView, View, StyleSheet, Platform } from 'react-native';
//改为如下所示
import { View, StyleSheet, Platform } from 'react-native';
import WebView from 'react-native-webview';
1.3 修改掉webview的错误后，再次运行项目，界面中ECharts图表的位置会错误的显示HTML代码，需要做如下修改：
1） 从native-echarts/src/components/下拷贝tpl.html文件，复制到项目/android/app/src/main/assets/下（如果没有assets目录，创建一个）。
2） 修改index.js文件，这句代码表示针对不用平台，配置不同的访问目录（不加配置的话，在ios上正常，在android中会出现这个问题）。
//在native-echarts/src/components/Echarts/index.js文件中，将
source=require('./tpl.html')
//改为如下所示
source={Platform.OS==='ios' ? require('./tpl.html'):{uri:'file:///android_asset/tpl.html'}}
再次运行项目，可以正常看到图表界面。
目前只接触到这些，后续有需求更新再补充。
. . .
参考文档：
W3Cschool： www.w3cschool.cn/echarts_tut…
菜鸟教程： www.runoob.com/echarts/ech…
还有一些开发过程中陆续查阅的博客，到现在已经找不到了。如果这篇博客不能解决你的问题，多翻阅几篇，或者看看贴出来的两篇教程。
