效果图:
// 颜色
let colorList = [
'#0F8A91',
'#87651D',
'#188B56'
];
let colorList1 = [
'#0BF7FF',
'#FFB522',
'#22FF91'
];
let data = [10,22,15]
let seriesOption = [
{
name: 'small',
type: 'pie',
radius: ['32%', '40%'],
center: ['50%', '50%'],
color: colorList1,
zlevel: 2,
hoverAnimation: false,
label: {
show: false,
},
itemStyle: {
borderWidth:7,
borderColor: '#041837',
},
labelLine: {
show: false,
},
data,
},
{
name: 'big',
type: 'pie',
radius: ['36%', '44%'],
center: ['50%', '50%'],
color: colorList,
zlevel: 3,
label: {
show: false,
position: 'center',
},
labelLine: {
show: false,
},
itemStyle: {
borderWidth:8,
borderColor: '#041837',
},
color: ['red', 'blue', 'pink'],
data: data.map((item, i) => {
return {
value: item, itemStyle: { normal: { color: colorList[i] } }
}
})
},
];
option = {
backgroundColor: '#041837',
title: {
text: data.reduce((per, cur) => per + cur, 0),
subtext: '总数量',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
color: '#fff',
fontSize: 27,
},
subtextStyle: {
fontSize:21,
color: '#999999',
},
},
tooltip: {
show: false,
},
series: seriesOption,
};
2.仪表盘+环组合
option = {
backgroundColor: '#000',
title: [{
text: '标配',
x: 'center',
top: '50%',
textStyle: {
color: '#FFFFFF',
fontSize: 20
}
},
{
text: '84%',
x: 'center',
top: '45%',
textStyle: {
fontSize: 40,
color: '#FFFFFF',
fontFamily: 'DINAlternate-Bold, DINAlternate'
}
}
],
series: [{
type: 'pie',
zlevel: 1,
silent: true,
radius: ['40%', '41%'],
hoverAnimation: false,
color: "rgba(88,142,197,0.5)",
// animation:false, //charts3 no
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [1]
}, {
name: '中环',
type: 'gauge',
splitNumber: 60,
radius: '35%',
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9999,
axisLine: {
show: false
},
axisTick: {
show: true,
length: 38,
splitNumber: 3,
lineStyle: {
color: 'rgba(88,142,197,0.5)'
}
},
splitLine: {
show: false,
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
name: "内环1",
type: 'gauge',
splitNumber: 60,
radius: '25%',
center: ['50%', '50%'],
startAngle: 90,
endAngle: -270,
axisLine: {
show: false,
lineStyle: {
color: [
[0.84, 'rgba(87, 141, 161, 1)'],
[1, 'transparent']
]
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 22,
lineStyle: {
color: 'auto',
width: 2.5
}
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
name: "内环2",
type: 'gauge',
splitNumber: 60,
radius: '23%',
center: ['50%', '50%'],
startAngle: 90,
endAngle: -270,
axisLine: {
show: false,
lineStyle: {
color: [
[0.84, 'rgba(87, 141, 161, 1)'],
[1, 'transparent']
]
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 22,
lineStyle: {
color: 'auto',
width: 6
}
},
axisLabel: {
show: false
},
detail: {
show: false
}
}
]
};
3.平滑折线图
代码:
let xLabel = ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023']
let dataVal = ['50', "87", "56", "77", "54", "45", "66", "55"]
option = {
backgroundColor: '#151515',
legend: {
show: false
},
grid: {
top: '55%',
left: '30%',
right: '30%',
bottom: '15%',
// containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: ['20%', '20%'], // 距离y轴的距离
axisLine: { //坐标轴轴线相关设置。
数学上的x轴
show: false
},
axisLabel: { //坐标轴刻度标签的相关设置
textStyle: {
color: 'rgba(188, 188, 188, 1)',
padding: 16,
fontSize: 14
},
formatter: function (data) {
return data
}
},
splitLine: {
show: false
},
axisTick: {
show: false,
},
data: xLabel
}],
yAxis: [{
min: 0,
splitLine: {
show: true,
lineStyle: {
color: "rgba(63, 87, 109, .3)",
type: 'dashed'
}
},
axisLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(188, 188, 188, 1)',
padding: 16
},
formatter: function (value) {
if (value === 0) {
return value
}
return value
}
},
axisTick: {
show: true,
lineStyle: {
type: 'dotted',
width: 4,
color: 'rgba(255, 255, 255, .5)'
}
},
}],
series: [{
name: '人数',
type: 'line',
symbolSize: 0, // 取消折线点
smooth: true, // 平滑
lineStyle: {
normal: {
width: 2,
color: "rgba(136, 179, 204, 1)", // 线条颜色
}
},
areaStyle: { //区域填充样式
normal: {
//线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。
如果最后一个参数是‘true’,则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(28, 223, 253, .1)"
},
{
offset: 1,
color: "rgba(28, 223, 253, .1)"
}
], false),
}
},
data: dataVal
}]
};
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)