react-native-echarts 图表问题总结

最新推荐文章于 2024-05-20 09:44:36 发布

Carlos.Guo

最新推荐文章于 2024-05-20 09:44:36 发布

阅读量961

点赞数

分类专栏： ReactNative 文章标签：支持\n换行 native-echarts

本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/108783268

版权

ReactNative 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前言

当我们在ReactNative中采用图表技术的时候, 我们大致做了技术选型, 第一种是基于webView(react-native-echarts),采用echarts内容的方式,去加载图表, 第二种方式是基于Android端和IOS端原生库(native-echarts)封装成组件的形式显示图表.对于业务的复杂和UI特殊性我们选择了第一种方式,在使用的过程中发现了很多比较差异的问题,以下便是对于问题的总结

问题1

react-native-echarts 库中在Android、IOS端不支持 \n 换行

formatter: function (params) {
                //  \n 无法正常换行
                return params.value+"\n"+"end";
            }

解决1

不支持 \n 换行
- 思考在web上是支持换行,为什么react-native-echarts 库不支持,排查封装流程,结果发现在react-native-echarts/src/util/toString.js 下有对传入的option进行修改
- toString.js 传送门

    export default function toString(obj) {
      let result = JSON.stringify(obj, function(key, val) {
            if (typeof val === 'function') {
                return `~--demo--~${val}~--demo--~`;
            }
            return val;
        });
    
        do {
            result = result.replace('\"~--demo--~', '').replace('~--demo--~\"', '').replace(/\\n/g, '').replace(/\\\"/g,"\"");//最后一个replace将release模式中莫名生成的\"转换成"
        } while (result.indexOf('~--demo--~') >= 0);
        return result;
    }

该工具类里面对function的内容进行了特殊处理,并且对所有的字符串" \n ",所以对我们进行换行的处理失效,故而对改工具类重写

export default function toString(obj) {
    let result = JSON.stringify(obj, function (key, val) {
        if (typeof val === 'function') {
            return `~--demo--~${val}~--demo--~`;
        }
        return val;
    });

    do {
        result = result
            .replace('\"~--demo--~', '')
            .replace('~--demo--~\"', '')
            .replace(/{\\n\\n/g, '{')//去除stringify之后方法的{\n\n
            .replace(/}\\n\\n/g, '}')//去除stringify之后方法的}\n\n
            .replace(/{\\n/g, '{')//去除stringify之后方法的{\n
            .replace(/}\\n/g, '}')//去除stringify之后方法的}\n
            .replace(/;\\n\\n/g, ';')//去除stringify之后的方法;\n\n
            .replace(/;\\n/g, ';')//去除stringify之后的方法;\n
            .replace(/\\\\n/g, '\\n')//去除字符串\\n
            .replace(/\\\"/g, "\"");//最后一个replace将release模式中莫名生成的\"转换成"
    } while (result.indexOf('~--demo--~') >= 0);
    return result;
}

问题2

react-native-echarts 库中饼图点击高亮颜色改变问题

解决2

采用什么方式去修改选中之后的颜色,故而在设置data的时候进行修改itemStyle

            {
                value: "value",
                name: "name",
                itemStyle: {//变更饼图选中高亮颜色变换问题
                    emphasis: {color:“#83D0EF”}
                }
            }

问题3

react-native-echarts 库中饼图默认选中问题

解决3

饼图默认选中,需要发送默认选中的索引

    //设置默认选中高亮部分
    myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
    //
    myChart.on('mouseover', (e) => {
          if (e.dataIndex !== 0) { // 当鼠标移除的时候 使默认的索引值去除默认选中
            myChart.dispatchAction({ type: 'downplay', dataIndex: 0 });
          }
        });

结束语

当然在我们配置的过程中,可能需要定制不同的样式,都需要我们不停的对样式进行积累,下面是使用的一些样式的封装,希望对以后的配置有相应的帮助

资源

常使用的配置工具类

/**
 * 参考资料： https://www.cnblogs.com/benmumu/p/8316652.html
 * API文档： https://echarts.apache.org/examples/zh/index.html#chart-type-scatter
 */


/**
 * 多柱状图
 */
const dailyEventOption = (source) => {
    return {
        backgroundColor: "#fff",//全局背景颜色
        legend: {//图例样式
            x: 'center',
            bottom: 0,
            itemGap: 20,
            textStyle: {
                color: '#666'// 图例文字颜色
            }
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: "#fff",
            borderColor: '#E9EDF0',
            borderRadius: 4,
            padding: 10,
            textStyle: {
                color: '#666',
                fontSize: 13,
            },
            // axisPointer: {
            //     type: 'cross', // 十字准星指示器,
            //     label: {
            //         backgroundColor: "#587EFF",
            //     },
            //     shadowStyle: {// 阴影指示器样式设置
            //         width: 'auto',// 阴影大小
            //         color: 'rgba(175, 193, 255, 0.1)'  // 阴影颜色
            //     }
            // },
        },
        dataZoom: [
            {
                show: false,
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                show: false,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
        dataset: {
            source: source ||
            [
                ['product', '事件总数', '已逾期', '按时整改率'],
                ['周一', 43.3, 85.8, 90.7],
                ['周二', 83.1, 73.4, 55.1],
                ['周三', 86.4, 65.2, 82.5],
                ['周四', 72.4, 53.9, 39.1],
                ['周五', 22.4, 53.9, 49.1],
                ['周六', 72.4, 43.9, 69.1],
                ['周日', 82.4, 53.9, 39.1]
            ],

        },
        xAxis: [
            {
                type: 'category',
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#9AA1A9',
                        fontSize: '10',
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#E9EBF1"
                    }

                },
                axisTick: {
                    show: false
                },
            }
        ],
        yAxis: [{
            min: 0,
            name: '数量',
            splitLine: {//分隔线
                show: true,//默认显示，属性show控制显示与否
                onGap: null,
                lineStyle: {// 属性lineStyle（详见lineStyle）控制线条样式
                    color: ['#ccc'],
                    width: 1,
                    type: "dashed",
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
        }, {
            name: '整改率',
            type: 'value',
            min: 0,
            max: 100,
            axisLabel: {
                formatter: '{value}%'
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {// 分隔线
                show: true,// 默认显示，属性show控制显示与否
                onGap: null,
                lineStyle: {// 属性lineStyle（详见lineStyle）控制线条样式
                    color: ['#ccc'],
                    width: 1,
                    type: "dashed",
                }
            },
        }],
        series: [
            {
                type: 'bar',
                barWidth: 10,//宽度
                color: "#587EFF",
            },
            {
                type: 'bar',
                barWidth: 10,//宽度
                color: "#AFC1FF"
            },
            {
                type: 'line',
                smooth: true,//平滑
                color: "#FFA41C"
            }
        ]
    }
};
/**
 *折线图
 */
const scoringRateOption = (source, des) => {
    //  [[1597892178, 129], [1597576048, 20]]
    return {
        dataset: {
            source: source || []
        },
        // dataZoom: [
        //     {
        //         show: false,
        //         start: 0,
        //         end: 100
        //     },
        //     {
        //         type: 'inside',
        //         start: 0,
        //         end: 100
        //     },
        //     {
        //         show: false,
        //         yAxisIndex: 0,
        //         filterMode: 'empty',
        //         width: 30,
        //         height: '80%',
        //         showDataShadow: false,
        //         left: '93%'
        //     }
        // ],
        grid: {
            top: 30,
            bottom: 20,
            left: 40,
        },
        xAxis: {
            type: 'value',
            scale: true,
            splitLine: {// 分隔线
                show: false,// 默认显示，属性show控制显示与否,
            },
            axisLabel: {
                // showMinLabel: true,//显示最小值
                // showMaxLabel: true,//显示最大值 convertDate
                formatter: function (parames) {
                    let myDate = new Date(parames);
                    let tDay = myDate.getDate();
                    let tMonth = myDate.getMonth() + 1;
                    let tYear = myDate.getFullYear();
                    return tMonth + "-" + tDay;
                },
                inside: false,
                textStyle: {
                    color: '#9AA1A9',
                    fontSize: '10',
                },
            },
            axisLine: {
                lineStyle: {
                    color: "#E9EBF1"
                }
            },
            axisTick: {
                show: false
            },

        },
        yAxis: {
            splitLine: {// 分隔线
                show: true,// 默认显示，属性show控制显示与否
                onGap: null,
                lineStyle: {// 属性lineStyle（详见lineStyle）控制线条样式
                    color: ['#ccc'],
                    width: 1,
                    type: "dashed",
                }
            },
            axisLabel: {
                formatter: '{value} %',
                inside: false,
                textStyle: {
                    color: '#9AA1A9',
                    fontSize: '10',
                },
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
        },
        series: [
            {
                symbolSize: 6,
                type: 'scatter',
                itemStyle: {
                    color: "#5B9AE6"
                },
                markLine: {
                    label: {
                        distance: 10,
                        formatter: "",//'{b}：{c}%',
                        position: 'middle',
                    },
                    data: [{
                        type: 'average', name: des || '平均'
                    }],
                    lineStyle: {
                        width: 1.5,
                        type: "solid",
                        color: "#FFA41C",
                        shadowColor: "#FFA41C",
                        shadowBlur: 3,
                        shadowOffsetY: 1,
                    }
                }
            }

        ]
    }
};


/**
 *
 * 内置形状水球图
 * https://github.com/ecomfe/echarts-liquidfill
 *
 * http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe
 */
const waterPoloDiagramOption = (progress) => {
    return {
        series: [
            {
                type: 'liquidFill',
                data: [progress || 0],
                radius: '95%',
                color: ['#587EFF'],
                shape: 'circle',
                backgroundStyle: {
                    color: '#fff'
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 0
                    }
                },
                emphasis: {
                    itemStyle: {
                        opacity: 1
                    }
                },
                outline: {
                    show: true,
                    borderDistance: 5,
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#779CFF',
                    }
                },

                label: {
                    show: false,
                    normal: {
                        textStyle: {
                            color: '#333',
                            insideColor: '#fff',
                            fontSize: 18,
                            fontWeight: '400',
                        }

                    }
                }
            }
        ]
    }
};


/**
 *
 * 无圆角进度图 有图例
 */
const progressChartOption1 = (progress) => {
    let pro = !isNaN(progress) && (progress * 100).toFixed(0) || 0;
    return {
        title: {
            show: true,
            text: pro + '%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontSize: 20,
                color: '#000',
                fontWeight: '400'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{d}%",
            show: false
        },
        legend: {
            show: true,
            bottom: 0,
        },
        color: ["#6699FF", "#EBEEF5"],
        series:
            {
                name: '',
                type: 'pie',
                silent: true,
                radius: ['65%', '85%'],
                avoidLabelOverlap: true,
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center',

                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false,

                    }
                },
                data: [
                    {value: pro},
                    {value: 100 - pro}
                ]
            }
    }
};

/**
 * 圆角进度图 没有图例
 */

const progressChartOption2 = function (progress, color) {
    let pro = !isNaN(progress) && (progress * 100).toFixed(0) || 0;
    return {
        title: {
            show: true,
            text: pro + '%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontSize: 18,
                color: '#44444F',
                fontWeight: '400'
            },
        },
        angleAxis: {
            max: 100, // 满分
            clockwise: true, // 逆时针
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        radiusAxis: {
            type: 'category',
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        polar: {
            center: ['50%', '50%'],
            radius: '160%' //图形大小
        },
        series: [
            {
                type: 'bar',
                data: [{
                    name: '',
                    value: pro || undefined,
                    itemStyle: {
                        normal: {
                            color: { // 完成的圆环的颜色
                                colorStops: [{
                                    offset: 0,
                                    color: color || '#6699FF' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: color || '#6699FF' // 100% 处的颜色
                                }]
                            }
                        }
                    },
                }],
                silent: true,
                coordinateSystem: 'polar',
                roundCap: true,
                barWidth: 11,
                barGap: '-100%', // 两环重叠
                radius: ['49%', '52%'],
                z: 2,
            },
            { // 底部环
                type: 'bar',
                data: [{
                    value: 100,
                    itemStyle: {
                        color: '#EBEEF5',
                    }
                }],
                silent: true,
                coordinateSystem: 'polar',
                roundCap: true,
                barWidth: 11,
                barGap: '-110%', // 两环重叠
                radius: ['48%', '53%'],
                z: 1
            }]
    }
};


/**
 *
 * 仪表盘图
 */
const dashboardDiagramOption = (progress, option = {}) => {
    let pro = !isNaN(progress) && ( progress * 100).toFixed(0) || 10;
    return {
        title: [],
        angleAxis: {
            show: false,
            max: 100 * 360 / 270, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 225, //极坐标初始角度
            splitLine: {
                show: false
            }
        },
        barMaxWidth: 16, //圆环宽度
        radiusAxis: {
            show: false,
            type: 'category',
        },
        //圆环位置和大小
        polar: {
            center: ['50%', '58%'],
            radius: option.radius || '170'
        },
        series: [

            {
                type: 'bar',
                silent: true,
                data: [{ //上层圆环，显示数据
                    value: pro || undefined,
                    itemStyle: {
                        color: ["#587EFF"],
                    },
                }],
                barGap: '-100%', //柱间距离,上下两层圆环重合
                coordinateSystem: 'polar',
                roundCap: true, //顶端圆角
                z: 2 //圆环层级，同zindex
            },


            { //下层圆环，显示最大值
                type: 'bar',
                silent: true,
                data: [{
                    value: 100,
                    itemStyle: {
                        color: '#F3F5F8'
                    }
                }],
                barGap: '-100%',
                coordinateSystem: 'polar',
                roundCap: true,
                z: 1
            },


            {
                type: 'gauge',
                //半径
                radius: 90,
                //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                startAngle: 225,		// 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45,
                center: ['50%', '83%'],
                roundCap: true, //顶端圆角
                axisLine: {            // 坐标轴线
                    show: false,
                },
                splitLine: {			// 分隔线样式。
                    show: false,				// 是否显示分隔线,默认 true
                },

                //刻度样式
                axisTick: {
                    show: false,
                },
                //刻度标签。
                axisLabel: {
                    show: false,
                },
                //仪表盘指针。
                pointer: {
                    //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                    show: false,
                    //指针长度
                    length: '90%',
                    width: 0,
                },
                //仪表盘标题。
                title: {
                    show: false,
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: true,
                    offsetCenter: [0, '-70%'],
                    formatter: '{value}%',
                    textStyle: {
                        fontSize: 20,
                        color: '#505D6F',
                        fontWeight: "400"
                    }
                },
                data: [
                    {value: pro, name: ''},
                ],
                zlevel: 1
            },

            {
                name: '',
                type: 'gauge',
                //半径
                radius: option.radius ? (option.radius - 65) : 105,
                startAngle: 225,		// 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45,
                center: ['50%', '58%'],
                splitNumber: 20,
                roundCap: true, //顶端圆角
                //仪表盘轴线相关配置。
                axisLine: {            // 坐标轴线
                    show: false,
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 1,
                        color: [[1, '#587EFF']]
                    }
                },
                //分隔线样式。
                splitLine: {
                    show: true,
                    length: 5,
                    lineStyle: {          // 属性lineStyle（详见lineStyle）控制线条样式
                        color: ['#505D6F'],
                        width: 1,
                        type: 'solid'
                    }
                },
                //刻度样式
                axisTick: {
                    show: false,

                    lineStyle: {          // 属性lineStyle（详见lineStyle）控制线条样式
                        color: ['#505D6F'],
                        width: 1,
                        type: 'solid'
                    }
                },
                //刻度标签。
                axisLabel: {
                    show: false,
                    formatter: function (param) {
                        num = [0, 25, 50, 75, 100];
                        if (num.indexOf(param) > -1) {
                            return param
                        }
                    }

                },
                //仪表盘指针。
                pointer: {
                    //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                    show: false,
                },
                //仪表盘标题。
                title: {
                    show: false
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: false,

                },
                data: [
                    {name: '', value: ''},
                ],
                zlevel: -1
            },

            {
                name: '',
                type: 'gauge',
                //半径
                radius: option.radius ? (option.radius - 35) : 135,
                startAngle: 225,		// 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45,
                center: ['50%', '58%'],
                splitNumber: 20,
                //仪表盘轴线相关配置。
                axisLine: {            // 坐标轴线
                    show: false,
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 1,
                        color: [[1, '#587EFF']]
                    }
                },
                //分隔线样式。
                splitLine: {
                    show: false,
                    length: 5,
                    lineStyle: {          // 属性lineStyle（详见lineStyle）控制线条样式
                        color: ['#505D6F'],
                        width: 1,
                        type: 'solid'
                    }
                },
                //刻度样式
                axisTick: {
                    show: false,

                    lineStyle: {          // 属性lineStyle（详见lineStyle）控制线条样式
                        color: ['#505D6F'],
                        width: 1,
                        type: 'solid'
                    }
                },
                //刻度标签。
                axisLabel: {
                    show: true,
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#505D6F'
                    },
                    formatter: function (param) {
                        let num = [0, 25, 50, 75, 100];
                        if (num.indexOf(param) > -1) {
                            return param
                        }
                    }

                },
                //仪表盘指针。
                pointer: {
                    //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                    show: false,
                },
                //仪表盘标题。
                title: {
                    show: false
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: false,

                },
                data: [
                    {name: '', value: ''},
                ],
                zlevel: -1
            }
        ]
    }
};

/**
 *饼图 
 */
const pieChartOption = (data, color) => {
    return {
        tooltip: {
            show: false,
            trigger: 'item',
            formatter: ''
        },
        legend: {
            orient: 'vertical',
            right: "0%",
            top: '30%',
            data: []
        },
        color: color || ["#6699FF", "#52CCA3"],
        series: [
            {
                name: '',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['60%', '80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        color: "#333",
                        // formatter: '{d}%',
                        formatter: function (params) {
                            return params.name;
                        }
                    }
                },
                labelLine: {
                    show: false
                },
                data: data ||
                [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                ]
            }
        ]
    };
};


/**
 * 折线图
 */
const lineChartOption = (source, yName, tipName) => {
    return {
        dataset: {
            source: source ||
            [
                [123123, 200],
                [123223, 100],
                [123323, 20],
                [123423, 210],
                [123523, 2]
            ],

        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: "#fff",
            borderColor: '#E9EDF0',
            borderWidth: 1,
            borderRadius: 4,
            padding: 10,
            textStyle: {
                color: '#666',
                fontSize: 13,
            },
            axisPointer: {
                animation: false,
                label: {
                    backgroundColor: "#587EFF",
                    formatter: function (params) {
                        let subValue = "0";
                        if (params.value.toString() && params.value.toString().split(":").length > 1) {
                            subValue = parseInt(params.value.toString().split(":")[0]) - 1 || "0";
                        }
                        let startValueStart = ( subValue < 10 ? "0" + subValue : subValue) + ":00";
                        return startValueStart + "-" + params.value;
                    }
                },
                type: 'line',         // 默认为直线，可选为：'line' | 'shadow'
                lineStyle: {          // 直线指示器样式设置
                    color: '#bbb',
                    width: 1,
                    type: 'dashed'
                },
                shadowStyle: {// 阴影指示器样式设置
                    width: 'auto',// 阴影大小
                    color: 'rgba(175, 193, 255, 0.1)'  // 阴影颜色
                },
            },
        },
        dataZoom: [
            {
                show: false,
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                show: false,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
        grid: {
            top: 30,
            bottom: 30,
            left: 40,
        },
        xAxis: {
            type: 'category',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: "#E9EBF1"
                }
            },
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#9AA1A9',
                    fontSize: '10',
                },
            },
        },
        yAxis: {
            name: yName || '(人次)',
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#9AA1A9',
                    fontSize: '10',
                },
            },
        },
        series:
            [
                {
                    name: tipName || "name",
                    type: 'line',
                    smooth: true,     //smooth表示是否是平滑
                    areaStyle: {
                        color: "rgba(87, 126, 255, 0.09)",
                    },    //areaStyle表示是否显示一块有着色的区域，来覆盖折现图以下的地方
                    color: '#577EFF',  //如果传入了corlor属性就表示这一条折线制定固定的颜色，否则就按默认的颜色来处理
                }
            ]
    };
};


/**
 *柱状叠加
 */
const columnarStackOption = (source, yName, color) => {

    return {
        tooltip: {
            trigger: 'axis',
            backgroundColor: "#fff",
            borderColor: '#E9EDF0',
            borderWidth: 1,
            borderRadius: 4,
            padding: 10,
            textStyle: {
                color: '#666',
                fontSize: 13,
            },
            axisPointer: {
                type: 'shadow', // 十字准星指示器,
                label: {
                    backgroundColor: "#587EFF",
                },
                shadowStyle: {// 阴影指示器样式设置
                    width: 'auto',// 阴影大小
                    color: 'rgba(175, 193, 255, 0.1)'  // 阴影颜色
                }
            },
        },
        dataZoom: [
            {
                show: false,
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                show: false,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
        color: color || ["#3DD598", "#587EFF"],
        dataset: {
            source: source ||
            [
                ['product', '事件总数', '已逾期'],
                ['周一', 43.3, 85.8],
                ['周二', 83.1, 73.4],
                ['周三', 86.4, 65.2],
                ['周四', 72.4, 53.9],
                ['周五', 22.4, 53.9],
                ['周六', 72.4, 43.9],
                ['周日', 82.4, 53.9]
            ],

        },
        legend: {
            x: 'center',
            bottom: 0,
            itemGap: 20,
            selectedMode: false,
            textStyle: {
                color: '#666'// 图例文字颜色
            }
        },
        grid: {
            top: "10%",
            left: '5%',
            right: '5%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#E9EBF1"
                    }
                },
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#9AA1A9',
                        fontSize: '10',
                    },
                },
            }
        ],
        yAxis: [
            {
                name: yName || '(人数)',
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#9AA1A9',
                        fontSize: '10',
                    },
                },
            }
        ],
        series: [
            {
                type: 'bar',
                barWidth: 15,//宽度
                stack: 'overlay',
            },
            {
                type: 'bar',
                barWidth: 15,//宽度
                stack: 'overlay',
            },
        ]
    };

};

export {
    dailyEventOption,
    scoringRateOption,
    waterPoloDiagramOption,
    progressChartOption1,
    progressChartOption2,
    dashboardDiagramOption,
    pieChartOption,
    lineChartOption,
    columnarStackOption
}

Carlos.Guo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react-native-echarts 图表问题总结

前言当我们在ReactNative中采用图表技术的时候, 我们大致做了技术选型, 第一种是基于webView(react-native-echarts),采用echarts内容的方式,去加载图表, 第二种方式是基于Android端和IOS端原生库(native-echarts)封装成组件的形式显示图表.对于业务的复杂和UI特殊性我们选择了第一种方式,在使用的过程中发现了很多比较差异的问题,以下便是对于问题的总结问题1react-native-echarts 库中在Android、IOS端不支持 \
复制链接

扫一扫