前言
前一段时间,就在苦恼flutter的图标问题,今天逛github的时候,发现有人开发了一个插件来对接echert
准备工具
这套课程是采用VScode进行开发的。当前在此之前请准备好Flutter开发环境,我这里就不进行讲解了。
实现界面
首先是一个列表的展示
实例代码分析
这个实例使用到了flutter_echart插件。到pubspec.yaml中
dev_dependencies:
flutter_test:
sdk: flutter
flutter_echart:
git:
url: git://github.com/furuiCQ/flutter_echart.git
放置echart的文件
新建一个assets文件夹,里面放置echart.html,到pubspec.yaml中
assets:
- assets/echart.html
主文件编写
import 'package:flutter/material.dart';
import 'package:flutter_echart/flutter_echart.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
var option = {
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {"type": "value"},
"series": [
{
"data": [820, 932, 901, 934, 1290, 1330, 1320],
"type": "line"
}
]
};
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Native WebView as Widget'),
),
body: new SingleChildScrollView(
child: new Column(
children: <Widget>[
new Text('Native WebView as Widget\n\n'),
new Container(
child: EchartView(height: 300, data: option),
height: 300.0,
width: 500.0,
),
],
),
)),
);
}
}
这篇博客是要是给大家分享这个插件,插件地址,我已经给GitHub编写者一个star,鼓励他继续开发这个插件。