简介
fl_chart是Flutter中功能最全、最强大的图表库。在flutter中的地位相当于前端的echarts、android端的MPAndroidChart
支持常见的LineChart(折线图)、BarChart(柱状图)、PieChart(饼图)。
库地址：https://pub-web.flutter-io.cn/packages/fl_chart
简单使用
库文档提供了详细的api说明，但是太过形式主义，全是对参数的说明。
没有每种图的简单使用，只提供了例子代码，需要自己去看，对不熟悉的人非常不友好！
以下是我经过使用后整理出来的最快速使用的说明。
折线图
柱状图
_buildBarChart() { return BarChart( BarChartData( /// 格式线样子设置 gridData: FlGridData( /// 是否隐藏垂直线 drawVerticalLine: false, /// 水平线的间隔值 horizontalInterval: 10, /// 水平线样式 getDrawingHorizontalLine: (v) { return FlLine( color: Color(0xffe5e5e5), strokeWidth: 1, ); }, ), /// 边框样式 borderData: FlBorderData( border: const Border( top: BorderSide(width: 1), right: BorderSide(width: 1), left: BorderSide(width: 1), bottom: BorderSide(width: 1), )), /// y轴最大值，从0开始 maxY: maxYValue, /// Bar的数据集合及样式 barGroups: _generateBar(values), /// 只有在alignment为center时，groupsSpace才生效。否则会按宽度平分。 groupsSpace: 30, alignment: BarChartAlignment.center, /// 上下左右标题设置 titlesData: FlTitlesData( show: true, /// 左侧标题 leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)), /// 顶部标题 topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)), /// 底部标题 bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)), /// 右侧标题 rightTitles: AxisTitles( sideTitles: SideTitles( /// 是否显示标题 showTitles: true, /// 标题宽度 reservedSize: rightTitleWidth, /// 标题间隔 interval: 10, /// 返回标题Widget getTitlesWidget: (y, meta) { return SideTitleWidget( child: LayoutBuilder( builder: (ctx, constraint) { return SizedBox( width: constraint.maxWidth, child: CommonWidget.commonText( "${y.toInt() - 120}dBm", fontSize: 8, fontWeight: FontWeight.bold, color: Color(titleColor), textAlign: TextAlign.center, ), ); }, ), axisSide: meta.axisSide, space: 0, ); })), ), /// 点击bar时显示的内容 barTouchData: BarTouchData( touchTooltipData: BarTouchTooltipData( getTooltipItem: (group, groupIndex, rod, rodIndex) { final textStyle = TextStyle( color: rod.color, fontWeight: FontWeight.bold, fontSize: 14, ); return BarTooltipItem( (rod.toY - 120).toInt().toString(), textStyle); }), ), ), ); } _generateBar(List<SingleBandModel> list) { var bars = list<BarChartGroupData>.generate(5,(index) { /// 每个bar的数据 return BarChartGroupData( /// bar的x坐标 x: index, /// 支持多组bar barRods: [ BarChartRodData( /// y轴最小值 fromY: 0, /// y轴值 toY: y, /// bar的宽度 width: 20, /// bar颜色 color: progressColor, /// 渐变色。如果设置了渐变，color会失效。 gradient: LinearGradient(), /// 总进度条 backDrawRodData: BackgroundBarChartRodData( show: true, color: Color(0xffe5e5e5), toY: 80), ), ], ); }).toList(); return bars; }
