flutter使用echarts

echarts 配置参数跟 web 配置是一样,可以参考web 端官网 来配置,flutter_echarts 采用的是 webview 来加载 html,所以需要安装webview_flutter

1.引入依赖

dart 复制代码
dependencies:
  flutter_echarts: ^0.0.1
  webview_flutter: ^0.3.20+3

3.使用

onLoad 回调可以获取到 webview 的 controller,通过 controller 来调用 js 方法

例如调用_controller?.reload() 就可以实现重新渲染图表

dart 复制代码
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:math' as math;

class TodayEcharts extends StatefulWidget {
  const TodayEcharts({super.key});

  @override
  State<TodayEcharts> createState() => _TodayEchartsState();
}

class _TodayEchartsState extends State<TodayEcharts> {
  late  WebViewController _controller;
  List<Map<String, Object>> _data1 = [
    {'name': 'Please wait', 'value': 0}
  ];

  getData1() async {
    await Future.delayed(const Duration(seconds: 4));
    List<Map<String, Object>> dataObj = [];
    for (var i = 0; i < 7; i++) {
      int randomInt = math.Random().nextInt(100);
      dataObj.add(
        {
          'name': 'Jan$i',
          'value': randomInt,
        },
      );
    }
    if (mounted) {
      setState(() {
        _data1 = dataObj;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    getData1();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    List nameList = _data1.map((item) => item['name']).toList();
    List valueList = _data1.map((item) => item['value']).toList();
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: 450,
      child: Echarts(
        option: jsonEncode({
          "legend": {
            "x": 'center',
            "y": 'bottom',
            "show": true,
            "textStyle": {
              //图例的公用文本样式。
              "fontSize": 14,
              "color": "#333",
            },
            "itemGap": 20, //图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
            "data": ['项目金额(万元)', '项目数量'], //图例的数据数组。
            "inactiveColor": '#ccc',
          },
          "xAxis": {
            //X轴数据
            "type": "category",
            "data": nameList,
          },
          "yAxis": [
            {
              //Y轴数据
              "type": "value",
              "splitNumber": "5",
              "name": "万元",
              "axisLabel": {
                "color": '#027eff' // 修饰刻度标签的颜色
              },
              "nameTextStyle": {
                "color": "#027eff",
              }
            },
            {
              "type": 'value',
              "min": '0', //最小坐标
              "max": '12', //最大坐标
              "splitLine": {
                "show": false //是否显示分隔线。
              },
              "name": "个",
              "axisLabel": {
                "color": '#FF9800' // 修饰刻度标签的颜色
              },
              "nameTextStyle": {
                "color": "#FF9800",
              }
            }
          ],
          "series": [
            {
              //对应点得值
              "name": "项目金额(万元)",
              "data": valueList,
              "barWidth": '50%',
              "type": "bar",
              "itemStyle": {
                "normal": {
                  "barBorderRadius": 0,
                  "color": {
                    "type": 'linear',
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [
                      {
                        "offset": 0,
                        "color": '#00feff',
                      },
                      {
                        "offset": 1,
                        "color": '#027eff',
                      },
                      {
                        "offset": 1,
                        "color": '#0286ff',
                      },
                    ],
                  },
                },
              }
            },
          ],
        }),
        extraScript: '''
                    chart.on('click', (params) => {
                      if(params.componentType === 'series') {
                        Messager.postMessage(JSON.stringify({
                          type: 'select',
                          payload: params.dataIndex,
                        }));
                      }
                    });
                  ''',
        onLoad: (controller){
          _controller = controller;
        },
        reloadAfterInit: true,
        onMessage: (message) {
          print("点击图形信息$message");
        },
      ),
    );
  }
}
相关推荐
佚名猫9 分钟前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z11 分钟前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu13 分钟前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
鱼樱前端14 分钟前
Vue3结合three和babylonjs实现3D数字展厅效果
前端·vue.js
Themberfue17 分钟前
Vue ⑥-路由
前端·javascript·vue.js
whatever who cares19 分钟前
React hook之useRef
前端·javascript·react.js
kooboo china.28 分钟前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解
前端·css·人工智能·编辑器·html·交互
天涯学馆31 分钟前
工厂模式在 JavaScript 中的深度应用
前端·javascript·面试
crary,记忆37 分钟前
Angular中Webpack与ngx-build-plus 浅学
前端·webpack·angular·angular.js
烛阴1 小时前
告别原生Cookie:js-cookie如何实现Cookie的优雅管理
前端·javascript