Echarts设置饼状图保证你看的明明白白
简单的饼状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts-动画</title>
<script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script>
</head>
<div style="width: 780px;height: 400px;" id="box"></div>
</body>
<script>
let myChart = echarts.init(document.querySelector('#box'))
// 第一个颜色是从正上方开始的
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
center: ['40%', '50%'], // 饼状图的位置
/**
* radius：饼状图的大小
* 它是一个数组，第1个值表示里面的圆的大小
* 第2个值表示外面的圆的大小
* */
radius: ['45%', '60%'],
data: [
{ value: 1048, name: '名称1' },
{ value: 735, name: '名称2' },
{ value: 580, name: '名称3' },
{ value: 484, name: '名称4' },
{ value: 300, name: '名称5' }
]
}
]
}
myChart.setOption(option);
</script>
</html>
给饼状图设置渐变色
...其他配置,
data:[ 相关数据],
itemStyle: {
normal: {
label: {
padding: [0, 0],
alignTo: 'labelLine'
},
color: (list) => {
let colorList = [
{
"colorStart": "#FF9800",
"colorEnd": "#FFD180"
},
{
"colorStart": "#673AB7",
"colorEnd": "#9575CD"
},
{
"colorStart": "#0F9D58",
"colorEnd": "#4CAF50"
},
{
"colorStart": "#00BCD4",
"colorEnd": "#64FFDA"
},
{
"colorStart": "#E91E63",
"colorEnd": "#FF80AB"
},
]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
//左、下、右、上
offset: 0,
color: colorList[list.dataIndex]["colorStart"],
},
{
offset: 1,
color: colorList[list.dataIndex]["colorEnd"],
},
]);
}
}
},
给饼状图外围配置一条虚线
{ //最外部细虚线
// 类型是仪表盘
type: 'gauge',
// 位置必须和饼状图的一样，否者设置出来会有偏差
center: ['40%', '50%'],
/**
* startAngle：仪表盘起始角度。
* 圆心正右手侧为0度，正上方为90度，正左手侧为180度。
* 就是说：逆时针
* */
startAngle: 270,
// endAngle：仪表盘结束角度。最初值是：-89.9999,
endAngle: -90,
// 设置虚线的大小
radius: '75%',
// 不要显示刻度，因为仪表盘式有刻度样式的；我们这里只要圆，不要刻度
// 如果设置为 show: true,就会显示刻度样式
axisTick: {
show: false
},
// false 不显示标签
axisLabel: {
show: false
},
// 仪表盘刻度的分割段数，这里表现是外层虚线之间的间距
// splitNumber: 65 更加直接的表现是外层有65段虚线
splitNumber: 65,
axisLine: {
// 不显示仪表盘轴线。如果设置为true,外层虚线就看不见
show: false,
// lineStyle：仪表盘轴线样式。
// lineStyle: {
// // 仪表盘的轴线可以被分成不同颜色的多段，我们这里始终是同一个颜色 [1, '#E5E6E8']
// color: [
// [0.1, 'red'], // 0~10% 红轴
// [0.2, 'green'], // 10~20% 绿轴
// [0.3, 'blue'], // 20~30% 蓝轴
// ],
// width: 10
// }
},
// 分隔线样式。
splitLine: {
show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见
length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度
lineStyle: {
width: 10, // 分隔线线长。支持相对半径的百分比。
color: '#E5E6E8', // 线的颜色
}
},
// 仪表盘详情，用于显示数据。
detail: {
show: false
},
},
视觉引导线配置
...其他配置,
data:[ 相关数据],
// 标签的视觉引导线配置
labelLine: {
show: true, // 是否显示视觉引导线
length: 20, // 视觉引导线第一段的长度。
length2: 40, // 视觉引导项第二段的长度。
lineStyle: {
color: '#E5E6E8', // 这里设置扇线颜色为灰色
width: 1, // 线段宽度
type: 'solid', // 线段类型，默认为实线
}
},
为什么hover的时候视觉引导线发生了变化?
我看官网都不会发生变化.
是与版本有关还是配置项有关
hover时视觉引导线和对应的名称样式不发生改变
...其他配置,
data:[ 相关数据],
// 高亮状态的扇区和标签样式 设置饼图外围虚线
emphasis: {
// 这里设置悬停时引导线对应名称的颜色，与非悬停时保持一致
label: {
color: '#333333'
},
labelLine: {
// 这里设置悬停时引导线的颜色，与非悬停时保持一致
lineStyle: {
color: '#E5E6E8'
}
}
}
可以自定义富文本样式
...其他配置,
data:[ 相关数据],
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true,
// 标签的位置。
position: 'outside',
normal: {
textStyle: {
color: '#333333' // 设置引导线外层文字描述的颜色
},
// 字符串模板 模板变量有：
// {a}：系列名。
// {b}：数据名。
// {c}：数据值。
// {d}：百分比。
formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}',
padding: [0, -40], // 设置标签距离引导线水平方向的距离
rich: {
aisB1: {
color: '#333333',
//这里还有其他属性；大家可以去查看
},
aisC1:{
color: '#333333',
},
aisD1: {
color: '#333333', // 这是数据值的颜色
},
}
}
},
名称在引导线的上方-使用\n
因为是使用的是4.9的版本；
所以设置名称在引导线的上方使用了一点技巧；
那就是换行符 \n
formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}\n\n',
名称在引导线的上方-使用labelLayout 需要再5.0以上版本
...其他配置,
data:[ 相关数据],
// 从 v5.0.0 开始支持
labelLayout:{
// 标签垂直对齐方式，可以设置'top', 'middle', 'bottom'。
verticalAlign:'bottom',
// 标签在 y 方向上的像素偏移，设置标签在引导线的上方
dy:-4
},
饼状图中间配置一个阴影圆
// 配置里面的圆
{
type: 'gauge',
center: ['40%', '50%'], // 饼状图的位置
radius: '35%',
// 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示
// 如果是版本是5，这里可以是360
startAngle: 359.999,
endAngle: 0,
splitNumber: 4,
zlevel: 10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[1, '#fff']
],
width: '100%',
shadowColor: '#CDCDCD', //背景阴影颜色
shadowOffsetX: 0, // X偏移量
shadowOffsetY: 0, // Y偏移量
shadowBlur: 10, // 模糊范围
}
},
splitLine: { //分隔线样式
show: false,
},
axisLabel: { //刻度标签
show: false,
},
axisTick: { //刻度样式
show: false,
},
detail: {
show: false,
},
//仪表盘指针。
pointer: {
// 不显示仪表盘中的指针
show: false,
},
title: {
// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
// 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
offsetCenter: ['0%', "0%"],
color: '#999999',
},
data: [{
name: "2024-05-09\n15:36:25",
}]
},
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts-动画</title>
<script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script>
<!-- <script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.js"></script> -->
</head>
<div style="width: 780px;height: 400px;" id="box"></div>
</body>
<script>
let myChart = echarts.init(document.querySelector('#box'))
// 第一个颜色是从正上方开始的
let option = {
tooltip: {
trigger: 'item'
},
series: [
{ //最外部细虚线
// 类型是仪表盘
type: 'gauge',
// 位置必须和饼状图的一样，否者设置出来会有偏差
center: ['40%', '50%'],
/**
* startAngle：仪表盘起始角度。
* 圆心正右手侧为0度，正上方为90度，正左手侧为180度。
* 就是说：逆时针
* */
startAngle: 270,
// endAngle：仪表盘结束角度。最初值是：-89.9999,
endAngle: -90,
// 设置虚线的大小
radius: '75%',
// 不要显示刻度，因为仪表盘式有刻度样式的；我们这里只要圆，不要刻度
// 如果设置为 show: true,就会显示刻度样式
axisTick: {
show: false
},
// false 不显示标签
axisLabel: {
show: false
},
// 仪表盘刻度的分割段数，这里表现是外层虚线之间的间距
// splitNumber: 65 更加直接的表现是外层有65段虚线
splitNumber: 65,
axisLine: {
// 不显示仪表盘轴线。如果设置为true,外层虚线就看不见
show: false,
// lineStyle：仪表盘轴线样式。
// lineStyle: {
// // 仪表盘的轴线可以被分成不同颜色的多段，我们这里始终是同一个颜色 [1, '#E5E6E8']
// color: [
// [0.1, 'red'], // 0~10% 红轴
// [0.2, 'green'], // 10~20% 绿轴
// [0.3, 'blue'], // 20~30% 蓝轴
// ],
// width: 10
// }
},
// 分隔线样式。
splitLine: {
show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见
length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度
lineStyle: {
width: 10, // 分隔线线长。支持相对半径的百分比。
color: '#E5E6E8', // 线的颜色
}
},
// 仪表盘详情，用于显示数据。
detail: {
show: false
},
},
// 圆环
{
type: 'pie',
center: ['40%', '50%'], // 饼状图的位置
/**
* radius：饼状图的大小
* 它是一个数组，第1个值表示里面的圆的大小
* 第2个值表示外面的圆的大小
* */
radius: ['45%', '60%'],
itemStyle: {
normal: {
label: {
padding: [0, 0],
alignTo: 'labelLine'
},
color: (list) => {
let colorList = [
{
"colorStart": "#FF9800",
"colorEnd": "#FFD180"
},
{
"colorStart": "#673AB7",
"colorEnd": "#9575CD"
},
{
"colorStart": "#0F9D58",
"colorEnd": "#4CAF50"
},
{
"colorStart": "#00BCD4",
"colorEnd": "#64FFDA"
},
{
"colorStart": "#E91E63",
"colorEnd": "#FF80AB"
},
]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
//左、下、右、上
offset: 0,
color: colorList[list.dataIndex]["colorStart"],
},
{
offset: 1,
color: colorList[list.dataIndex]["colorEnd"],
},
]);
}
}
},
// 标签的视觉引导线配置
labelLine: {
show: true, // 是否显示视觉引导线
length: 20, // 视觉引导线第一段的长度。
length2: 50, // 视觉引导项第二段的长度。
lineStyle: {
color: '#E5E6E8', // 这里设置扇线颜色为灰色
width: 1, // 线段宽度
type: 'solid', // 线段类型，默认为实线
}
},
// 从 v5.0.0 开始支持 标签的统一布局配置。
labelLayout:{
// 标签垂直对齐方式，可以设置'top', 'middle', 'bottom'。
verticalAlign:'bottom',
// 标签在 y 方向上的像素偏移，设置标签在引导线的上方
dy:-4
},
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true,
// 标签的位置。
position: 'outside',
normal: {
textStyle: {
color: '#333333' // 设置引导线外层文字描述的颜色
},
// 字符串模板 模板变量有：
// {a}：系列名。
// {b}：名称。
// {c}：数据值。
// {d}：百分比。
formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}',
padding: [0, -40], // 设置标签距离引导线水平方向的距离
rich: {
aisB1: {
color: '#333333',
},
aisC1: {
color: '#333333',
},
aisD1: {
color: '#333333', // 这是数据值的颜色
},
}
}
},
data: [
{ value: 1048, name: '名称1' },
{ value: 735, name: '名称2' },
{ value: 580, name: '名称3' },
{ value: 484, name: '名称4' },
{ value: 300, name: '名称5' }
],
// 高亮状态的扇区和标签样式 设置饼图外围虚线
emphasis: {
// 这里设置悬停时引导线对应名称的颜色，与非悬停时保持一致
label: {
color: '#333333'
},
labelLine: {
// 这里设置悬停时引导线的颜色，与非悬停时保持一致
lineStyle: {
color: '#E5E6E8'
}
}
}
},
// 配置里面的圆
{
type: 'gauge',
center: ['40%', '50%'], // 饼状图的位置
radius: '35%',
// 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示
// 如果是版本是5，这里可以是360
startAngle: 359.999,
endAngle: 0,
splitNumber: 4,
zlevel: 10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[1, '#fff']
],
width: '100%',
shadowColor: '#CDCDCD', //背景阴影颜色
shadowOffsetX: 0, // X偏移量
shadowOffsetY: 0, // Y偏移量
shadowBlur: 10, // 模糊范围
}
},
splitLine: { //分隔线样式
show: false,
},
axisLabel: { //刻度标签
show: false,
},
axisTick: { //刻度样式
show: false,
},
detail: {
show: false,
},
//仪表盘指针。
pointer: {
// 不显示仪表盘中的指针
show: false,
},
title: {
// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
// 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
offsetCenter: ['0%', "0%"],
color: '#999999',
},
data: [{
name: "2024-05-09\n15:36:25",
}]
},
]
}
myChart.setOption(option);
</script>
遇见问题，这是你成长的机会，如果你能够解决，这就是收获。
作者：晚来南风晚相识
出处：https://www.cnblogs.com/IwishIcould/
本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。
出处：https://www.cnblogs.com/IwishIcould/
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！
万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
支付宝
微信
如果文中有什么错误，欢迎指出。以免更多的人被误导。
