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

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

官方示例图:

修改效果图:

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

app.title = '嵌套环形图';
option = {
legend: {
itemWidth: , //图例的宽度
itemHeight: , //图例的高度
itemGap: ,
orient: 'vertical',
right: 'right',
top:'center',
icon: "rect",
selectedMode: false, //取消图例上的点击事件
data: ['4~18岁', '18<X≤80岁', '>80岁']
},
color: ['#33C6F7','#FFA700','#FF9090'],//扇形区域以及列表颜色
// 设置环形中间的数据。默认center为中间,如果图表位置变化了,中间文字是不变的。
graphic:[{
type:'text',
left:'center',
top:'40%',
style:{
fill:'#686868',
text:'总患者数'
}
},{
type:'text',
left:'center',
top:'50%',
z:,
style:{
text:'',
font: '30px Microsoft YaHei'
}
}],
series: [{
type: 'pie',
radius: ['60%', '75%'],//两个表示环
center: ['50%', '55%'],
labelLine: {//设置延长线的长度
normal: {
length: ,//设置延长线的长度
// length2: 10,//设置第二段延长线的长度
}
},
label: {
normal: {
// formatter: '{d}%, {c} \n\n',
formatter: '{per|{d}%} , {c|{c}}\n{hr|}\n{a|}',//这里最后另一行设置了一个空数据是为了能让延长线与hr线对接起来
padding: [, -],//取消hr线跟延长线之间的间隙
rich: {
a: {
color: '#999',
lineHeight: ,//设置最后一行空数据高度,为了能让延长线与hr线对接起来
align: 'center'
},
hr: {//设置hr是为了让中间线能够自适应长度
borderColor: 'auto',//hr的颜色为auto时候会主动显示颜色的
width: '105%',
borderWidth: 0.5,
height: 0.5,
},
per: {//用百分比数据来调整下数字位置,显的好看些。如果不设置,formatter最后一行的空数据就不需要
padding: [, ],
}
}
}
},
data: [{
value: ,
name: '4~18岁'
},
{
value: ,
name: '18<X≤80岁'
},
{
value: ,
name: '>80岁'
}
],
itemStyle: {
emphasis: {
shadowBlur: ,
shadowOffsetX: ,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};

运行效果图:

修改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. PHP 上传文件到其他服务器

    PHP 上传文件到其他服务器 标签(空格分隔): 安装Guzzle类库 **guzzle** 是发送网络请求的类库 composer安装:**composer require guzzlehttp/g ...

  2. c++面向对象程序设计 课后题 答案 谭浩强 第四章

    c++面向对象程序设计课后题答案 谭浩强 第四章 1: #include <iostream> using namespace std; class Complex {public: Co ...

  3. Repeater 中 OnItemCommand 用法

    <table> <asp:Repeater ID="rptList" runat="server"OnItemCommand="rp ...

  4. POJ 3764 DFS+trie树

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

  5. unwrap

    node.replaceWith(...node.childNodes);

  6. pixhawk入门知识

    Pixhawk是一种先进的自动驾驶仪,由PX4开放硬件项目设计和3D机器人制造.它具有来自ST公司先进的处理器和传感器技术,以及NuttX实时操作系统,能够实现惊人的性能,灵活性和可靠性控制任何自主飞 ...

  7. IntelliJ Idea使用代码折叠

    VS风格: //region    xxxxxxxxxxxxxx ............. //endregion 快捷键: Ctrl+Shift+”+/-”,全部展开.折叠

  8. Linux中删除特殊符号文件名文件

    Linux 系统下的文件名长度最多可到256个字符.通常情况下,文件名的字符包括:字母.数字.“.”(点).“_”(下划线)和“-”(连字符). Linux 允许在文件名中使用除上述符号之外的其它符号 ...

  9. jq——事件

    http://www.w3school.com.cn/jquery/jquery_ajax_intro.asp $(document),$(body) 加载事件: $(document).ready( ...

  10. Docker-镜像的操作命令

    2.镜像在Ubuntu中的一些命令 (1)docker image ls 列出镜像 能够罗列出docker中所以的镜像所在的仓库.镜像标签.镜像ID.镜像的创建日期.镜像的大小等等信息. (2)doc ...