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来控制宽度和高度

功能实现进度

• [ ] 公共配置
  • [x] title
  • [x] legend
  • [x] grid（部分）
  • [x] xAxis（部分）
  • [x] yAxis（部分）
  • [x] polar（部分）
  • [x] radiusAxis（部分）
  • [x] angleAxis（部分）
  • [x] radar（部分）
  • [x] dataZoom
  • [x] visualMap（部分）
  • [x] tooltip（部分）
  • [x] axisPointer（部分）
  • [x] toolbox（部分）
  • [ ] brush
  • [ ] geo
  • [ ] parallel
  • [ ] parallelAxis
  • [ ] singleAxis
  • [ ] timeline
  • [ ] graphic
  • [ ] calendar
  • [ ] dataset
  • [ ] aria
  • [x] series（部分）
  • [x] color
  • [x] backgroundColor
  • [x] textStyle
  • [x] animation
  • [x] animationThreshold
  • [x] animationDuration
  • [x] animationEasing
  • [x] animationDelay
  • [x] animationDurationUpdate
  • [x] animationEasingUpdate
  • [x] animationDelayUpdate
  • [x] blendMode
  • [x] hoverLayerThreshold
  • [x] useUTC
• [ ] 图表
  • [x] 折线图（部分）
  • [x] 柱状图（部分）
  • [x] 饼图（部分）
  • [ ] 散点图
  • [x] 地理坐标/地图（部分）
  • [x] K线图（部分）
  • [ ] 雷达图
  • [ ] 盒须图
  • [ ] 热力图
  • [ ] 关系图
  • [ ] 路径图
  • [ ] 树图
  • [ ] 矩形树图
  • [ ] 旭日图
  • [ ] 平行坐标系
  • [ ] 桑基图
  • [ ] 漏斗图
  • [ ] 仪表盘
  • [ ] 象形柱图
  • [ ] 主题河流图
  • [ ] 日历坐标系