vue+Echarts 圆环图表
效果图:配置项option:option: {backgroundColor: 'transparent',color: ['#3060ff', '#44c6fe', '#ffc455', '#25dd96', '#25cedd', '#4AEAB0'],tooltip: {trigger: 'item',formatter: function(params) {const co
·
效果图:
配置项option:
option: {
backgroundColor: 'transparent',
color: ['#3060ff', '#44c6fe', '#ffc455', '#25dd96', '#25cedd', '#4AEAB0'],
tooltip: {
trigger: 'item',
formatter: function(params) {
const color = params.color
const dotHtml =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
color +
'"></span>'
return dotHtml + params.name + ':' + params.value + ' 台'
}
},
title: [
{
text: '{val|0}\n{name|异常总数}',
top: 'center',
left: 'center',
textStyle: {
rich: { //自定义样式
name: {
fontSize: 12,
fontWeight: 'normal',
color: '#999'
},
val: {
fontSize: 38,
fontWeight: 'bold',
color: 'white'
}
}
}
}
],
series: [
{ //主体圆环,带颜色部分
type: 'pie',
radius: ['47%', '72%'],
center: ['50%', '50%'],
data: [
{
name: '总体振动',
value: '4'
},
{
name: '噪声声压',
value: '4'
},
{
name: '表面温度',
value: '2'
},
{
name: '表面温升',
value: '2'
},
{
name: '其他',
value: '4'
}
],
z: 666,
hoverAnimation: true,
itemStyle: { //圆环部分的样式
normal: {
borderColor: '#242e43',
borderWidth: 2
}
},
labelLine: { // 每段环延伸出去的线条
length: 5, //第一段折线的长度
length2: 40, //第二段折线的长度
lineStyle: {
type: 'dashed',
cap: 'round'
}
},
label: { // 每段圆环延伸出去的文字说明
normal: {
formatter: function(params) {
if (params.name !== '') {
return '{name|' + params.name + '}' + '\n' + '{value|' + params.percent + '%}'
} else {
return ''
}
},
rich: {
name: {
fontSize: 12,
color: '#999',
lineHeight: 20
},
value: {
fontSize: 12,
color: 'white'
}
}
}
}
},
{ //最外层圆环 装饰用,不用来统计数据
type: 'pie',
radius: ['83%', '100%'],
hoverAnimation: false,
name: '',
label: {
show: false
},
labelLine: {
show: false
},
data: [
{
name: '',
value: 0,
itemStyle: {
normal: {
color: '#2f3e65'
}
}
}
],
tooltip: {
formatter: function(params) {
return ''
}
}
},
{ //最内层圆形,有渐变效果,用于图表装饰
type: 'pie',
radius: ['0%', '55%'],
hoverAnimation: false,
name: '',
label: {
show: false
},
labelLine: {
show: false
},
data: [
{
name: '',
value: 0,
itemStyle: { // 给圆设置渐变色
color: {
type: 'radial', //径向渐变
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0.5, color: 'rgba(40, 66, 133, 0)' // 0% 处的颜色
}, {
offset: 1, color: '#284285' // 100% 处的颜色 #284285 rgba(255,255,255, 0)
}]
}
}
}
],
tooltip: {
formatter: function(params) {
return ''
}
}
}
]
}
更多推荐
已为社区贡献27条内容
所有评论(0)