Quick.Blazor.ECharts
1.0.0
dotnet add package Quick.Blazor.ECharts --version 1.0.0
NuGet\Install-Package Quick.Blazor.ECharts -Version 1.0.0
<PackageReference Include="Quick.Blazor.ECharts" Version="1.0.0" />
paket add Quick.Blazor.ECharts --version 1.0.0
#r "nuget: Quick.Blazor.ECharts, 1.0.0"
// Install Quick.Blazor.ECharts as a Cake Addin #addin nuget:?package=Quick.Blazor.ECharts&version=1.0.0 // Install Quick.Blazor.ECharts as a Cake Tool #tool nuget:?package=Quick.Blazor.ECharts&version=1.0.0
Quick.Blazor.ECharts
介绍
Blazor版本的ECharts图表组件
重新出发
本项目源自https://github.com/lishewen/Blazor.ECharts,由于原作者有好长一段时间没有更新和处理PR,故在此基础上,重新做了这个
开源地址:https://github.com/aaasoft/Quick.Blazor.ECharts
ECharts配置请参考:
https://echarts.apache.org/examples/zh/index.html
使用方式
- 创建Blazor项目。
- 在NuGet中安装包
Quick.Blazor.ECharts
。 - 在
_Imports.razor
中添加@using Blazor.ECharts.Components
。 - 在
wwwroot/index.html
文件的Head
中引入:
<script src="https://lib.baomitu.com/echarts/5.3.3/echarts.min.js"></script>
需要使用地图相关功能的则需要额外添加地图js的引用
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=[Your Key Here]"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
- 在
wwwroot/index.html
文件的Body
中引入:
<script type="module" src="_content/Quick.Blazor.ECharts/core.js"></script>
- 修改
Program.cs
增加
builder.Services.AddECharts();
- 在页面中使用组件(可参考Demo项目)。
注意:因为没有设置默认的样式,所以需要在组件上设置Class
或者Style
来控制宽度和高度
Demo中也提供示范样式
.chart-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 0px;
padding-top: 0px;
height: 95%;
width: 95%;
}
.chart-normal {
border-radius: 4px;
height: 300px;
width: 400px;
margin-top: 20px;
}
.chart-fill {
width: 100%;
height: 720px;
margin-top: 20px;
margin-right: 20px;
}
JS function的输出问题
由于function不是json的标准数据类型,所以json数据中若含function,则转换后,function会丢失。此库为解决这个问题通过JFuncConverter
来实现转译输出。使用时传入一个JFunc
对象即可。例如:
Position = new JFunc()
{
RAW = """
function (pt) {
return [pt[0], '10%'];
}
"""
}
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.31)
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.20)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.6)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on Quick.Blazor.ECharts:
Package | Downloads |
---|---|
Quick.Blazor.ECharts.WordCloud
Blazor版本的ECharts词云组件 开源地址:https://github.com/lishewen/Blazor.ECharts 使用方式见Demo项目 |
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.0.0 | 175 | 7/4/2024 |
1.0.0-alpha2 | 91 | 7/4/2024 |
1.0.0-alpha1 | 87 | 7/4/2024 |