代码如下
var colorSet = {
color: 'rgba(2, 253, 253, 1)'
};
var color1 = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255,255,255,0.1)"
},
{
offset: 1,
color: "rgba(255,255,255,0.3)"
}
],
global: false
}
var color2 = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(2, 253, 253,0.09)"
},
{
offset: 1,
color: "rgba(2, 253, 253,0.09)"
}
],
global: false
}
var dataArr = 44
option = {
backgroundColor: '#0E1327',
// tooltip: {
// formatter: "{a}
{b} : {c}%"
// },
series: [
// 最外边的线
{
name: "内部进度条",
type: "gauge",
// center: ['20%', '50%'],
radius: '52%',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[dataArr / 100, colorSet.color],
[1, colorSet.color]
],
width: 2
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
color:"#ffffff"
},
detail: {
show: false,
formatter: function(value) {
if (value !== 0) {
var num = Math.round(value ) ;
return parseInt(num).toFixed(0)+"%";
} else {
return 0;
}
},
offsetCenter: [0, 67],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 18,
fontWeight: '700',
color: '#ffffff'
}
},
title: { //标题
show: false,
offsetCenter: [0, 46], // x, y，单位px
textStyle: {
color: "rgba(0,0,0,0)",
fontSize: 14, //表盘上的标题文字大小
fontFamily: 'PingFangSC'
}
},
data: [{
// name: "",
value: dataArr,
}],
//markPoint:{
// symbol:'circle',
// symbolSize:140,
// data:[
// // {
// // value: dataArr ,
// // x:'10%',
// // y:'10%',
// // itemStyle:{color:'#FF9933'}}
// ],
// itemStyle:{
// normal:{
// label:{
// show: true,
// color: '#FFF',//气泡中字体颜色
// fontSize: 60
// }
// }
// }
// },
pointer: {
show: true,
length: '70%',
radius: '20%',
width: 3 //指针粗细
},
itemStyle: { // 仪表盘指针样式。
color: "#FFF", // 指针颜色，默认(auto)取数值所在的区间的颜色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
// shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", // 阴影颜色。支持的格式同color。
},
animationDuration: 4000,
},
// 内部阴影
{
name: "内部阴影",
type: "gauge",
radius: '52%',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[dataArr / 100, new echarts.graphic.LinearGradient(
0, 1, 0, 0, [{
offset: 0,
color: 'rgba(2, 253, 253,0.2)',
}, {
offset: 0.5,
color: 'rgba(2, 253, 253,0.2)',
},
{
offset: 1,
color: 'rgba(2, 253, 253,0.2)',
}
]
)],
[
1, 'rgba(28,128,245,0)'
]
],
width: 50
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
},
//外部刻度
{
name: '外部刻度',
type: 'gauge',
// center: ['20%', '50%'],
radius: '50%',
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 5, //刻度数量
startAngle: 225,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: [
[1, 'rgba(0,0,0,0)']
]
}
},
//仪表盘轴线
axisLabel: {
show: false,
color: '#ffffff',
fontSize:14,
fontFamily:'SourceHanSansSC-Regular',
fontWeight:'bold',
// position: "top",
distance: -30,
formatter: function(v) {
switch (v + '') {
case '0':
return '0';
case '10':
return '10';
case '20':
return '20';
case '30':
return '30';
case '40':
return '40';
case '50':
return '50';
case '60':
return '60';
case '70':
return '70';
case '80':
return '80';
case '90':
return '90';
case '100':
return '100';
}
}
},
//刻度标签。
axisTick: {
show: true,
splitNumber: 3,
distance: 5,
lineStyle: {
color: color1, //用颜色渐变函数不起作用
width: 1,
},
length: -10
}, //刻度样式
splitLine: {
distance: 10,
show: false,
length: -12,
lineStyle: {
color: "#ffffff", //用颜色渐变函数不起作用
}
},
//分隔线样式
detail: {
show: false
}
},
// 内部进度条
{
name: "内部进度条",
type: "gauge",
// center: ['20%', '50%'],
radius: '17%',
startAngle: 90,
endAngle: -270,
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[dataArr / 100, colorSet.color],
[1, colorSet.color]
],
width: 1
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
color:"#ffffff"
},
detail: {
formatter: function(value) {
if (value !== 0) {
var num = Math.round(value ) ;
return parseInt(num).toFixed(0)+"%";
} else {
return 0;
}
},
offsetCenter: [0, 67],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 18,
color: "#ffffff"
}
},
title: { //标题
show: true,
offsetCenter: [0, 46], // x, y，单位px
textStyle: {
color: "#fff",
fontSize: 14, //表盘上的标题文字大小
fontWeight: 400,
fontFamily: 'MicrosoftYaHei'
}
},
// data: [{
// name: "去年优良率",
// value: dataArr,
// itemStyle:{
// color:"#ffffff",
// fontFamily: "MicrosoftYaHei",
// fontSize:14
// }
// }],
pointer: {
show: false,
length: '70%',
radius: '20%',
width: 3 //指针粗细
},
animationDuration: 4000,
},
//指针上的圆
{
type: 'pie',
tooltip: {
show: false
},
hoverAnimation: false,
legendHoverLink: false,
radius: ['0%', '15%'],
center: ['50%', '50%'],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 120,
itemStyle: {
normal: {
// color: {
// // 径向渐变
// type: 'radial',
// // x: 0.5,
// // y: 0.5,
// // r: 0.5,
// colorStops: [{
// offset: 0,
// color: "rgba(2, 253, 253,0.02)" // 0% 处的颜色
// },
// {
// offset: 0.5,
// color: "rgba(2, 253, 253,0.2)" // 50% 处的颜色
// },
// {
// offset: 1,
// color: "rgba(2, 253, 253,0.3)" // 100% 处的颜色
// }
// ]},
color:"#479da2 "
},
}
}]
},
]
};
参考阅读
您阅读本篇文章共花了：
发表评论