Blazor.ECharts 1.0.4

dotnet add package Blazor.ECharts --version 1.0.4                
NuGet\Install-Package Blazor.ECharts -Version 1.0.4                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Blazor.ECharts" Version="1.0.4" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Blazor.ECharts --version 1.0.4                
#r "nuget: Blazor.ECharts, 1.0.4"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// 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,故在此基础上,重新做了这个

GitHub license

开源地址:https://github.com/lishewen/Blazor.ECharts

国内镜像:https://gitee.com/lishewen/Blazor.ECharts

ECharts配置请参考:

https://echarts.apache.org/examples/zh/index.html

使用方式

  1. 创建Blazor项目。
  2. 在NuGet中安装包Blazor.ECharts NuGet downloads
  3. _Imports.razor中添加@using Blazor.ECharts.Components
  4. 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>
  1. wwwroot/index.html文件的Body中引入:
<script type="module" src="_content/Blazor.ECharts/core.js"></script>
  1. 修改Program.cs增加
builder.Services.AddECharts();
  1. 在页面中使用组件(可参考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的原因

  1. 减少包的体积
  2. 方便自由更换cdn
  3. 方便echarts小版本更新时,作者没有来得及更新Package内的js时,可自行在页面上更换
Product 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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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