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

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

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

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

创建Package包

// flutter_native_echart 是项目名称，
flutter create --org com.example --template=plugin flutter_native_echart

完成之后，

如果遇到问题，跟着提示最终可以完成的。

分析代码

打开项目可以看到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，仿着做一个项目(具体哪一个还没想好)