一、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>
View Code
将html文件拷贝到“Resources\Raw”下，注意生成操作为MauiAsset。
2、添加文件
需要在项目中“Resources\Raw”下添加ECharts必须的js
2.1从 GitHub 获取ECharts源码，网址：https://github.com/apache/echarts
在dist文件夹下找到echarts.js文件和dark.js文件
2.2 从Download jQuery | jQuery页面中下载最新jquery-3.7.1.js文件
2.3将以上三个文件拷贝到“Resources\Raw”目录下，注意生成操作为MauiAsset。
3、运行项目
运行成功，页面加载就能看到ECharts示例图了。
标签：echarts,html,可视化,MAUI,js,data,ECharts,页面 From： https://www.cnblogs.com/sanxinmi/p/17867765.html