修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦。有问题可以留言。

根据echarts官方示例修改效果:

官方示例图:

修改效果图:

直接上代码:其它不多说。

  1. app.title = '嵌套环形图';
  2. option = {
  3. legend: {
  4. itemWidth: , //图例的宽度
  5. itemHeight: , //图例的高度
  6. itemGap: ,
  7. orient: 'vertical',
  8. right: 'right',
  9. top:'center',
  10. icon: "rect",
  11. selectedMode: false, //取消图例上的点击事件
  12. data: ['4~18岁', '18<X≤80岁', '>80岁']
  13. },
  14. color: ['#33C6F7','#FFA700','#FF9090'],//扇形区域以及列表颜色
  15. // 设置环形中间的数据。默认center为中间,如果图表位置变化了,中间文字是不变的。
  16. graphic:[{
  17. type:'text',
  18. left:'center',
  19. top:'40%',
  20. style:{
  21. fill:'#686868',
  22. text:'总患者数'
  23. }
  24. },{
  25. type:'text',
  26. left:'center',
  27. top:'50%',
  28. z:,
  29. style:{
  30. text:'',
  31. font: '30px Microsoft YaHei'
  32. }
  33. }],
  34. series: [{
  35. type: 'pie',
  36. radius: ['60%', '75%'],//两个表示环
  37. center: ['50%', '55%'],
  38. labelLine: {//设置延长线的长度
  39. normal: {
  40. length: ,//设置延长线的长度
  41. // length2: 10,//设置第二段延长线的长度
  42. }
  43. },
  44. label: {
  45. normal: {
  46. // formatter: '{d}%, {c} \n\n',
  47. formatter: '{per|{d}%} , {c|{c}}\n{hr|}\n{a|}',//这里最后另一行设置了一个空数据是为了能让延长线与hr线对接起来
  48. padding: [, -],//取消hr线跟延长线之间的间隙
  49. rich: {
  50. a: {
  51. color: '#999',
  52. lineHeight: ,//设置最后一行空数据高度,为了能让延长线与hr线对接起来
  53. align: 'center'
  54. },
  55. hr: {//设置hr是为了让中间线能够自适应长度
  56. borderColor: 'auto',//hr的颜色为auto时候会主动显示颜色的
  57. width: '105%',
  58. borderWidth: 0.5,
  59. height: 0.5,
  60. },
  61. per: {//用百分比数据来调整下数字位置,显的好看些。如果不设置,formatter最后一行的空数据就不需要
  62. padding: [, ],
  63. }
  64. }
  65. }
  66. },
  67. data: [{
  68. value: ,
  69. name: '4~18岁'
  70. },
  71. {
  72. value: ,
  73. name: '18<X≤80岁'
  74. },
  75. {
  76. value: ,
  77. name: '>80岁'
  78. }
  79. ],
  80. itemStyle: {
  81. emphasis: {
  82. shadowBlur: ,
  83. shadowOffsetX: ,
  84. shadowColor: 'rgba(0, 0, 0, 0.5)'
  85. }
  86. }
  87. }]
  88. };

运行效果图:

修改echarts环形图的牵引线及文字位置的更多相关文章

  1. echarts环形图,自定义说明文字

    一.代码 app.title = '已安装通讯盒电站统计'; option = { backgroundColor: '#0f0f31',//#0f0f31 title: { show:true, x ...

  2. vue 使用Echarts 环形图 自定义legend formatter 富文本标签

    main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts   < ...

  3. echarts环形图自动定位radius

    根据后台返回数据条数进行pie图radius定位:     var a = 100; var b = 0; var c = 0; var radius = []; for (var i in data ...

  4. echarts环形图点击旋转并高亮

    通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度,从而根据startAngle这个属性来设定图形的开始渲染的角度,使点击某个扇形时圆环旋转使之始终对准某个点. 期间考虑到某扇形区域太小点击 ...

  5. Echarts环形进度使用 【1 简单的使用示例】

    使用中说明几点属性:  hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互//这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等 ...

  6. echart 折线图、柱状图、饼图、环形图颜色修改

    之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...

  7. echarts白色实心环形图(空心饼图)的编写

    // 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取 ...

  8. echarts实现环形图

    前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...

  9. vue 结合 Echarts 实现半开环形图

    Echarts 实现半开环形图 1.先看看实现的图 2.HTML部分 创建id 是 chart 的div标签. <div class="content-item"> & ...

随机推荐

  1. Python 加载数据

    1. numpy data = np.loadtxt('./data/txtdata.csv') ⇒ data 是 numpy.ndarray 类型

  2. 下压栈(LIFO)详解

    写在前面的话: 一枚自学Java和算法的工科妹子. 算法学习书目:算法(第四版) Robert Sedgewick 算法视频教程:Coursera  Algorithms Part1&2 本文 ...

  3. 如何在maven项目中使用spring

    今天开始在maven项目下加入spring. 边学习边截图. 在这个过程中我新建了一个hellospring的项目.于是乎从这个项目出发开始研究如何在maven项目中使用spring.鉴于网上的学习资 ...

  4. QT-简介

    前言:Qt是一款强大的跨平台gui(图形界面开发)开发工具. 一.安装说明 Qt安装包: qt-opensource-windows-x86-mingw492-5.6.1-1.exe -------- ...

  5. POJ 3764 DFS+trie树

    题意: 给你一棵树,求树中最长的xor路径.(n<=100000) 思路: 首先我们知道 A xor B =(A xor C) xor (B xor C) 我们可以随便选一个点DFS 顺便做出与 ...

  6. C# 正则表达式

    C# 正则表达式 正则表达式 是一种匹配输入文本的模式..Net 框架提供了允许这种匹配的正则表达式引擎.模式由一个或多个字符.运算符和结构组成. 定义正则表达式 下面列出了用于定义正则表达式的各种类 ...

  7. Linux学习日记——字符处理

    (菜鸡学习日记 各种使用命令只列举了常用几种,发现错误望指正) 一.管道 在Linux 中,管道就是一个固定大小的缓冲区,大小为一页4K.它是一种通信的机制,可以使用管道符“ | ” 来连接进程,连接 ...

  8. DirectUI界面编程(一)创建第一个应用

    1.获取Duilib库文件 通过上一节大家对DirectUI界面设计有了初步的了解,本节开始我们一起学习Duilib界面库的使用. 首先我们需要获取Duilib库,目前最新版本为2.0,最新版本源码托 ...

  9. Java操作Kafka执行不成功

    使用kafka-clients操作kafka始终不成功,原因不清楚,下面贴出相关代码及配置,请懂得指点一下,谢谢! 环境及依赖 <dependency> <groupId>or ...

  10. Win8 Windows Defender default behaviour

    Problem Description ********************* Is it possible, to change the default behaviour when findi ...