注意： 这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；
以下代码都可以复制到 Echarts 官网，直接预览；
图标模板目录 Echarts 常用各类图表模板配置一、环形图二、k 线图三、折线图四、横向柱状图五、折线图 + 柱状图
一、环形图
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: ['四级']
}
],
文章链接 ：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
四、横向柱状图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
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）