一、首先看图
第一个是默认效果,后两个是需求效果图(备注:默认效果图,参考的是菜鸟教程)。
接下来将默认效果修改为需求效果。
二、名词解释
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
还有一些开发过程中陆续查阅的博客,到现在已经找不到了。如果这篇博客不能解决你的问题,多翻阅几篇,或者看看贴出来的两篇教程。