Blazor.ECharts 1.0.1

dotnet add package Blazor.ECharts --version 1.0.1
NuGet\Install-Package Blazor.ECharts -Version 1.0.1
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.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Blazor.ECharts --version 1.0.1
#r "nuget: Blazor.ECharts, 1.0.1"
#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.1

// Install Blazor.ECharts as a Cake Tool
#tool nuget:?package=Blazor.ECharts&version=1.0.1

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 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. 
Compatible target framework(s)
Additional computed target framework(s)
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.1 193 1/21/2024
1.0.0 254 1/10/2024
0.9.9 157 1/10/2024
0.9.8 496 11/17/2023
0.9.7 688 8/9/2023
0.9.6 171 7/26/2023
0.9.5 403 6/15/2023
0.9.4 214 5/24/2023
0.9.3 458 5/4/2023
0.9.2 138 5/4/2023
0.9.1 213 4/22/2023
0.9.0 164 4/20/2023
0.8.9 187 4/19/2023
0.8.8 178 4/19/2023
0.8.7 168 4/18/2023
0.8.6 204 4/18/2023
0.8.5 224 4/13/2023
0.8.4 190 4/13/2023
0.8.3 225 4/3/2023
0.8.2 410 3/14/2023
0.8.1 296 3/1/2023
0.8.0 438 1/18/2023
0.7.9 543 11/9/2022
0.7.8 592 10/10/2022
0.7.7 461 10/9/2022
0.7.6 529 9/21/2022
0.7.5 2,047 2/22/2022
0.7.4 559 2/21/2022
0.7.3 578 2/21/2022
0.7.2 579 2/21/2022
0.7.1 557 2/9/2022
0.7.0 580 2/7/2022
0.6.9 670 11/29/2021
0.6.8 6,372 11/24/2021
0.6.7 428 11/12/2021
0.6.6 356 11/11/2021
0.6.5 383 11/9/2021
0.6.4-rc.2 210 10/18/2021
0.6.3-rc.2 195 10/14/2021
0.6.2-rc.2 194 10/14/2021
0.6.2-rc.1 175 9/23/2021
0.6.2-preview.7 197 9/10/2021
0.6.1-preview.7 191 8/12/2021
0.6.0.1 506 9/10/2021
0.5.9 462 5/13/2021
0.5.8 421 4/7/2021
0.5.7 458 3/22/2021
0.5.6 368 3/20/2021
0.5.5 403 3/18/2021
0.5.4 380 3/17/2021
0.5.3 351 3/16/2021
0.5.2 391 3/16/2021
0.5.1 322 3/15/2021
0.5.0 378 3/15/2021