Flutter开发--------数据图表处理(一)

前言

现在很多的东西都和大数据结合起来，因此许许多多的app里面也要做数据图表的处理。今天博主就在这里分享一个插件，也是最近才发现的。感觉比之前分享的结合echarts好多了。

实现效果

1.折现数据图

实例代码分析

引入插件

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  syncfusion_flutter_charts: ^1.0.0-beta.1			//数据图表插件

具体的代码

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';



SfCartesianChart getDefaultLineChart(bool isTileView) {
  return SfCartesianChart(
    plotAreaBorderWidth: 0,
    title: ChartTitle(text: '店铺销售数据'),
    legend: Legend(
        isVisible: isTileView ? false : true,
        overflowMode: LegendItemOverflowMode.wrap),
    primaryXAxis: NumericAxis(
        edgeLabelPlacement: EdgeLabelPlacement.shift,
        interval: 5,
        majorGridLines: MajorGridLines(width: 0)),
    primaryYAxis: NumericAxis(
        labelFormat: '{value}%',
        axisLine: AxisLine(width: 0),
        majorTickLines: MajorTickLines(color: Colors.transparent)),
    series: getLineSeries(isTileView),
    tooltipBehavior: TooltipBehavior(enable: true),
  );
}

List<LineSeries<_ChartData, num>> getLineSeries(bool isTileView) {
  final List<_ChartData> chartData = <_ChartData>[
    _ChartData(2005, 21, 28),
    _ChartData(2006, 24, 44),
    _ChartData(2007, 36, 48),
    _ChartData(2008, 38, 50),
    _ChartData(2009, 54, 66),
    _ChartData(2010, 57, 78),
    _ChartData(2011, 70, 84),
    _ChartData(2012, 50, 60),
    _ChartData(2013, 88, 70),
    _ChartData(2014, 60, 40),
    _ChartData(2015, 80, 60),
    _ChartData(2016, 40, 50),
    _ChartData(2017, 20, 10),
    _ChartData(2018, 90, 100),
    _ChartData(2019, 30, 50),
  ];
  return <LineSeries<_ChartData, num>>[
    LineSeries<_ChartData, num>(
        animationDuration: 2500,
        enableTooltip: true,
        dataSource: chartData,
        xValueMapper: (_ChartData sales, _) => sales.x,
        yValueMapper: (_ChartData sales, _) => sales.y,
        width: 2,
        name: 'Germany',
        markerSettings: MarkerSettings(isVisible: true)),
    LineSeries<_ChartData, num>(
        animationDuration: 2500,
        enableTooltip: true,
        dataSource: chartData,
        width: 2,
        name: 'England',
        xValueMapper: (_ChartData sales, _) => sales.x,
        yValueMapper: (_ChartData sales, _) => sales.y2,
        markerSettings: MarkerSettings(isVisible: true)),
  ];
}

class _ChartData {
  _ChartData(this.x, this.y, this.y2);
  final double x;
  final double y;
  final double y2;
}

这个插件刚刚出现不久，今天看到了研究一下感觉挺不错的。和大家分享一下。插件GitHub地址