zoukankan      html  css  js  c++  java
  • echarts 中的1/4圆环行图的使用

    最近,新来的ui小哥哥各种脑洞大开,给了我这样的设计图,一眼望过去,挺简单的,就是四个四分之圆的环行图组合在一起,两边就是各自的图例数据,

    再认真看一眼,发现这个图有点意思啊~~~

     之前做过这样的图:

     一个半圆,显示一个数据,但是现在这个不仅不是半圆,而且还不是显示一个数据而已,这圆应该是好处理的,毕竟弄得了半圆,自然也就能弄四分之一分圆啦,

    关键在于,这上面的数据不止一个呀~~

    于是,我又开始各种找找找,看看看,来来去去还是只有一个数据的,最后我又在gallery中找到了几乎一样的,真的是幸运啊!这个gallery简直就是福音!

    附上链接:https://gallery.echartsjs.com/editor.html?c=xvIJDnlrkl

     找到这个就成功一大半了!那就考虑一下,如何下手吧!

    首先,需要把这里的1/2圆配置成1/4圆,顺便调整显示角度

    其次,需要考虑设计图中的间距用什么调整比较合理,一开始我选择使用角度调整来控制间距,但是结果是拼接起来的圆不够圆润,特别是每个图的两端都往里面缩了,大概就是下图的意思,

    所以其实直接设置一个margin值就很不错了,不会出现这样的情况。

    最后,配置一下外围一粗一细的线条,将数据渲染上去即可!

  • 相关阅读:
    在二元树中查找和为某一值的所有路径
    求整数的二进制表示1的个数
    Javascript AJAX 解析XML 兼容FIREFOX/IE
    DOM解析XML笔记
    Linux c 共享内存
    C Socket 发送/接收数据结构
    Linux c 获取系统内存
    7.5备忘
    linux c 唤醒进程 获取子进程结束状态
    7.1-7.2备忘
  • 原文地址:https://www.cnblogs.com/jocelyn11/p/13743645.html
Copyright © 2011-2022 走看看