Flutter Pie Chart, Bar Chart, Split Line Chart

flutter_echart

A new Flutter package.

Getting Started

You can follow the public account: my big front-end career to get the latest technology sharing
You can follow NetEase Cloud Classroom:
You can follow the blog:
Watermelon video
Know almost

In the world of programmers, the beautiful application experience comes from the programmer’s handling of details and the realm of self-requirements. Young people are also members of the busy programmers, leaving some footprints every day and every week. It is the content of these creations, there is a kind of persistence, that is, I don’t know why, if you are confused, you might as well take a look at the track of the code farmers.

1 Introduction

flutter_echart is a chart function based on the Flutter Canvas drawing idea. It supports pie charts, histograms, and split charts. On 2020-12-02, update version 1.0.1 and publish dynamic pie charts to the pub warehouse . The address is as follows:

https : // pub.flutter-io.cn/packages/flutter_echart

You can directly add dependencies to the Flutter project as follows:

dependencies : 
  flutter_echart :  ^ 1.0 . 0

Then load the dependencies

flutter pub get

Then guide the package where it is used as follows:

Import  'Package: flutter_echart / flutter_echart.dart' ;

1 Pie chart

First, you need to have pie chart data, flutter_echart provides an EChartPieBean object to encapsulate the data.

1.1 Definition of EChartPieBean

class  EChartPieBean {
   // User-defined data
  dynamic id;
  // The text displayed on the line 
  String title;
   // The proportion occupied by the current value 
  int number;
   // The color of the current pie 
  Color color;
   // Internal use
  bool isClick;

  EChartPieBean (
      { this . id ,
       this . title ='',
       this . number = 100 ,
       this . color = Colors . blue ,
       this . isClick = false });
}

1.2 Basic usage of pie chart

First define the data

  List< EChartPieBean > _dataList = [
    EChartPieBean(title :  " Living Expenses " , number :  200 , color :  Colors . LightBlueAccent),
    EChartPieBean(title :  " Play Fee " , number :  200 , color :  Colors . DeepOrangeAccent),
    EChartPieBean(title :  " Traffic Fee " , number :  400 , color :  Colors . Green),
    EChartPieBean(title :  " Loan Fee " , number :  300 , color :  Colors . Amber),
    EChartPieBean(title :  " Phone Charge " , number :  200 , color :  Colors . Orange),
  ];

As shown in the figure below, it is displayed as an animation: the corresponding code is as follows:

  PieChatWidget buildPieChatWidget() {
     return PieChatWidget(
      dataList : _dataList,
       // whether the output log 
      isLog :  to true ,
       // whether background 
      IsBackground :  to true ,
       // whether to draw a straight line 
      isLineText :  to true ,
       // background 
      bgColor :  Colors . White,
       // whether to display the contents of the foremost 
      isFrontgText :  true ,
       // Select the enlarged block by default 
      initSelect :  1 ,
       //The first display expands 
      openType in an animated manner:  OpenType . ANI ,
       // Rotation type 
      loopType :  LoopType . DOWN_LOOP ,
       // Click callback 
      clickCallBack : ( int value) {
        print( " Current click shows $value " );
      },
    );
  }

The initSelect attribute is the default selection of pie slices displayed in enlargement. When this value is -2, there will be no enlargement effect

When the isBackground property is false, the effect is as follows:

When isLineText is false:

When isFrontgText is false:

1.3 Pie chart interaction

Use the attribute loopType to configure:

// Pie chart interactive 
enum  LoopType {
   // No interaction 
  NON ,
   // Enlarge 
  DOWN when pressed ,
   // Press to move to enlarge 
  MOVE ,
   // Press to rotate 
  DOWN_LOOP ,
   // Auto rotate 
  AUTO_LOOP ,
}

Value is no interaction LoopType.NON value of LoopType.DOWN Zoom, the following: value of the finger will be amplified in the LoopType.MOVE pie contact range, as follows: value of LoopType.DOWN_LOOP finger Press Rotate as follows:

The value is LoopType.AUTO_LOOP automatically rotates in a loop, and the finger stops rotating when pressed:

Not limited to thinking, not limited to language restrictions, is the highest state of programming.

With the character of the editor, I must record a set of videos, which will be uploaded later

Interested you can look young watermelon early video —

Download Details:

Author: zhaolongs

Source Code: https://github.com/zhaolongs/flutter_echart

#flutter #dart #mobile-apps