一步一步搭建Flutter开发架子-图表

·  阅读 660

说到图表,搜素了一下资料,看到有flutter_echarts库,顾名思义就是我们常用的echarts组件库。 既然有现成的库,直接用就好了。但是抱着学习的态度看了一下人家是怎么写插件的。分析一波

flutter_echarts插件 引入和具体的怎么使用先不说,着急的的直接上去看看哈传送门

最终目标就是自己也整个插件,跟着学习,理解这完成一个类似与flutter_echarts库的插件,很好理解,一看就会。 最终效果:

Simulator Screen Shot - iPhone 11 - 2021-03-11 at 14.16.59.png

创建Package包

// flutter_native_echart 是项目名称,
flutter create --org com.example --template=plugin flutter_native_echart
复制代码

完成之后,

WechatIMG179.png 如果遇到问题,跟着提示最终可以完成的。

分析代码

打开项目可以看到flutter_native_echart这个文件,先把文件内容都删除了。 本着echarts是基于webView显示的。 所以在pubspec.yaml文件中加入

webview_flutter: ^1.0.7
复制代码

flutter_native_echart.dart文件中引入

import 'package:webview_flutter/webview_flutter.dart';
复制代码

主要文件就是加载js,看flutter_echarts中的echarts_script.dart就是这个作用,这个我们直接去echarts官网下载最新的哈。新建一个文件放进去就OK

具体实现

大体上的思路就是通过 webView_flutter 的 evaluateJavascript方法,在页面加载完成之后进行处理。具体方式就是拼接字符串. 贴出来主要代码哈。

 WebViewController _controller;
 
 await _controller?.evaluateJavascript('''
      $echartJS
      var chart = echarts.init(document.getElementById('chart'), $themeStr);
      chart.setOption(${option}, true);
    ''');
复制代码

创建的插件会有一个example项目,可以运行看到项目运行结果. 直接代码全部贴出来

import 'package:flutter/material.dart';
import 'package:flutter_native_echart/flutter_native_echart.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(top: 30),
          child: Column(
            children: [
              this.renderEchartBei(),
              this.renderEchartBar(),
              this.renderEchartLine(),
            ],
          ),
        ),
      )),
    );
  }
}

复制代码

其中renderEchartBei(), renderEchartBar(), renderEchartLine()方法如下:

ECharts(
        option: '''
        {
        // 这个里面的内容去echarts官网看实例,代码贴进去就OK了
        
                    }
                  ''',
      ),
      width: 420,
      height: 300,
    );
复制代码

直接在echarts实例中把代码贴进去就可以了,感觉实现起来还是很不错的。 当然也可以发布一下自己的插件哈哈哈哈。。。

最后

flutter中使用CustomPainter可以画各种各样的图表。这就根据页面具体要求具体设置了。当然我也在学习中,当然工作中还有什么需要集成的项目中的,一边积累一边封装

one more things。。。。。。

  • 找一个app,仿着做一个项目(具体哪一个还没想好)
分类:
Android
标签: