Awesome
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
使用方式
- 创建Blazor项目。
- 在NuGet中安装包
Rakor.Blazor.ECharts
。
- 在 _Imports.razor 中添加
@using Rakor.Blazor.ECharts.Component
。 - 在 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>
- 在页面中使用组件(可参考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线图(部分)
- 雷达图
- 盒须图
- 热力图
- 关系图
- 路径图
- 树图
- 矩形树图
- 旭日图
- 平行坐标系
- 桑基图
- 漏斗图
- 仪表盘
- 象形柱图
- 主题河流图
- 日历坐标系