使用echarts的graphic自定义背景图

  • 原创
  • |
  • 浏览:10087
  • |
  • 更新:

这里使用echarts的graphic来绘制自己想要的背景图

工具/原料

  • echarts 4.2.1

方法/步骤

  1. 1

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

    使用echarts的graphic自定义背景图
  2. 1
    相关内容非法爬取自百度经验
  3. 2

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

    使用echarts的graphic自定义背景图
  4. 3

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

    fill:null

    使用echarts的graphic自定义背景图
  5. 4

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

    使用echarts的graphic自定义背景图
  6. 5

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

    使用echarts的graphic自定义背景图
  7. 6

    默认设置的坐标点是以左上角为参考坐标

    有个position选项,可以理解它为参考坐标,后面设置的坐标是以position设置的坐标进行偏移。

    使用echarts的graphic自定义背景图
  8. 7

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

    使用echarts的graphic自定义背景图
    END
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部