Skip to content

caopengfei/BlazorECharts

Repository files navigation

BlazorCharts

介绍

Blazor版本的ECharts图表组件

GitHub license

开源地址: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 NuGet downloads
  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>
  1. 在页面中使用组件(可参考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线图(部分)
    • 雷达图
    • 盒须图
    • 热力图
    • 关系图
    • 路径图
    • 树图
    • 矩形树图
    • 旭日图
    • 平行坐标系
    • 桑基图
    • 漏斗图
    • 仪表盘
    • 象形柱图
    • 主题河流图
    • 日历坐标系

About

Blazor版本的ECharts图表组件

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages