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");
        },
      ),
    );
  }
}
相关推荐
MiyueFE4 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子8 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~36 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了38 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_40 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计