RN开发中ECharts图表的配置记录

最新推荐文章于 2024-05-19 09:54:32 发布

半岛铁盒香七里

最新推荐文章于 2024-05-19 09:54:32 发布

阅读量900

点赞数

分类专栏： react native 文章标签： react native echarts android

本文链接：https://blog.csdn.net/qq_34412681/article/details/113869447

版权

react native 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、首先看图

第一个是默认效果，后两个是需求效果图（备注：默认效果图，参考的是菜鸟教程）。

接下来将默认效果修改为需求效果。

二、名词解释

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

还有一些开发过程中陆续查阅的博客，到现在已经找不到了。如果这篇博客不能解决你的问题，多翻阅几篇，或者看看贴出来的两篇教程。