entronad / flutter_echarts

A Flutter widget to use Apache ECharts in a reactive way.

Home Page:https://pub.dev/packages/flutter_echarts

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scatter chart not show/ blank

wiztensai opened this issue · comments

I think my code is true. but i dont know why its blank. can you help me?

Widget:

Container(              
              child: Echarts(
                reloadAfterInit: true,
                option: '''
    {
      xAxis : [
        {        
            name: 'Tahun',
            type: 'time',
            axisLabel: {              
              formatter: {
              year: '{yyyy}',
              month: '',
              day: '',
              hour: '',
              minute: '',
              second: '',
              millisecond: '',
              none: '{yyyy}'
            },                            
              interval: 1,                
            },
        }
      ],
      
      yAxis: {
        type: 'value'
      },
      
      series:
      [{
        data: ${jsonEncode(getCoords())},
        type: 'scatter',
        symbolSize: 24,
        markPoint: {
          symbol: 'pin',
          symbolSize: 24,
          data: [{ name: 'mark', value: 'tes', xAxis: '2016-11-30', yAxis: 400000000,
                  itemStyle: {
                    color: '#EADDCA',
                  }
                }]
        },
      }]
      
    }
''',
                extraScript: '''
                chart.on('click', (params) => {
                  if(params.componentType === 'series') {
                    Messager.postMessage(JSON.stringify({
                      type: 'select',
                      payload: params.dataIndex,                                    
                    }));
                  }
                });
''',
                onMessage: (String message) {
                  jsonDecode(message);
                  var messageAction =  new Map<String, dynamic>.from(json.decode(message));
                  print(messageAction);

                  if (messageAction['type'] == 'select') {
                    var index = messageAction["payload"];
                    _controller.animateToPage(index);
                  }
                },
              ),
              width: 400,
              height: 250,
            ) // container

Data:

var datas = [
  ['2015-01-31',500000000, "Hitam", 1250],
  ['2016-11-30',400000000, "Putih", 12300],
  ['2017-02-02',335000000, "Silver", 26520],
  ['2017-04-20',400000000, "Putih", 23200],
  ['2018-03-03',200000000, "Abu-Abu", 41513],
];

getCoords () {
  var axis = [];
  datas.forEach((element) {
    axis.add([element[0],element[1]]);
  });

  return axis;
}

although i put reloadAfterInit=true, its still blank/not showing chart. but after i put some delay to in build method, it show now.

Future.delayed(Duration(milliseconds: 100), () {
      setState(() {
        _show = true;
      });
});

I use android 11

although i put reloadAfterInit=true, its still blank/not showing chart. but after i put some delay to in build method, it show now.

Future.delayed(Duration(milliseconds: 100), () {
      setState(() {
        _show = true;
      });
});

I use android 11

I use too many time setState() where did you put show?

I meet the same problem and still blank after delay

Please try v2.5.0:

  • Upgrade webview_flutter to 4.2.4
  • Upgrade Echarts to 5.4.3
  • Upgrade SDK to >=2.12.0 <4.0.0