echarts之环形饼图显示标注线的同时悬浮时正中间显示内容

青青子衿-悠悠我心VIP

于 2022-05-07 10:00:14 发布

阅读量5.3k

点赞数 7

分类专栏：有关Echarts的一些使用技巧文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_2411868438/article/details/124623852

版权

本文介绍了如何在Echarts中实现环形饼图同时显示标注线和悬浮时正中显示内容。通过创建两个相同大小的圆环，一个用于标注线，另一个用于中央内容展示。强调了解决问题的步骤：先自我尝试，再查官方文档，最后寻求网络资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

项目中碰到UI如此设计，查阅官方文档并没有同时兼容两者的配置，秉承开发中一句圣经——开发中80%碰到的问题前人早已碰到过（或踩过坑），接下来就是合理总结关键字，运用搜商，果然找到了需要的答案。

呈现效果：

秉着好记性不如烂笔头，利己利人的原则，这里便记录下来。

具体实现

核心是利用两个相同大小的圆环，第一个显示外部指示线label，第二个将内容显示在中央。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饼图同时显示标注线与中央内容</title>
  <style>
    html, body {
      height: 100%;
    }
    #container {
      height: 80%;

最低0.47元/天解锁文章