MAUI中使用ECharts数据可视化显示-526互联

一、ECharts简介

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，ECharts 遵循 Apache-2.0 开源协议，免费商用。

官网：https://echarts.apache.org/zh/index.html

示例论坛：https://www.makeapie.cn/echarts

二、MAUI中使用ECharts方法

1、项目引用方式

1.1 ContentPage中要首先引用WebView控件，通过WebView控件来加载本地html页面使用ECharts。

        <WebView Grid.Row="1" Source="localfile.html" />

1.2 html页面内容如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1" />
    <title></title>
</head>
<body>
    <!--<h1>html页面</h1>-->
    <div id="main" style="width: 50%; height: 500px; margin-left: -8px " />
    <script src="echarts.js"></script>
    <script src="dark.js"></script>
    <script src="jquery-3.7.1.js"></script>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun'];
        const data = axisData.map(function (item, i) {
            return Math.round(Math.random() * 1000 * (i + 1));
        });
        const links = data.map(function (item, i) {
            return {
                source: i,
                target: i + 1
            };
        });
        links.pop();
        option = {
            title: {
                text: 'Graph on Cartesian'
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: axisData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'graph',
                    layout: 'none',
                    coordinateSystem: 'cartesian2d',
                    symbolSize: 40,
                    label: {
                        show: true
                    },
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    data: data,
                    links: links,
                    lineStyle: {
                        color: '#2f4554'
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    </script>
</body>
</html>