Flutter 如何在颤振中创建阶跃折线图

如何创建步骤折线图，如下图所示

我试图搜索此图表，但找不到任何参考

---

我希望有人能帮我：）。

你可以复制粘贴运行下面的完整代码
您可以使用
它是

Webview

和

Javascript

base。 您可以使用

选项配置图表
字符串

步骤折线图示例

代码片段

Container(
                child: Echarts(
                  option: '''
                   {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Step Start', 'Step Middle', 'Step End']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true

工作演示


完整代码

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';

import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:number_display/number_display.dart';

final display = createDisplay(decimal: 2);

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  List<Map<String, Object>> _data1 = [
    {'name': 'Please wait', 'value': 0}
  ];

  getData1() async {
    await Future.delayed(Duration(seconds: 4));

    const dataObj = [
      {
        'name': 'Jan',
        'value': 8726.2453,
      },
      {
        'name': 'Feb',
        'value': 2445.2453,
      },
      {
        'name': 'Mar',
        'value': 6636.2400,
      },
      {
        'name': 'Apr',
        'value': 4774.2453,
      },
      {
        'name': 'May',
        'value': 1066.2453,
      },
      {
        'name': 'Jun',
        'value': 4576.9932,
      },
      {
        'name': 'Jul',
        'value': 8926.9823,
      }
    ];

    this.setState(() {
      this._data1 = dataObj;
    });
  }

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

    this.getData1();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('Echarts Demon'),
      ),
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: <Widget>[
              Container(
                child: Echarts(
                  option: '''
                   {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Step Start', 'Step Middle', 'Step End']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Step Start',
            type: 'line',
            step: 'start',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'Step Middle',
            type: 'line',
            step: 'middle',
            data: [220, 282, 201, 234, 290, 430, 410]
        },
        {
            name: 'Step End',
            type: 'line',
            step: 'end',
            data: [450, 432, 401, 454, 590, 530, 510]
        }
    ]
}                  ''',
                  extraScript: '''
                    chart.on('click', (params) => {
                      if(params.componentType === 'series') {
                        Messager.postMessage(JSON.stringify({
                          type: 'select',
                          payload: params.dataIndex,
                        }));
                      }
                    });
                  ''',
                  onMessage: (String message) {
                    Map<String, Object> messageAction = jsonDecode(message);
                    print(messageAction);
                    if (messageAction['type'] == 'select') {
                      final item = _data1[messageAction['payload']];
                      _scaffoldKey.currentState.showSnackBar(SnackBar(
                        content: Text(item['name'].toString() +
                            ': ' +
                            display(item['value'])),
                        duration: Duration(seconds: 2),
                      ));
                    }
                  },
                ),
                width: 300,
                height: 250,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

导入'dart:async'；
导入“dart:convert”；
进口“包装：颤振/材料.省道”；
进口“包装：颤振/颤振.飞镖”；
导入“package:number_display/number_display.dart”；
最终显示=创建显示（十进制：2）；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key}）：超级（Key:Key）；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
最终GlobalKey _scaffoldKey=新的GlobalKey（）；
列表_数据1=[
{'name'：'Please wait'，'value'：0}
];
getData1（）异步{
等待未来。延迟（持续时间（秒：4））；
常数dataObj=[
{
'姓名'：'一月'，
“值”：8726.2453，
},
{
'姓名'：'二月'，
“值”：2445.2453，
},
{
'姓名'：'三月'，
“值”：6636.2400，
},
{
'姓名'：'四月'，
“值”：4774.2453，
},
{
'姓名'：'五月'，
“值”：1066.2453，
},
{
'姓名'：'六月'，
“值”：4576.9932，
},
{
'姓名'：'七月'，
“值”：8926.9823，
}
];
此.setState（）{
这是._data1=dataObj；
});
}
@凌驾
void initState（）{
super.initState（）；
这是getData1（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
钥匙：_scaffoldKey，
appBar:appBar(
标题：文本（'Echarts Demon'），
),
背景颜色：Colors.white，
正文：SingleChildScrollView(
儿童：中心(
子：列(
儿童：[
容器(
孩子：埃切特(
选项：“”
{
标题：{
文本：“”
},
工具提示：{
触发器：“轴”
},
图例：{
数据：[‘步骤开始’、‘步骤中间’、‘步骤结束’]
},
网格：{
左：“3%”，
对:"4%",，
底部：“3%”，
标签：正确
},
工具箱：{
特色：{
saveAsImage:{}
}
},
xAxis：{
类型：'类别'，
数据：[周一、周二、周三、周四、周五、周六、周日]
},
亚克斯：{
类型：“值”
},
系列：[
{
名称：“步骤开始”，
键入：“行”，
步骤：“开始”，
数据：[120132101134 90230210]
},
{
名称：“中间步骤”，
键入：“行”，
步骤：“中间”，
数据：[220282201234290430410]
},
{
名称：“步骤结束”，
键入：“行”，
步骤：'结束'，
数据：[4504324014590530510]
}
]
}                  ''',
外部脚本：“”
在（'点击'，（参数）=>{
如果（params.componentType==='series'）{
Messager.postMessage（JSON.stringify({
键入：“选择”，
有效载荷：params.dataIndex，
}));
}
});
''',
onMessage：（字符串消息）{
Map messageAction=jsonDecode（消息）；
打印（消息操作）；
如果（messageAction['type']=='select'）{
最后一项=_data1[messageAction['payload']；
_scaffoldKey.currentState.showSnackBar（SnackBar(
内容：文本（项['name'].toString（）+
': ' +
显示（项['value']），
持续时间：持续时间（秒数：2），
));
}
},
),
宽度：300，
身高：250，
),
],
),
),
),
);
}
}
您的最佳选择可能是使用该软件包，并尝试将其重新调整为您想要的内容。否则，您可能必须自己实现它。@Abion47除了步骤行1:（，之间，谢谢您的支持：）之外，我还找到了许多其他图表的参考资料