Blazor.ECharts
1.0.4
dotnet add package Blazor.ECharts --version 1.0.4
NuGet\Install-Package Blazor.ECharts -Version 1.0.4
<PackageReference Include="Blazor.ECharts" Version="1.0.4" />
paket add Blazor.ECharts --version 1.0.4
#r "nuget: Blazor.ECharts, 1.0.4"
// Install Blazor.ECharts as a Cake Addin #addin nuget:?package=Blazor.ECharts&version=1.0.4 // Install Blazor.ECharts as a Cake Tool #tool nuget:?package=Blazor.ECharts&version=1.0.4
Blazor.ECharts
介绍
Blazor版本的ECharts图表组件
重新出发
本项目源自https://github.com/caopengfei/BlazorECharts,由于原作者有好长一段时间没有更新和处理PR,故在此基础上,重新做了这个
开源地址:https://github.com/lishewen/Blazor.ECharts
国内镜像:https://gitee.com/lishewen/Blazor.ECharts
ECharts配置请参考:
https://echarts.apache.org/examples/zh/index.html
使用方式
- 创建Blazor项目。
- 在NuGet中安装包
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/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%'];
}
"""
}
功能实现进度
- 公共配置
- title
- legend
- grid(部分)
- xAxis(部分)
- yAxis(部分)
- polar(部分)
- radiusAxis(部分)
- angleAxis(部分)
- radar(部分)
- dataZoom
- visualMap(部分)
- tooltip(部分)
- axisPointer(部分)
- toolbox(部分)
- brush
- geo
- parallel
- parallelAxis
- singleAxis
- timeline
- graphic
- calendar
- dataset
- aria
- series(部分)
- color
- backgroundColor
- textStyle
- animation
- animationThreshold
- animationDuration
- animationEasing
- animationDelay
- animationDurationUpdate
- animationEasingUpdate
- animationDelayUpdate
- blendMode
- hoverLayerThreshold
- useUTC
- 图表
- 折线图(部分)
- 柱状图(部分)
- 饼图(部分)
- 散点图(部分)
- 地理坐标/地图(部分)
- K线图(部分)
- 雷达图(部分)
- 盒须图
- 热力图
- 关系图(部分)
- 路径图(部分)
- 树图(部分)
- 矩形树图(部分)
- 旭日图(部分)
- 平行坐标系
- 桑基图(部分)
- 漏斗图(部分)
- 仪表盘(部分)
- 象形柱图
- 主题河流图
- 日历坐标系
- 词云图(使用方法:Blazor.ECharts.WordCloud/README.md)
Nuget Package中没有打包echarts.js的原因
- 减少包的体积
- 方便自由更换cdn
- 方便echarts小版本更新时,作者没有来得及更新Package内的js时,可自行在页面上更换
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 was computed. 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. net9.0 is compatible. |
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.36)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.11)
-
net9.0
- Microsoft.AspNetCore.Components.Web (>= 9.0.0)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on Blazor.ECharts:
Package | Downloads |
---|---|
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.4 | 145 | 11/18/2024 |
1.0.3 | 1,120 | 7/4/2024 |
1.0.2 | 874 | 3/17/2024 |
1.0.1 | 343 | 1/21/2024 |
1.0.0 | 411 | 1/10/2024 |
0.9.9 | 224 | 1/10/2024 |
0.9.8 | 708 | 11/17/2023 |
0.9.7 | 955 | 8/9/2023 |
0.9.6 | 260 | 7/26/2023 |
0.9.5 | 462 | 6/15/2023 |
0.9.4 | 276 | 5/24/2023 |
0.9.3 | 570 | 5/4/2023 |
0.9.2 | 184 | 5/4/2023 |
0.9.1 | 265 | 4/22/2023 |
0.9.0 | 203 | 4/20/2023 |
0.8.9 | 237 | 4/19/2023 |
0.8.8 | 226 | 4/19/2023 |
0.8.7 | 208 | 4/18/2023 |
0.8.6 | 253 | 4/18/2023 |
0.8.5 | 277 | 4/13/2023 |
0.8.4 | 234 | 4/13/2023 |
0.8.3 | 270 | 4/3/2023 |
0.8.2 | 473 | 3/14/2023 |
0.8.1 | 336 | 3/1/2023 |
0.8.0 | 502 | 1/18/2023 |
0.7.9 | 595 | 11/9/2022 |
0.7.8 | 629 | 10/10/2022 |
0.7.7 | 504 | 10/9/2022 |
0.7.6 | 572 | 9/21/2022 |
0.7.5 | 2,112 | 2/22/2022 |
0.7.4 | 610 | 2/21/2022 |
0.7.3 | 622 | 2/21/2022 |
0.7.2 | 613 | 2/21/2022 |
0.7.1 | 593 | 2/9/2022 |
0.7.0 | 627 | 2/7/2022 |
0.6.9 | 719 | 11/29/2021 |
0.6.8 | 6,410 | 11/24/2021 |
0.6.7 | 483 | 11/12/2021 |
0.6.6 | 399 | 11/11/2021 |
0.6.5 | 413 | 11/9/2021 |
0.6.4-rc.2 | 232 | 10/18/2021 |
0.6.3-rc.2 | 212 | 10/14/2021 |
0.6.2-rc.2 | 217 | 10/14/2021 |
0.6.2-rc.1 | 190 | 9/23/2021 |
0.6.2-preview.7 | 213 | 9/10/2021 |
0.6.1-preview.7 | 211 | 8/12/2021 |
0.6.0.1 | 550 | 9/10/2021 |
0.5.9 | 507 | 5/13/2021 |
0.5.8 | 465 | 4/7/2021 |
0.5.7 | 500 | 3/22/2021 |
0.5.6 | 404 | 3/20/2021 |
0.5.5 | 440 | 3/18/2021 |
0.5.4 | 409 | 3/17/2021 |
0.5.3 | 376 | 3/16/2021 |
0.5.2 | 422 | 3/16/2021 |
0.5.1 | 360 | 3/15/2021 |
0.5.0 | 402 | 3/15/2021 |