Flutter syncfusion_flutter_charts 饼图PieSeries使用

最新推荐文章于 2024-06-29 00:28:00 发布

feiyue0823

最新推荐文章于 2024-06-29 00:28:00 发布

阅读量4.1k

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/feiyue0823/article/details/121956521

版权

Flutter 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

Flutter Widgets API Documentation | SyncfusionLearn here all about Syncfusion Flutter Widgets API Documentation and their API reference links for each widget.https://help.syncfusion.com/flutter/introduction/api-reference

pubspec.yaml引用

syncfusion_flutter_charts: ^19.3.56

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

class AnalysisCustomerPage extends StatefulWidget {
  @override
  _AnalysisCustomerPageState createState() => _AnalysisCustomerPageState();
}

class _AnalysisCustomerPageState extends State<AnalysisCustomerPage> {
  List<ChartData> customerData = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    customerData.add(ChartData('一般挽留客户', 1, rate: 1/36));
    customerData.add(ChartData('一般保持客户', 2, rate: 2/36));
    customerData.add(ChartData('一般发展客户', 3, rate: 3/36));
    customerData.add(ChartData('一般价值客户', 4, rate: 4/36));
    customerData.add(ChartData('重要挽留客户', 5, rate: 5/36));
    customerData.add(ChartData('重要保持客户', 6, rate: 6/36));
    customerData.add(ChartData('重要发展客户', 7, rate: 7/36));
    customerData.add(ChartData('重要价值客户', 8, rate: 8/36));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: [
        Container(
          height: 350,
          child: SfCircularChart(
            title: ChartTitle(text: '客户分类占比'),
            // 显示图例，position显示所在位置
            legend: Legend(isVisible: true, position: LegendPosition.right),
            series: <CircularSeries>[
              PieSeries<ChartData, String>(
                dataSource: customerData,
                // 数据块颜色
                pointColorMapper: (ChartData data, _) => data.color,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y,
                // 显示数据
                dataLabelMapper: (ChartData data, _) =>
                (data.rate * 100).toInt().toString() + '%',
                // 显示数据标签
                dataLabelSettings: DataLabelSettings(isVisible: true),
              ),
            ],
          ),
        )
      ],
    );
  }
  
}

class ChartData {
  ChartData(this.x, this.y, {this.color, this.rate});

  final String x;
  final double y;
  final double rate;
  final Color color;
}