echarts pie饼图既显示内部又显示外部指示线

2023-11-06

查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在饼图内部inner,或者饼图外部outer,无法实现同时实现内部、外部显示,想到设置两个serie,让两个饼图完全重合即可,一个外标签显示文字说明,另一个显示内标签,实现百分比。

解决办法:
1、可以写两个图表让他们重合,一个内部显示,一个外部显示

<div style="width: 100%;height:100px;position: relative;background-color: #fff;">
                                            <div id="uplrfu" style="width: 100%;height:100px;box-sizing: border-box;position: absolute;top: 0;left: 0;"></div>
                                            <div id="uplrfu2" style="width: 100%;height:100px;box-sizing: border-box;position: absolute;top: 0;left: 0;"></div>
                                        </div>

2、series写两个对象

function piecharts() {
  var myChart = echarts.init(document.getElementById('uplrfu'), 'light');
  var option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: false
    },
    color: ["#0B4CB0", "#027ACF"],
    series: [
      {
        type: 'pie',
        radius: '90%',
        label: {            //饼图图形上的文本标签
            show: true,
            position: 'outside', //标签的位置
            textStyle: {
              fontWeight: 300,
              fontSize: 14    //文字的字体大小
            },
            formatter: function (d) {
              console.log(d);
              return d.name+"\n"+d.value+"公里"
            }
        },
        data: [
          { value: 484, name: '左幅' },
          { value: 300, name: '右幅' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },{
        type: 'pie',
        radius: '90%',
        label: {            //饼图图形上的文本标签
            show: true,
            position: 'inside', //标签的位置
            textStyle: {
              fontWeight: 300,
              fontSize: 16    //文字的字体大小
            },
            formatter: function (d) {
              return Math.round(d.percent) + '%'
            }
        },
        data: [
          { value: 484, name: '左幅' },
          { value: 300, name: '右幅' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }

    ]
  };
  myChart.setOption(option);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

echarts pie饼图既显示内部又显示外部指示线 的相关文章

  • vue使用echarts与echarts-gl实现3d地图与 3d柱状图

    目录 前言 一 下载echarts与echarts gl 二 vue引入与页面使用 1 引入 2 页面引入echarts gl 三 下载地图数据 四 使用地图 1 html初始化地图放入位置 2 data创建变量 3 创建地图 4 钩子函数
  • echarts横向个性化柱状图

    先看一下效果图 横向柱状图 顶部小圈是一个图片 下面我们就来看看如何实现 1 第一步 先把柱状图中需要插入的图片 转换成base64格式 百度搜一下 可以搜到在线工具直接转换 2 html中定义一个div 用来盛放柱状图 div style
  • 在vue项目中echarts父子组件异步传值,解决数据更新,echarts页面不更新问题

    在使用echarts进行数据展示的时候 遇到了一个问题 echarts图表是作为子组件进行展示的 需要父组件发送请求并获取到返回数据后再传给子组件进行数据展示 但是由于子组件比父组件先渲染 所以就会导致子组件获取不到父组件传递的数据 针对这
  • echarts tootip点击显示 移开不消失

    描述 tooltip点击时显示 依赖不会自动消失 tooltip上有按钮可以点击 可以这样修改 使用tooltip的triggerOn属性 tooltip triggerOn string default mousemove click 提
  • echarts实现一个页面同时显示多个图表

    前言 因工作需要 老大要求给我一个JSON数据 用echarts 写一个option实现多个图表 折线图 饼图 关系图 展示 也就是说只要一个div dom对象 实现多个不同形状的图表展示 ps 前期没弄清老大意思 写了三个div来显示 尴
  • 用python开发了一个绘制股票k线图的工具,还可以预测股票涨跌!【文末附源码和教学视频】

    文章目录 聊一聊这个工具 效果展示 股票数据 运行项目 前端界面 后端接口 源码地址 聊一聊这个工具 起初 我并不在意echarts 这不过是一个偶然 一次选择 一条简单的代码 一个图表的诞生 直到我完成了K线图的绘制 股票 一个神奇的发明
  • echarts之饼图制作+标示线

    1 安装echarts组件 npm install echarts s 2 在main js中全局引入以及挂载 import echarts from echarts 引入 Vue prototype echarts echarts 挂载
  • UE4 通过Echarts实现各种统计图

    主要内容 本文主要讲解UE4 UMG向网页发送数据 通过WebBrowser插件将用Echarts定制好的统计图在UE4内展现出来 达到数据可视化的效果 本文主要演示柱形图的效果 其它类型的统计图可以结合Echarts官方案列以及文档自行修
  • echarts仪表盘进度条、指针动态渐变色显示

    1 echarts仪表盘实现效果如下 2 配置项代码 const option 鼠标悬浮的提示 tooltip formatter b c series type gauge min 0 最大值 max 100 最小值 startAngle
  • 解决ECharts 因X轴数据过多导致重叠显示不全的问题

    X轴 加滚动条 通过配置合适的起始位置和结束位置可以做到数据过多不重叠 数据太少也不至于很丑 定位合适的位置后还可以通过手动拉伸滚动条的长度动态的显示不同条目数 对于动态的条目数滚动条要比倾斜数据灵活太多尤其是根据时间段动态显示数据 仅此表
  • 调整echarts中图与legend的距离

    1 正常调整legend的位置 通过X改变横坐标位置 通过Y改变纵轴位置 x 可设定图例在左 右 居中 y 可设定图例在上 下 居中 legend y bottom data 阳性转阴性 阴性转阳性 阳性无症状转有症状 未检测 2 如果觉得
  • Vue将页面中Echarts动态图导出Gif动图

    Vue将页面中Echarts动态图导出Gif动图 首先 准备工作需要三个依赖的js 第一个js采用npm进行安装 npm install html2canvas 第二个js采用下载放入项目中进行使用 下载链接 https pan baidu
  • @vitejsplugin-vue requires vue (>=3.2.13) or @vuecompiler-sfc to be present in the dependency tree

    运行项目的时候 首先会提示要安装 vue compiler sfc 但是安装后运行项目成功但是页面是空白并且报错 VUE HMR RUNTIME is not defined 摸索了半天 查看到package json依赖文件 没有vue
  • Vue 中使用 Echarts5.0 的一些问题(vue-cli 下开发)

    问题 最新版的 Echarts5 0 使用 import echarts from echarts 导入 会发现导出的 echarts 是 undefined 的情况 无法正常使用 解决方案一 新版本有问题就用旧版本咯 卸载 Echarts
  • ECharts 设置折线颜色和小圆点颜色

    ECharts 设置折线颜色只需要设置lineStyle的color即可 设置小圆点颜色只需要设置itemStyle的颜色即可 series name seriesName type line itemStyle normal color
  • 大屏图表,ECharts 从“熟练”到入门

    阅读本文 你将 了解 配置驱动 的思想 理解 Echarts 基本概念 了解 graphic 和 动画基本玩法 了解 Echarts 基底组件的封装的思路 一 不是标题党 Echarts 简历上人均 熟练 公司最近在招外包 而因为目前大屏的
  • Echarts如何在条形图上的特定条形之间添加垂直虚线?

    我正在使用 Echarts 并创建了一个条形图 我正在尝试添加两条垂直虚线来分隔Source3 and Source4和另一条垂直虚线以显示分离SourceSix and SourceSeven 我试过乱搞markLine到一个酒吧并添加一
  • 如何最大限度地减少百度 echarts 周围的空白

    我正在尝试合并百度的echarts 看起来非常好 然而 当人们不设置标题也不使用工具栏时 实际图表周围会有很多空白 有没有办法让图形 图表使用更多的画布 我当前的解决方案是在容器内部添加一个额外的内容 然后将其宽度和高度设置为更大我想要删除
  • javascript - eCharts - 多个 y 轴彼此重叠

    I use eCharts JavaScript 插件 https ecomfe github io echarts doc public en index html创建折线图 正如您在下面所附的图片中看到的 y 轴彼此重叠 这是我使用的选
  • 百度的echarts - 填充两行之间的空间

    我想找到一种在 ECharts 中绘制两条线并填充它们之间的空间的方法 如下所示 这样每条线都有自己的颜色 根据线条的顺序 区域填充为一种颜色或另一种颜色 见图 有本地方法吗 我发现有些人在提到extensions 但没有人提供任何关于如何

随机推荐

  • Python pandas读取Excel 数据写入到数据库

    需求得到天眼查的法人信息数据导入到数据库中 经过多次不断试错最后使用Python导入 先上代码 import pandas as pd import sqlalchemy as sqla import os 读取Excel数据 def ge
  • net::ERR_HTTP2_PROTOCOL_ERROR 200错误

    场景 web端的环境上某一个请求报这个问题了 其他的请求正常 打开f12控制台看到异常net ERR HTTP2 PROTOCOL ERROR 200错误 排查 查看nginx的error log 报是某一个临时文件的权限不足 原因是启动n
  • CSVDE导出AD域下指定子OU的Group中所有成员的信息

    CSVDE导出AD域下指定子OU的Group中所有成员的信息 最近搞CSVDE搞的头疼 网上各种乱七八糟的资料 都是东搞一下西搞一下 好不容易找到一篇系统性的介绍使用CSVDE来对AD进行导入导出操作的文章 具体链接 http www co
  • mybatis(六) 处理枚举类型

    处理枚举类型 若想映射枚举类型 Enum 则需要从 EnumTypeHandler 或者 EnumOrdinalTypeHandler 中选一个来使用 比如说我们想存储取近似值时用到的舍入模式 默认情况下 MyBatis 会利用 EnumT
  • python数据清洗的三个常用的处理方式!

    关于python数据处理过程中三个主要的数据清洗说明 分别是缺失值 空格 重复值的数据清洗 这里还是使用pandas来获取excel或者csv的数据源来进行数据处理 若是没有pandas的非标准库需要使用pip的方式安装一下 pip ins
  • 华为OD机试真题-分班-2023年OD统一考试(B卷)

    题目描述 幼儿园两个班的小朋友在排队时混在了一起 每位小朋友都知道自己是否与前面一位小朋友是否同班 请你帮忙把同班的小朋友找出来 小朋友的编号为整数 与前一位小朋友同班用Y表示 不同班用N表示 输入描述 输入为空格分开的小朋友编号和是否同班
  • 深度网络架构的设计技巧<一>:Can CNNs Be More Robust Than Transformers?

    导读 启发于Transformer结构 作者将三种设计引入到CNN中 加强后的CNN取得比ViT更强的鲁棒性 这三种设计 实现简单 仅仅几行代码就能实现高效的CNN结构设计 ArXiv https arxiv org abs 2206 03
  • 数据挖掘的基础

    目录 数据挖掘 一 数据挖掘理解 二 数据准备 1 缺失值处理 2 异常值处理 3 数据偏差的处理 4 数据的标准化 5 特征选择 三 数据建模 1 分类问题 2 聚类问题 3 回归问题 4 关联问题 四 评估模型 1 混淆矩阵与准确率指标
  • C语言删除一个字符串中的多余空格字符

    删除一个字符串中的多余空格字符 使得字符串中的每个单词之间只有一个空格字符 code C C char my delblank char str char newStr char start str while start start st
  • 2021年计算机保研经验帖(真平民)(上交网安、复旦、南大、同济、北航、东南)

    个人背景 中九5 数学辅修 数模省一 组织经历较丰富 干啥啥不行 活动第一名 软著及项目若干 无论文无科研 什么叫学混啊 有强烈的上海和南京倾向 有倾向是好事 但是也不要过于自信 因为各个学校的审核很迷 还是要适当海投保证自己有学上 夏令营
  • (二):Qt信号槽连接及触发原理

    经过 Qt信号槽之 准备阶段 学习 我们知道信号是函数 里面调用了 QMetaObject activate 函数 而对于接收端的槽函数或信号 是通过私有静态函数 qt static metacall 调用元方法 源头是有的 接收端也是有的
  • 【Vue学习笔记6】好用的 Vueuse 工具包

    1 安装Vueuse VueUse 的官方 https vueuse org 的介绍说这是一个 Composition API 的工具集合 适用于 Vue 2 x 或者 Vue 3 x 用起来和 React Hooks 还挺像的 VueUs
  • Altium Designer 13 设计备忘录7——如何让过孔/地孔覆铜全覆盖

    通常在PCB布线布局完成后 都会开始对整块板子进行覆铜 这时可能会出现以下过孔 地孔无法全覆盖的情况 通过菜单栏上的设计 Design 规则 R 找到Plane 选择Polygon Connect Style下 PolygonConnect
  • idea新建文件时没有xml文件的处理办法

    1 大部分人在新建spring项目时 会发现新建项目时没有xml文件的选项 如下图所示 2 此问题是pom文件没有正确引入依赖导致的 可以尝试在pom文件中加入spring依赖尝试一下 在pom文件中加入以下依赖 并且更新maven
  • VS编译OpenCV3

    目录 流程 源码 环境 编译完成库 流程文档转载 防丢 1 下载Cmake 2 下载OpenCV源码 3 编译OpenCV 4 最后一步 VS编译openCV 4 1编译Debug版的openCV 4 2编译Release版的openCV
  • 介绍 Golang Timer(定时器)

    介绍 Golang Timer 定时器 本文介绍Golang Timer 定时器 位于Golang 的time包 常用于衡量代码执行效率 示例 假设一个业务方法需要衡量其执行效率 整个执行时间不能超过60秒 一旦超过发送通知 实现一 pac
  • Flutter生成带图片的二维码

    现在的APP中经常需要用自己的信息生成一个二维码给别人扫 下面就介绍一下Flutter中怎么生成一个带图片的二维码 需要用到的插件qr flutter 首先在 pubspec yaml 文件中添加以下依赖 添加依赖后在 pubspec ya
  • Vc - Qt - 仿照微信聊天窗口 - demov.1.0 初步展示

    项目是开源的 项目所在的github的地址 https github com JLZJMWSY Win32 https github com JLZJMWSY Win32 https github com JLZJMWSY Win32下的Q
  • for循环执行顺序---看一篇就懂了。

    for循环是程序代码中我们使用最多的循环体 当然了while do while也经常使用 其中do while常用于循环体无论判断条件是否正确 都会至少执行一次 for int i 0 i lt 5 i 循环体 执行顺序解抛 执行的顺序如下
  • echarts pie饼图既显示内部又显示外部指示线

    查了echarts 文档 并不能通过简单的配置来实现 原因如下 在单个serie的label中 只能设置一个label 位置可以选择在饼图内部inner 或者饼图外部outer 无法实现同时实现内部 外部显示 想到设置两个serie 让两个