使用echarts的graphic自定义背景图

 时间:2024-10-11 23:03:51

1、echarts提供的grpahic有多种。这里使用圆和文字作为示例,其他类似

使用echarts的graphic自定义背景图

2、在option中添加graphic项,并在elements中添加类型为circle的图。设置圆心和半径

使用echarts的graphic自定义背景图

3、默认的线条颜色和填充,可以通过style来修改。如果什么也不填充,可以设置fill:null

使用echarts的graphic自定义背景图

4、再添加一个类型为text的图。在style中设置文本、位置及颜色

使用echarts的graphic自定义背景图

5、想让文本显示在圆心。这里可以设置水平和垂直对齐方式。使用起来非常方便

使用echarts的graphic自定义背景图

6、默认设置的坐标点是以左上角为参考坐标有个position选项,可以理解它为参考坐标,后面设置的坐标是以position设置的坐标进行偏移。

使用echarts的graphic自定义背景图

7、grpahic中棵褶佐峨还有个group类型的图,在group图形,可以在children中添加多个不同的图。设置了group的position值,其下children中所有的坐标都是以position设置的坐标进行偏移。

使用echarts的graphic自定义背景图
  • setinterval用法
  • Navicat怎么设置保持连接间隔?
  • 大学毕业生就业和创业如何选择?
  • Excel中如何计算双阶乘?
  • 大学高等数学《可降阶的高阶微分方程》总结
  • 热门搜索
    感恩老师手抄报图片 手抄报边框花纹 手抄报图案小装饰 小学手抄报大全 健康成长手抄报内容 手抄报的装饰花边 手抄报边框设计图大全 数学手抄报内容大全 端午手抄报模板 手抄报的边框