makepie2月份要停用了，搬一些社区例子
简单装饰仪表盘+外面会转动
let angle = 0;//角度，用来做简单的动画效果的
let value = 55.33;
option = {
backgroundColor:"#061740",
title: {
text: '{a|'+ value +'}{c|%}',
x: 'center',
y: 'center',
textStyle: {
rich:{
a: {
fontSize: 48,
color: '#29EEF3'
},
c: {
fontSize: 20,
color: '#ffffff',
// padding: [5,0]
}
}
}
},
legend: {
type: "plain",
orient: "vertical",
right: 0,
top: "10%",
align: "auto",
data: [{
name: '涨价后没吃过',
icon: "circle"
}, {
name: '天天吃',
icon: "circle"
}, {
name: '三五天吃一次',
icon: "circle"
}, {
name: '半个月吃一次',
icon: "circle"
}],
textStyle: {
color: "white",
fontSize: 16,
padding: [10, 1, 10, 0]
},
selectedMode:false
},
series: [ {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (0+angle) * Math.PI / 180,
endAngle: (90+angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (180+angle) * Math.PI / 180,
endAngle: (270+angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (270+-angle) * Math.PI / 180,
endAngle: (40+-angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (90+-angle) * Math.PI / 180,
endAngle: (220+-angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
let point = getCirlPoint(x0, y0, r, (90+-angle))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4
},
style: {
stroke: "#0CD3DB",//粉
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
}, {
name: "ring5", //绿点
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
let point = getCirlPoint(x0, y0, r, (270+-angle))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4
},
style: {
stroke: "#0CD3DB", //绿
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
}, {
name: '吃猪肉频率',
type: 'pie',
radius: ['58%', '45%'],
silent: true,
clockwise: true,
startAngle: 90,
z: 0,
zlevel: 0,
label: {
normal: {
position: "center",
}
},
data: [{
value: value,
name: "",
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#4FADFD' // 0% 处的颜色
}, {
offset: 1,
color: '#28E8FA' // 100% 处的颜色
}]
},
}
}
},
{
value: 100-value,
name: "",
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: "#173164"
}
}
}
]
},
{
name: "",
type: "gauge",
radius: "58%",
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9,
splitNumber: 8,
hoverAnimation: true,
axisTick: {
show: false
},
splitLine: {
length: 60,
lineStyle: {
width: 5,
color: "#061740"
}
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ""
}]
},
]
};
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
return {
x: x1,
y: y1
}
}
function draw(){
angle = angle+3
myChart.setOption(option, true)
//window.requestAnimationFrame(draw);
}
setInterval(function() {
//用setInterval做动画感觉有问题
draw()
}, 100);
半个仪表盘
option = {
backgroundColor: "#072B79",
tooltip: {
formatter: "{b}{c}"
},
series: [{
tooltip: {
show: false
},
"name": 'wrap',
"type": 'pie',
"hoverAnimation": false,
"legendHoverLink": false,
center: ['50%','60%'],
"radius": ['0%', '7%'],
"z": 5,
"label": {
"normal": {
"show": false,
"position": 'center'
},
"emphasis": {
"show": false
}
},
"labelLine": {
"normal": {
"show": false
}
},
"data": [{
"value": 100,
itemStyle: {
normal: {
color: "#072B79"
},
emphasis: {
color: "#072B79"
}
}
}]
}, {
tooltip: {
show: false
},
"name": 'wrap',
"type": 'pie',
"hoverAnimation": false,
"legendHoverLink": false,
center: ['50%','60%'],
"radius": ['6%', '8%'],
"z": 5,
"label": {
"normal": {
"show": false,
"position": 'center'
},
"emphasis": {
"show": false
}
},
"labelLine": {
"normal": {
"show": false
}
},
"data": [{
"value": 100,
itemStyle: {
normal: {
color: "#24D8E7"
},
emphasis: {
color: "#24D8E7"
}
}
}]
}, {
tooltip: {
show: false
},
name: '刻度',
type: 'gauge',
radius: '83%',
z: 1,
min: 0,
max: 1,
center: ['50%','60%'],
splitNumber: 5, //刻度数量
startAngle: 180,
endAngle: 0,
axisLine: {
show: true,
lineStyle: {
width: 5,
color: [
[0.12, '#E71A6D'],
[0.35, '#F88168'],
[0.63, '#FBF76B'],
[0.8, '#7AD4DF'],
[1, '#70C27E'],
]
}
}, //仪表盘轴线
axisLabel: {
show: false
}, //刻度标签。
axisTick: {
show: true,
lineStyle: {
color: 'auto',
width: 0
},
length: -15
}, //刻度样式
splitLine: {
show: true,
length: 0,
lineStyle: {
color: 'auto',
width: 2
}
}, //分隔线样式
detail: {
show: false
},
pointer: {
show: false
}
}, {
name: '本期',
type: 'gauge',
radius: '80%',
min: 0,
max: 1,
center: ['50%','60%'],
data: [{
value: 0.89,
name: '本期'
}],
splitNumber: 12, //刻度数量
startAngle: 180,
endAngle: 0,
z: 5,
axisLine: {
show: true,
lineStyle: {
width: 0,
color: [
[0.12, '#E71A6D'],
[0.35, '#F88168'],
[0.63, '#FBF76B'],
[0.8, '#7AD4DF'],
[1, '#70C27E'],
]
}
}, //仪表盘轴线
axisLabel: {
show: true,
color: '#fff',
fontSize:20,
distance: -70,
formatter:function(params){
var value = params.toFixed(2)
if(value == 0.00){
return '危'
}else if(value == 0.25){
return '差'
}else if(value == 0.50){
return '中'
}else if(value == 0.75){
return '良'
}else if(value == 1.00){
return '优'
}else{
return ''
}
}
}, //刻度标签。
axisTick: {
splitNumber: 10,
show: true,
lineStyle: {
color: 'auto',
width: 2
},
length: 20,
}, //刻度样式
splitLine: {
show: true,
length: 25,
lineStyle: {
color: 'auto',
width: 5
}
}, //分隔线样式
"itemStyle": {
"normal": {
"color": "#24D8E7" //指针颜色
}
},
pointer: {
width: 10,
length: '80%'
},
detail: {
formatter: function(params){
return (params*100).toFixed(0) + '%'
},
fontSize: 50,
color: "#fff",
offsetCenter: ['0%', '-35%']
},
title: {
offsetCenter: ['0', '-60%'],
fontSize: 40,
color: "#fff",
show: true
},
}]
};
一个数据的简单仪表盘
option = {
radius: '80%',
series: [{
name: '业务指标',
type: 'gauge',
startAngle: 210,
endAngle: -30,
min: 0,
max: 1,
splitNumber: 1000,
borderRadius: '10px',
roundCap: true,
radius: '60%', // 可调整该属性修改圆环大小
center: ["50%", "50%"],
progress: {
show: true,
width: 50,
itemStyle: {
opacity: 1,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(100,200,228,1)'
},
{
offset: .5,
color: 'rgba(48,62,245,1)'
},
{
offset: 1,
color: 'rgba(48,62,245,1)'
}]
)
}
},
itemStyle: {
color: '#58D9F9',
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
axisLine: {
// roundCap: true,
lineStyle: {
width: 50,
color: [
[0.2,
{
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#F5F5F5' // 0% 处的颜色
}, {
offset: 1, color: '#DADADC' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
],
[0.4, {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#F5F5F5' // 0% 处的颜色
}, {
offset: 1, color: '#DADADC' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}],
[0.6, {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#F5F5F5' // 0% 处的颜色
}, {
offset: 1, color: '#DADADC' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}],
[0.8, {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#F5F5F5' // 0% 处的颜色
}, {
offset: 1, color: '#DADADC' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}],
[1, {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#F5F5F5' // 0% 处的颜色
}, {
offset: 1, color: '#DADADC' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}]
]
}
},
pointer: {
width: 0,
},
axisTick: {
length: 12,
lineStyle: {
color: 'auto',
width: 0
}
},
splitLine: {
length: 20,
lineStyle: {
color: 'auto',
width: 0
}
},
axisLabel: {
color: '#464646',
fontSize: 20,
distance: -60,
fontFamily: 'Source Han Sans SC',
formatter: function (value) {
}
},
title: {
offsetCenter: [0, '-30%'],
fontSize: 40,
fontFamily: 'DIN Alternate',
color: '#1678FF'
},
detail: {
fontSize: 60,
fontFamily: 'DIN Alternate',
offsetCenter: [0, '15%'],
valueAnimation: true,
formatter: function (value) {
return Math.round(value * 1000);
},
color: '#1678FF'
},
data: [{
value: 0.735,
name: '芝麻分'
}]
}]
};
朴实仪表盘
option = {
backgroundColor: '#0E1327',
title: [{
text: 'CPU利用率',
left: '3%',
top: '5%',
textStyle: {
color: '#fff',
fontSize:18,
fontFamily: 'cuhei',
fontWeight: 300,
}
},{
text: 'CPU利用率',
left: 'center',
top: '65%',
textStyle: {
color: '#3488db',
fontSize:22,
fontFamily: 'cuhei',
fontWeight: 600,
}
}],
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 15,
color: [
[
0.2, '#42e4fb'
],
[
0.8, '#3488db'
],
[
1, '#f9387f'
]
],
}
},
radius: '50%',
markPoint: {
// 仪表盘指针圆
animation: false,
silent: true,
data: [{
x: '50%',
y: '50%',
symbol: 'circle',
symbolSize: 40,
itemStyle: {
color: 'auto',
},
}, {
x: '50%',
y: '50%',
symbol: 'circle',
symbolSize: 20,
itemStyle: {
color: '#fff'
},
}],
},
pointer: {
// 仪表盘指针
//icon:'none',
width: 10,
length: "60%",
itemStyle: {
color: 'auto'
},
},
axisTick: {
distance: 0,
length: 5,
lineStyle: {
color: 'auto',
width: 2
}
},
splitLine: {
distance: 0,
length: 15,
lineStyle: {
color: 'auto',
width: 4
}
},
axisLabel: {
color: '#3488db',
distance: 30,
fontSize: 20
},
detail: {
//valueAnimation: true,
formatter: '{value} %',
color: 'white'
},
data: [{
value: 85
}]
},
]
};
简单仪表盘 100%
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QQTkjNmJ-1642648636421)(C:\Users\Q\AppData\Local\Temp42645365342.png)]](https://code84.com/wp-content/uploads/2022/09/cbed9cc81f2c48ce8a82038a7b2ffef2.png)
版权声明：本文为qq_34200636原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。