Flutter最强大的图表库fl_chart的使用

  _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;
  }