站长做2个网站开平网站设计
一、首先看图
第一个是默认效果，后两个是需求效果图（备注：默认效果图，参考的是菜鸟教程）。
接下来将默认效果修改为需求效果。
二、名词解释
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）
//伪代码
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：https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-mec528xa.html
菜鸟教程：https://www.runoob.com/echarts/echarts-tutorial.html
还有一些开发过程中陆续查阅的博客，到现在已经找不到了。如果这篇博客不能解决你的问题，多翻阅几篇，或者看看贴出来的两篇教程。