BlazorCharts

介绍

Blazor版本的ECharts图表组件

开源地址：https://github.com/caopengfei/BlazorECharts

示例地址：http://101.132.107.140:8123/line/line1

ECharts配置请参考：

https://www.echartsjs.com/zh/option.html#title

https://www.echartsjs.com/examples/zh/index.html

使用方式

1. 创建Blazor项目。
2. 在NuGet中安装包Rakor.Blazor.ECharts 。
3. 在 _Imports.razor 中添加@using Rakor.Blazor.ECharts.Component。
4. 在 Pages/_Host.cshtml文件的Body中引入下面两段代码：

<script src="/_content/Rakor.Blazor.ECharts/js/echarts-4.5.min.js"></script>
<script src="/_content/Rakor.Blazor.ECharts/js/core.js"></script>

5. 在页面中使用组件（可参考Demo项目）。

注意：因为没有设置默认的样式，所以需要在组件上设置Class或者Style来控制宽度和高度

功能实现进度

• 公共配置
  • 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线图（部分）
  • 雷达图
  • 盒须图
  • 热力图
  • 关系图
  • 路径图
  • 树图
  • 矩形树图
  • 旭日图
  • 平行坐标系
  • 桑基图
  • 漏斗图
  • 仪表盘
  • 象形柱图
  • 主题河流图
  • 日历坐标系