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} <br/>{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和labelLine的位置的更多相关文章
- Echarts 饼状图自定义颜色
今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...
- jquery echarts 饼状图
var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...
- canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- 关于echarts中的饼状图的label文字显示过长的问题
label: { normal: { fontSize: 14, formatter(v) { let text = v.name let count = text.indexOf('¥') cons ...
- ECharts饼状图添加事件
和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
- echarts 饼状图 改变折线长度
$(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...
- vue+element+echarts饼状图+可折叠列表
html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...
- echarts 饼状图
说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4 c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...
- Echarts饼状图
<head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...
随机推荐
- selenium===使用docker搭建selenium分布式测试环境
准备: #请在此之前先了解,selenium grid :参考:selenium-grid ,下载地址,win-本地部署过程 >>>环境准备: Linux操作系统 >>& ...
- Golang 实现UDPServer并发送消息到ActiveMQ
示例代码 package main import ( "net" "os" "github.com/gpmgo/gopm/modules/goconf ...
- CVI中调用VC动态库
1.在VC环境中建立新工程,创建32位动态库(Win32 Dynamic-Link Library) -> A simple DLL project 2.在工程中可加入别的动态库,在工程菜单中 ...
- Houdini Python开发实战 课程笔记
P2 + P3 + P4 + P5 - 基础: 1. Houdini中使用Python的地方 2. Textport:可使用cd.ls等路径操作的命令(命令前加%,可在python中使用) 3. So ...
- django orm 改动数据库中已存在的表(添加、删除、修改表字段)
python3 manage.py makemigrations --empty api # 因为我的models.py文件并直接在项目根目录,而是根目录下的api目录中 python3 manage ...
- [转]Nodejs利用phantom 将html生成图片
原文地址:https://www.jianshu.com/p/8679f469e8d6 不过下载起来比较麻烦. 需要手动下载,然后将其添加到PATH中. 下载链接: https://sl-m-ssl. ...
- Javascript / Nodejs call 和 apply
call: 改变了函数运行的作用域,即改变函数里面this的指向apply:同call,apply第二个参数是数组结构 例如: this.name = 'Ab'var obj = {name: 'BB ...
- cube-slide组件的应用
<template> <div> <cube-slide :data="items"/> </div> </template& ...
- Kubernetes之使用kubeadm部署
参考:https://www.cnblogs.com/caoxb/p/11243472.html 部署虚拟机规划 192.168.1.11 k8s-master 192.168.1.12 k8s-no ...
- 浅谈PageRank
浅谈PageRank 2017-04-25 18:00:09 guoziqing506 阅读数 17873更多https://blog.csdn.net/guoziqing506/article/de ...