function renderItem, how add?

[Okladnoj]

At the official resource, he developed the necessary schedule for himself

Here's my code:

var data = [[15, 10, 20, 'A'], [16, 18, 15, 'B'], [18, 26, 12, 'C'], [26, 32, 22, 'D'], [32, 56, 7, 'E'], [56, 62, 17, 'F']];
var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];


data = [[15, 10, 20, 'A'], [0, 10, 15, 'B'], ];

data = echarts.util.map(data, function (item, index) {
    return {
        value: item,
        itemStyle: {
            color: colorList[index]
        }
    };
});

function renderItem(params, api) {
    var xValue = api.value(2);
    var start = api.coord([0,api.value(0)+api.value(1), ]);
    var size = api.size([api.value(2),api.value(1), ]);
    var style = api.style();

    return {
        type: 'rect',
        shape: {
            x: start[0],
            y: start[1],
            width: size[0],
            height: size[1]
        },
        style: style
    };
}

option = {
    title: {
        text: 'Profit',
        left: 'center'
    },
    tooltip: {
    },
    xAxis: {
        scale: true
    },
    yAxis: {
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        label: {
            show: true,
            position: 'top'
        },
        dimensions: ['from', 'to', 'profit'],
        encode: {
            x: [0, 1],
            y: 2,
            tooltip: [0, 1, 2],
            itemName: 3
        },
        data: data
    }]
};

but to me I can't think of anything, how to enter function renderItem (params, api)

Help Who Canbut to me I can't think of anything, how to enter function renderItem (params, api)

Help Who Can

[Okladnoj]

It turned out to transfer functions inside the code, but they do not work on the flutter

option = {
    xAxis: {
    },
    yAxis: {
    },
    series: [
        {
            type: 'custom',
            renderItem: (params, api)=> {
                var xValue = api.value(2);
                var start = api.coord([0, api.value(0)+api.value(1),]);
                var size = api.size([api.value(2), api.value(1),]);
                return {
                    type: 'rect',
                    shape: {
                        x: start[0],
                        y: start[1],
                        width: size[0],
                        height: size[1],
                    },
                    style:  api.style(),
                };
            },
            dimensions: [],
            encode: {
                x: [0, 1],
                y: 2,
            },
            data: [
                {value:[42, 5, 125, 'A'],itemStyle: {color: '#0081bd'}},
                {value:[39, 3, 125, 'B'],itemStyle: {color: '#ff0000'}},
                ],
        }
    ]
};

[Okladnoj]

So it also does not work:

[entronad]

We recommand the Flutter charting library Graphic as alternative.

It has a better custom shape system

[cn1001wang]

do you solve this issue? I also run into this problem. my code is success in html, but it didn't work in flutter. I think he probably did not quote the package "custom"

[cn1001wang]

do you solve this issue? I also run into this problem. my code is success in html, but it didn't work in flutter. I think he probably did not quote the package "custom"

My guess is wrong.flutter_echarts quote custom, echartsScript has custom package

[cn1001wang]

I slove this issue.

var option={
  "serires":[
        {...,
        "data":[],
        "renderItem": "renderItemFunction",
       }
    ]
}

var str = json.encode(_op);
var renderFunc="""function(params,api){return{}}"""
var optionStr=str.replaceAll("\"renderItemFunction\"", renderFunc);