![cover](https://img-blog.csdnimg.cn/8766e38ef1c5479698a608168cebbcc9.png)
echarts 环形图
echarts 环形图,多层嵌套,自定义 legend 位置、颜色,中间插入数据及文字,颜色渐变;
Echarts 常用各类图表模板配置
注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项;
以下代码都可以复制到 Echarts 官网,直接预览;
图标模板目录
一、环形图
option = {
color: [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(43, 76, 255)' },
{ offset: 1, color: 'rgba(43, 76, 255, 0.28)' }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0, 147, 255)' },
{ offset: 1, color: 'rgba(0, 147, 255, 0.28)' }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 194, 0)' },
{ offset: 1, color: 'rgba(255, 194, 0, 0.27)' }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(183, 75, 238)' },
{ offset: 1, color: 'rgba(183, 75, 238, 0.28)' }
])
],
legend: {
type: 'scroll',
orient: 'vertical',
right: '8%',
top: 'center',
bottom: '20%',
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
align: 'left',
formatter: (val) => {
return ` Echarts \n\n ${val} | 可视化组件 | 组件`;
},
textStyle: {
color: [],
padding: [0, 0, 0, 18]
},
data: ['一级', '二级', '三级', '四级']
},
tooltip: {
trigger: 'item'
},
title: {
text: '标题',
left: 'center',
top: '40%',
textStyle: {
textAlign: 'center',
fill: 'rgba(255, 255, 255, 0.45)',
fontSize: 36,
fontWeight: 400
}
},
graphic: {
type: 'text',
left: 'center',
top: '56%',
zlevel: 1,
style: {
text: '描述',
textAlign: 'center',
fill: '#9999FF',
fontSize: 18
}
},
series: [
{
name: '环形图',
type: 'pie',
zlevel: 3, //层级
radius: ['30%', '40%'],
avoidLabelOverlap: false,
label: {
show: false, // 鼠标移上去 圆环中间显示信息
position: 'center',
formatter: () => {
return '{legend|Echarts}\r\n{name|可视化插件}';
},
rich: {
legend: {
fontSize: 25,
color: '#00DD00',
align: 'right'
},
name: {
fontSize: 12,
color: '#666'
}
}
},
labelLine: {
show: false
},
data: [
{
name: '一级',
value: '100'
},
{
name: '二级',
value: '200'
},
{
name: '三级',
value: '300'
},
{
name: '四级',
value: '400'
}
]
},
{
type: 'pie',
zlevel: 0,
silent: true,
radius: ['0%', '50%'],
color: '#FFB3FF',
label: {
show: true,
position: 'center',
formatter: () => {
return '{legend|Echarts}\r\n{name|可视化插件}';
},
rich: {
legend: {
fontSize: 30,
color: 'white',
align: 'right'
},
name: {
fontSize: 12,
color: '#FF0000'
}
}
},
data: [1]
},
{
type: 'pie',
zlevel: 1,
silent: true,
radius: ['45%', '50%'],
color: 'rgba(45, 46, 131, 0.28)',
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
color: {
x: 1,
y: 0,
x2: 1,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(34, 102, 232, 1)'
},
{
offset: 1,
color: 'rgba(34, 102, 232, 0.28)'
}
]
}
},
data: [1]
},
{
type: 'pie',
zlevel: 2,
silent: true,
radius: ['55%', '62%'],
color: 'rgba(45, 46, 131, 0.28)',
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
color: {
x: 1,
y: 0,
x2: 1,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(50, 229, 255, 1)'
},
{
offset: 1,
color: 'rgba(50, 229, 255, 0.28)'
}
]
}
},
data: [1]
}
]
};
如果需要自定义右侧 legend 的颜色, 如下例:
/**
* 可在 rich 里面,自定义富文本样式
**/
legend: {
type: 'scroll',
orient: 'vertical',
right: '8%',
top: 'center',
bottom: '20%',
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
align: 'left',
formatter: (val) => {
if (val == '一级') {
return `{a| Echarts}\n{b| 可视化组件 | 组件} \n `;
} else if (val == '二级') {
return `{c| Echarts}\n{d| 可视化组件 | 组件} \n `;
} else if (val == '三级') {
return `{e| Echarts}\n{f| 可视化组件 | 组件} \n `;
}
return ` Echarts \n\n ${val} | 可视化组件 | 组件`;
},
textStyle: {
height: 18,
color: '#FF4500',
rich: {
a: {
color: '#B8860B',
lineHeight: 18
},
b: {
color: '#3CB371',
lineHeight: 18
},
c: {
color: '#1E90FF',
lineHeight: 18
},
d: {
color: '#FFD700',
lineHeight: 18
},
e: {
color: '#FF1493',
lineHeight: 18
},
f: {
color: '#8A2BE2',
lineHeight: 18
}
}
},
data: ['一级', '二级', '三级', '四级']
},
如果需要自定义 legend 位置, 如下例:
legend: [
{
type: 'scroll',
orient: 'horizontal',
left: '10%',
top: '50%',
bottom: '20%',
icon: 'circle',
itemGap: 40,
itemWidth: 8,
itemHeight: 8,
align: 'left',
formatter: (val) => {
return `{a| Echarts}\n{b|${val} 可视化组件 | 组件} \n `;
},
textStyle: {
height: 18,
color: '#32E5FF',
rich: {
a: {
color: '#B8860B',
lineHeight: 18
},
b: {
color: '#3CB371',
lineHeight: 18
}
}
},
data: ['一级']
},
{
type: 'scroll',
orient: 'horizontal',
right: '10%',
top: '50%',
bottom: '20%',
icon: 'circle',
itemGap: 40,
itemWidth: 8,
itemHeight: 8,
align: 'left',
formatter: (val) => {
return `{a| Echarts}\n{b|${val} 可视化组件 | 组件} \n `;
},
textStyle: {
height: 18,
color: '#32E5FF',
rich: {
a: {
color: '#1E90FF',
lineHeight: 18
},
b: {
color: '#FFD700',
lineHeight: 18
}
}
},
data: ['二级']
},
{
type: 'scroll',
orient: 'horizontal',
left: '38%',
bottom: '10%',
icon: 'circle',
itemGap: 40,
itemWidth: 8,
itemHeight: 8,
align: 'left',
formatter: (val) => {
return `{1| Echarts}\n{2|${val} 可视化组件 | 组件} \n `;
},
textStyle: {
height: 18,
color: '#32E5FF',
rich: {
1: {
color: '#FF1493',
lineHeight: 18
},
2: {
color: '#8A2BE2',
lineHeight: 18
}
}
},
data: ['三级']
},
{
type: 'scroll',
orient: 'horizontal',
right: '33%',
bottom: '10%',
icon: 'circle',
itemGap: 40,
itemWidth: 8,
itemHeight: 8,
align: 'left',
formatter: (val) => {
return `{3| Echarts}\n{4|${val} 可视化组件 | 组件} \n `;
},
textStyle: {
height: 18,
color: '#32E5FF',
rich: {
3: {
color: '#7FFFD4',
lineHeight: 18
},
4: {
color: '#FF4500',
lineHeight: 18
}
}
},
data: ['四级']
}
],
如果需要自定义 legend icon 和添加边框, 如下例:
小火苗 icon :
var iconRQ ='image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACZUlEQVRYR7WX300bQRDGfyPBc0gFMRWQVBBb8j2TDoAKAhUEVxCoAFJB4PlO4lxBnApiKgg829JEuz7b92f3dm9F7sWStTPzzezM980KCZ9OGSOcsWImJcsEFzsTSTHWMSMO+WNtlWspmKX4MTZJAGzcDK0FXQAXkmN+B31vBcBU4gVhMhREEgDN+Aj8cqS6YMVESl5iy5AGYMolwndPkB+Sc/5/AWT2rk+8QVYcx07H4ApUI/jUm6FyJQU3MVUYBEDHHHGICW56oO+bS8747QFk3ANnEY6XknMccS6eBzQ+uI0reZzv4BXYsh9wh/AlJqOKHZ+lYKQZNygqBVc+214A1bzfRdx52/8c7HUZW/PdS86FC4QXgO12+IlwFJ35/qARqFHLzlC1AdX4nAA0s0SyRZ8Q32vyqU3VHQC27MpTYub9YJVSCib1Q10AU5YIH4JpK88ID8DX4Nn6AWUiBeX2rwYA7ef4vRvlkTXnHFhN+DYIADS0og0gJvudg8ReaZDUDkBFs38D2TTQNzajIWVY8X4r2XsAmz3PLzLKK2tGba3XkDK6gNX6YAgAp8JVU1MivIsuQhKAWtnagYb2Ql0n4npAeZWinxEHgPgt+V7Om1Pgv88oedUpDwingatoUHIbgJeCY+Q1OBWORm4C2EjvwsOEHR53Nnj/VHQEyacF3a5WZlJwHep09VO5c1v2qaERpDaIYB94r6Cibtd7wb8PbN5/Rr8/77IObLueSbiVnEtf5cIr2WY3MA5O7PNrbXd+58unVf559XDdKd+gjchBNmYVty8eV0ZV9gaoCWhWsKiH6j/NPeohS8oR6gAAAABJRU5ErkJggg==';
legend: {
type: 'scroll',
orient: 'vertical',
right: '2%',
top: 'center',
bottom: '20%',
icon: iconRQ,
itemWidth: 18,
itemHeight: 18,
align: 'left',
formatter: (val) => {
if (val == '一级') {
return `{f|} Echarts {b|${val}可视化组件}`;
} else if (val == '二级') {
return `{g|} Echarts {c|${val}可视化组件}`;
} else if (val == '三级') {
return `{h|} Echarts {c|${val}可视化组件}`;
} else {
return `{j|} Echarts ${val} | 可视化组件`;
}
},
textStyle: {
height: 18,
color: '#FF4500',
borderWidth: 1,
width: 200,
padding: [6, 0, 6, 36],
borderColor: '#3EE6FF',
rich: {
a: {
color: '#AECBE2',
lineHeight: 18,
height: 18
},
b: {
color: '#3958D8',
lineHeight: 18,
height: 18
},
c: {
color: '#4BADDB',
lineHeight: 18,
height: 18
},
d: {
color: '#DBE44C',
lineHeight: 18,
height: 18
},
f: {
color: '#3958D8',
lineHeight: 18,
backgroundColor: '#3958D8',
borderRadius: 5,
width: 10,
height: 10
},
g: {
color: '#e54d42',
lineHeight: 18,
backgroundColor: '#e54d42',
borderRadius: 1,
width: 10,
height: 10
},
h: {
color: '#e54d42',
lineHeight: 18,
backgroundColor: 'blue',
borderRadius: 1,
width: 20,
height: 10
},
j: {
color: '#e54d42',
lineHeight: 18,
backgroundColor: 'green',
borderRadius: 1,
width: 10,
height: 20
}
}
},
data: ['一级', '二级', '三级', '四级']
},
二、k 线图
文章链接 :https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501
三、折线图
echarts 折线图,横纵坐标轴线颜色、文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;
文章链接: https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501
文章链接:https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501
文章链接:https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501
四、横向柱状图
echarts 横向柱状图,坐标轴隐藏,网格线颜色渐变,网格默认背景,柱状图边框宽度/颜色,数据渐变,刻度线隐藏等;
文章链接: https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501
五、折线图 + 柱状图
echarts 折线图 + 柱状图,左右两侧y轴线,横纵坐标轴线颜色、文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;
文章链接: https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501
六、3D 柱状图
echarts 3D 柱状图,多个柱状图叠加,y轴内刻度线、隐藏横坐标,文字颜色,网格线,坐标轴两侧留白,数据渐变,刻度线等;
文章链接: https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501
七、工程项目可视化
echarts 工程项目可视化,依据x轴时间坐标轴,叠加展示不同阶段的项目节点,y轴展示项目阶段名、文字颜色,网格线,坐标轴两侧留白、背景色等;
文章链接: https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501
八、雷达图
echarts 雷达图,自定义指示器名称,线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等;
文章链接:https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501
九、象形柱图
echarts 象形柱图,隐藏横纵坐标轴、网格线,坐标轴两侧留白,自定义矢量图,文字提示框、图形类型、背景色等;
文章链接:https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501
十、环形占比图
echarts 环形占比图,环形图、仪表盘、刻度线,自定义提示框、颜色渐变、背景色等;
文章链接:https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501
十一、圆环动画
echarts 圆环动画,饼图、环形图、图表动画、网格线,颜色渐变,图行矢量,文字提示框、图表层级、背景色等;
文章链接:https://blog.csdn.net/aibujin/article/details/130288849?spm=1001.2014.3001.5501
更多推荐
所有评论(0)