Flutter 双纵轴柱图和折线图结合

SfCartesianChart class - charts library - Dart APIhttps://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev

pubspec.yaml引用

syncfusion_flutter_charts: ^19.3.56

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';/*** author: flymbp* created on: 12/30/21 10:53 AM* description:*/class TestPage extends StatefulWidget {@override_TestPageState createState() => _TestPageState();
}class _TestPageState extends State<TestPage> {List<ChartData> uidnumData;List<ChartData> ordernumData;List<ChartData> paymoneyData;@overridevoid initState() {// TODO: implement initStatesuper.initState();uidnumData = [ChartData('2021-01', 10),ChartData('2021-02', 20),ChartData('2021-03', 30),ChartData('2021-04', 25)];ordernumData = [ChartData('2021-01', 15),ChartData('2021-02', 40),ChartData('2021-03', 35),ChartData('2021-04', 50)];paymoneyData = [ChartData('2021-01', 20000),ChartData('2021-02', 40000),ChartData('2021-03', 30000),ChartData('2021-04', 60000)];}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn SfCartesianChart(primaryXAxis: CategoryAxis(isVisible: true,//显示时间轴置顶opposedPosition: false,//时间轴反转isInversed: false,labelRotation: -45,),//标题title: ChartTitle(text: '活跃客户'),//选中类型selectionType: SelectionType.series,//时间轴与值轴换位isTransposed: false,//选中手势selectionGesture: ActivationMode.singleTap,// //图示legend: Legend(isVisible: true,iconHeight: 10,iconWidth: 10,//切换系列显示toggleSeriesVisibility: true,//图示显示位置position: LegendPosition.bottom,overflowMode: LegendItemOverflowMode.wrap,//图示左右位置alignment: ChartAlignment.center),//打开工具提示tooltipBehavior: TooltipBehavior(enable: true,shared: true,activationMode: ActivationMode.singleTap,),axes: <ChartAxis>[NumericAxis(name: 'yAxis',opposedPosition: true, //在右侧显示title: AxisTitle(text: '金额(元)'))],series: <ChartSeries<ChartData, String>>[ColumnSeries<ChartData, String>(name: '人数',dataSource: uidnumData,xValueMapper: (ChartData sales, _) => sales.x,yValueMapper: (ChartData sales, _) => sales.y,),ColumnSeries<ChartData, String>(name: '订单数',dataSource: ordernumData,xValueMapper: (ChartData sales, _) => sales.x,yValueMapper: (ChartData sales, _) => sales.y,//显示数据标签dataLabelSettings: DataLabelSettings(isVisible: true,),),LineSeries<ChartData, String>(name: '金额',dataSource: paymoneyData,xValueMapper: (ChartData sales, _) => sales.x,yValueMapper: (ChartData sales, _) => sales.y,//修饰数据点(显示圆圈)markerSettings: MarkerSettings(isVisible: true),yAxisName: 'yAxis'),]);}
}class ChartData {ChartData(this.x, this.y, [this.color]);final String x;final double y;final Color color;
}

Flutter syncfusion_flutter_charts 饼图PieSeries使用Flutter syncfusion_flutter_charts 横向条状图BarSeries使用