1.导入依赖
fl_chart: ^0.12.2
如果你想进一步了解这个插件的话，可以去看一下它的源码。框架地址
关于如何导入依赖步骤如图所示：
pubspec.yaml文件->在dependencies下面添加依赖->点击pub get
在这里插入图片描述
如果想了解饼图怎么实现，可以看一下这篇文章点击
2.折线图
1.一条折线图
1.效果图
在这里插入图片描述
2.主要代码
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
void main(){
runApp(
MaterialApp(home: LineChartSample2(),)
);
}
class LineChartSample2 extends StatefulWidget {
@override
_LineChartSample2State createState() => _LineChartSample2State();
}
class _LineChartSample2State extends State {
List gradientColors = [
const Color(0xff23b6e6),
const Color(0xff02d39a),
];
@override
Widget build(BuildContext context) {
return Center(
child: Stack(
children: [
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18),
),
color: Color(0xff232d37)),
child: Padding(
padding: const EdgeInsets.only(right: 12.0, left: 12.0, top: 24, bottom: 12),
child: LineChart(
mainData(),
),
),
),
Positioned(
top: 5,
left: 5,
child: Text(
'访问量',
style: TextStyle(
fontSize: 12, color: Colors.white,decoration: TextDecoration.none),
),
)
],
),
);
}
LineChartData mainData() {
return LineChartData(
gridData: FlGridData(
show: true,
drawVerticalLine: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
getDrawingVerticalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
getTextStyles: (value) =>
const TextStyle(color: Color(0xff68737d), fontWeight: FontWeight.bold, fontSize: 16),
getTitles: (value) {
if(value.toInt()%2==0){
return value.toInt().toString()+'月';
}
return '';
},
margin: 8,
),
leftTitles: SideTitles(
showTitles: true,
getTextStyles: (value) => const TextStyle(
color: Color(0xff67727d),
fontWeight: FontWeight.bold,
fontSize: 15,
),
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '10k';
case 3:
return '30k';
case 5:
return '50k';
}
return '';
},
reservedSize: 28,
margin: 12,
),
),
borderData:
FlBorderData(show: true, border: Border.all(color: const Color(0xff37434d), width: 1)),
minX: 0,
maxX: 11,
minY: 0,
maxY: 6,
lineBarsData:linesBarData1(),
);
}
List linesBarData1() {
final LineChartBarData lineChartBarData1 = LineChartBarData(
spots: [
FlSpot(0, 3),
FlSpot(2.6, 2),
FlSpot(4.9, 5),
FlSpot(6.8, 3.1),
FlSpot(8, 4),
FlSpot(9.5, 3),
FlSpot(11, 4),
],
isCurved: true,
colors: gradientColors,
barWidth: 5,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
colors: gradientColors.map((color) => color.withOpacity(0.3)).toList(),
),
);
return [lineChartBarData1];
}
}
3.代码解析
LineChartData的属性：
| 属性 | 功能 |
|---|---|
| gridData | 网格线的自定义（下面对gridData属性的详细解释） |
| titlesData | 自定义x,y轴的坐标的标题（下面有对titlesData属性的详细解释） |
| borderData | FlBorderData来设置边框的大小和颜色 |
| minX | x轴的起点 |
| maxX | x轴的终点 |
| minY | y轴的起点 |
| maxY | y轴的终点 |
| lineBarsData | 通过LineChartBarData对折线进行自定义 |
gridData的属性：
| 属性 | 功能 |
|---|---|
| show | 是否显示网格线 |
| drawVerticalLine | 是否显示垂直方向的网格线 |
| getDrawingHorizontalLine | 通过FlLine来自定义水平方向线的颜色、大小等 |
| getDrawingVerticalLine | 通过FlLine来自定义垂直方向线的颜色、大小等 |
titilesData的属性：
| 属性 | 功能 |
|---|---|
| show | 是否显示x,y轴的坐标的标题 |
| bottomTitles | 定义X轴的标题 |
| leftTitles | 定义y轴的标题 |
LineChartBarData的属性：
| 属性 | 功能 |
|---|---|
| spots | 设置各点的横纵坐标 |
| isCurved | 是否线绘制成曲线 |
| colors | 曲线的颜色 |
| barWidth | 曲线的粗细 |
| isStrokeCapRound | 确定线帽的形状 |
| dotData | 显示结点 |
| belowBarData | 折线图向下填满的颜色 |
2.多条折线图
效果如图所示：
在这里插入图片描述
实现起来比较简单，代码如下：
List linesBarData1() {
final LineChartBarData lineChartBarData1 = LineChartBarData(
spots: [
FlSpot(0, 3),
FlSpot(2.6, 2),
FlSpot(4.9, 5),
FlSpot(6.8, 3.1),
FlSpot(8, 4),
FlSpot(9.5, 3),
FlSpot(11, 4),
],
isCurved: true,
colors: gradientColors,
barWidth: 5,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
colors: gradientColors.map((color) => color.withOpacity(0.3)).toList(),
),
);
final LineChartBarData lineChartBarData2 = LineChartBarData(
spots: [
FlSpot(0, 1),
FlSpot(2.6, 2.8),
FlSpot(4.9, 1.2),
FlSpot(6.8, 2.8),
FlSpot(8, 2.6),
FlSpot(9.5, 3.9),
FlSpot(11, 3),
],
isCurved: true,
colors: [
const Color(0xffaa4cfc),
],
barWidth: 5,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(show: true,
colors: gradientColors.map((color) => color.withOpacity(0.3)).toList(),
),
);
return [lineChartBarData1,lineChartBarData2];
就是在原来的基础上，多添加一个LineChartBarData曲线。