Flutter 餅狀圖、柱狀圖、拆線圖、Flutter動態餅圖、Flutter圖表 flutter_echart 開發文檔

在碼農的世界裏，優美的應用體驗，來源於程序員對細節的處理以及自我要求的境界，年輕人也是忙忙碌碌的碼農中一員，天天、每週，都會留下一些腳印，就是這些創做的內容，有一種執着，就是不知爲何，若是你迷茫，不妨來瞅瞅碼農的軌跡。

• 優美的音樂節奏帶你瀏覽這個效果的編碼過程
• 堅持每一天，是每一個有理想青年的追求
• 追尋年輕人的腳步，也許你的答案就在這裏

---

1 簡介

flutter_echart 是基於Flutter Canvas 繪圖思想實現的圖表功能，支持餅狀圖、柱狀圖、拆線圖，在2020-12-02 更新1.0.1版本，將動態餅狀圖發佈到 pub 倉庫，地址以下：

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

你們能夠直接在 Flutter 項目中添加依賴以下：

dependencies:
  flutter_echart: ^1.0.0

而後加載一下依賴

flutter pub get

而後在使用的地方導包以下：

import 'package:flutter_echart/flutter_echart.dart';

1 餅狀圖

首先須要有餅圖數據，flutter_echart提供了EChartPieBean對象來封裝數據。

1.1 EChartPieBean的定義

class EChartPieBean {
  //用戶自定義的數據
  dynamic id;
  //直線上顯示的文案
  String title;
  //當前數值佔用的比例
  int number;
  //當前餅狀的顏色
  Color color;
  //內部使用
  bool isClick;

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

1.2 餅圖基本使用

首先定義數據

List<EChartPieBean> _dataList = [
    EChartPieBean(title: "生活費", number: 200, color: Colors.lightBlueAccent),
    EChartPieBean(title: "遊玩費", number: 200, color: Colors.deepOrangeAccent),
    EChartPieBean(title: "交通費", number: 400, color: Colors.green),
    EChartPieBean(title: "貸款費", number: 300, color: Colors.amber),
    EChartPieBean(title: "電話費", number: 200, color: Colors.orange),
  ];

以下圖所示，以動畫的方式顯示：

對應代碼以下：

PieChatWidget buildPieChatWidget() {
    return PieChatWidget(
      dataList: _dataList,
      //是否輸出日誌
      isLog: true,
      //是否須要背景
      isBackground: true,
      //是否畫直線
      isLineText: true,
      //背景
      bgColor: Colors.white,
      //是否顯示最前面的內容
      isFrontgText: true,
      //默認選擇放大的塊
      initSelect: 1,
      //初次顯示以動畫方式展開
      openType: OpenType.ANI,
      //旋轉類型
      loopType: LoopType.DOWN_LOOP,
      //點擊回調
      clickCallBack: (int value) {
        print("當前點擊顯示 $value");
      },
    );
  }

initSelect 屬性爲默認選擇放大顯示的餅塊，當此值爲 -2 時，不會有放大效果

當 isBackground 屬性爲 false時，效果以下：

當 isLineText 爲false 時 ：

當 isFrontgText 爲false 時：

1.3 餅圖交互

使用 屬性 loopType 來配置：

//餅圖交互
enum LoopType {
  //無交互
  NON,
  //按下時放大
  DOWN,
  //按下移動放大
  MOVE,
  //按下旋轉
  DOWN_LOOP,
  //自動旋轉
  AUTO_LOOP,
}

取值爲 LoopType.NON 無任何交互

取值爲 LoopType.DOWN 點擊放大，以下：

取值爲 LoopType.MOVE 手指在餅圖觸點範圍內就會放大，以下：

取值爲 LoopType.DOWN_LOOP 手指按下可旋轉，以下：

取值爲 LoopType.AUTO_LOOP 自動循環旋轉，手指按下中止旋轉：

不侷限於思惟，不侷限語言限制，纔是編程的最高境界。

以小編的性格，確定是要錄製一套視頻的，隨後會上傳

有興趣 你能夠關注一下 西瓜視頻 — 早起的年輕人