echarts label固定位置_echarts 饼状图调节 label和labelLine的位置
原理
使用一个默认颜色为透明的,并且只显示labelLine的饼状图
然后通过调节这个透明的饼状图 以达到修改labelLine的位置
echarts地址
https://gallery.echartsjs.com/editor.html?c=x6VnXPfxlx
echarts源码:
option = {
backgroundColor: "#03141c",
title: {
text: "84%",
subtext: '完成部门占比',
x: 'center',
y: 'center',
textStyle: {
color: "#fff",
fontSize: 30,
fontWeight: 'normal'
},
subtextStyle: {
color: "rgba(255,255,255,.45)",
fontSize: 14,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: ['rose3', 'rose5', 'rose6', 'rose7', 'rose8']
},
calculable: true,
series: [
{
type: 'pie',
radius: [80, 120],
center: ['50%', '50%'],
data: [
{
value: 10,
name: '吴际帅\n牛亚莉',
itemStyle: {
color: "transparent"
}
},
{
value: 90,
name: 'rose2',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#0ce4da'
}, {
offset: 1,
color: '#f6fb08'
}])
},
labelLine: {
show: false,
length: 200,
length2: 100
},
label: {
color: "rgba(255,255,255,.45)",
fontSize: 14,
show: false,
position: 'outside',
formatter: '客户满意度\n{a|52}个',
rich: {
a: {
color: "#fff",
fontSize: 20,
lineHeight: 30
},
}
}
}
]
},
{ // 指示线
// 通过value 的值 调节lableLine的位置
type: 'pie',
radius: [80, 100],
data: [
{
value: 100,
itemStyle: {
color: 'transparent'
}
},
{
value: 50,
itemStyle: {
color: "transparent"
},
labelLine: {
show: true,
length: 2,
length2: 240,
color: 'orange',
lineStyle: {
color: 'orange'
}
},
label: {
color: "rgba(255,255,255,.45)",
fontSize: 14,
position: 'outside',
formatter: '客户满意度\n{a|52}个',
rich: {
a: {
color: "#fff",
fontSize: 20,
lineHeight: 30
},
}
}
}
]
},
{
type: 'pie',
radius: [80, 100],
center: ['50%', '50%'],
data: [{
value: 10,
itemStyle: {
color: '#06d3cd'
},
labelLine: {
show: false
}
},
{
value: 90,
itemStyle: {
color: "transparent"
}
}
]
}
]
};
echarts label固定位置_echarts 饼状图调节 label和labelLine的位置相关推荐
- echarts柱状图显示百分比_Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总...
增加了显示比例,显示内容 显示比例代码显示完整代码: series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap ...
- echarts饼状图设置label的交互效果,饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
- echars水状_Echarts饼状图属性设置
标题 title: { text: '学生生源地来源分布图', subtext: '模拟数据', // x 设置水平安放位置,默认左对齐,可选值:'center' ¦ 'left' ¦ 'right' ...
- php链接echarts教程,图文详解echarts的使用方法(饼状图实例)
在页面布局时经常需要插入一些图表,比如饼状图,柱状图,地图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法 ...
- SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网: https://www.echartsjs.com/index.html 获取Echarts ...
- 一篇读懂springboot用echarts实现实时柱状图和饼状图查询
1.业务说明 将数据库中的数据分别以柱状图和饼状图呈现出来 gitee项目路径:https://gitee.com/ziac/ls.git 2.1 柱状图需要引入的js 建议去echarts官网直接用 ...
- echarts 饼状图 java_SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网 获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供 ...
- Echarts 3d饼状图
记录使用Echarts 实现3D饼状图的过程. 效果图: 1.首先安装echarts 3d插件 "echarts": "^4.7.0", "echar ...
- echarts实现3d环形饼状图
首先确保在项目中引入了echarts和echarts-gl "echarts": "^4.9.0", "echarts-gl": " ...
- SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
场景 数据库中每个数据都有开始时间以及结束时间两个字段. 需要根据创建时间筛选出当天的四种类型的数据的平均执行时间. SpringBoot+Echarts实现请求后台数据显示饼状图: https:// ...
最新文章
- 抽象工厂模式(C#)
- cxf整合spring错误为:cvc-complex-type.2.4.c
- 经常在比特币中看到的merkle树是什么?
- struts2-通配符和动态方法调用
- 【加解密学习笔记:第三天】OllyDbg断点介绍
- 兄弟FAX-2890更换硒鼓加粉清零方法
- IDEA 格式化代码快捷键冲突解决
- 抖音网红简易时钟代码
- Qt+大恒相机+OpenCV+MinGW界面开发
- Java bean中字段命名潜规则,前两个字母要么都大写,要么都小写
- validation插件
- 进制的转换 如六进制
- Tableau导出PDF格式文件
- 如何把视频转换成gif动图
- 中地恒达无线倾角加速度计
- CS231n课程笔记翻译:反向传播笔记
- Unity水管 管道流水资源
- 使用循环神经网络训练语言模型(从简单起手、歌词生成器,爬虫+GRU循环网络)
- 我的世界服务器物品编辑器没用,我的世界背包编辑器服务器bug | 手游网游页游攻略大全...
- 网络流解码器配置方法
热门文章
- 汉澳sinox2013支持的PCI/USB无线网卡,购买必看
- ASP.NET操作EXCEL 合并单元格 大全
- VMware ESXi 8.0 SLIC 2.6 macOS Unlocker (Oct 2022 GA)
- 5.3 恶意代码功能演示示例(上兴远程控制2014版)
- 金网seo工具资源全套软件
- Texlive安装宏包
- android获取手机号ip地址,手机ip查询我的地址定位(网站如何抓取用户手机号和IP地址)...
- Python爬虫用到的一些浏览器代理标识
- Android复制文件
- php speex,开源语音格式speex教程