react-native-secharts使用复杂报表的问题,涉及renderItem函数的使用



  • function renderItem(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([api.value(1), categoryIndex]);
        var end = api.coord([api.value(2), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.6;
    
        var rectShape = echarts.graphic.clipRectByRect({
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
        }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });
        return rectShape && {
            type: 'rect',
            shape: rectShape,
            style: api.style()
        };
    }
    
    chartOption2: {
                    tooltip: {
                        formatter: function (params) {
                            return params.marker + params.name + ': ' + params.value[3] + ' ms';
                        }
                    },
                    title: {
                        text: '供应商来料到货情况'
                    },
                    dataZoom: [{
                        type: 'slider',
                        filterMode: 'weakFilter',
                        showDataShadow: false,
                        top: 400,
                        height: 10,
                        borderColor: 'transparent',
                        backgroundColor: '#e2e2e2',
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                        handleSize: 20,
                        handleStyle: {
                            shadowBlur: 6,
                            shadowOffsetX: 1,
                            shadowOffsetY: 2,
                            shadowColor: '#aaa'
                        },
                        labelFormatter: ''
                    }, {
                        type: 'inside',
                        filterMode: 'weakFilter'
                    }],
                    xAxis: {
                        min: 0,
                        max: 1440,
                        scale: true,
                        interval: 60,
                        axisLabel: {
                            formatter: function (val) {
                                return Math.round(val / 60) + 'h';
                            }
                        }
                    },
                    yAxis: {
                        data: ['机房', '厅门轿门', '轿底吊顶', '直梁', '底坑', '补偿链', '操纵箱']
                    },
                    series: [{
                        type: 'custom',
                        renderItem: renderItem,
                        itemStyle: {
                            normal: {
                                opacity: 0.8
                            }
                        },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: [{
                            name: "test1",
                            value: [
                                1,
                                100,
                                230, 122
                            ],
                            itemStyle: {
                                normal: {
                                    color: '#0077FF'
                                }
                            }
                        }]
                    }]
                }
    


  • renderItem所执行的绘制的图形没有出来,请大家帮忙一起分析下原因。谢谢


Log in to reply