echarts实现环状渐变图
最近后台⼜设计了新的ui，我这个后端⼯程师⼜开始写前端页⾯了。。。
话不多说，上效果图，上代码，注意echarts版本会影响细微的表现效果
//  初始化统计图表
var xunjian = echarts.ElementById('xunjian_echart'));
var baogao = echarts.ElementById('baogao_echart'));
var lvxin = echarts.ElementById('lvxin_echart'));
//设置数据
option_xunjian = {
backgroundColor: 'white',
padding: 15,
title: {
text: '巡检信息',
x: 'left',
y: 'top',
itemGap: 10,
backgroundColor: 'white',
// 主标题⽂本样式设置
textStyle: {
fontSize: 16,
fontWeight: 'normal',
color: '#333333'
},
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'horizontal',
y: 'bottom',
data: ['正常', '超时', '报警',],
},
series: [
{
name: '状态',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 330, name: '正常', itemStyle: {                            color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#2D38FF'},                                    {offset: 1, color: '#969BFB'}                                ],
globalCoord: true // 缺省为 false                            }
},
},
{
value: 310, name: '超时', itemStyle: {                            color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#FFC700'},                                    {offset: 1, color: '#FFE13C'}                                ],
globalCoord: true // 缺省为 false                            }
}
},
{
value: 234, name: '报警', itemStyle: {                            color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#FF4200'},                                    {offset: 1, color: '#FE8257'}                                ],
globalCoord: true // 缺省为 false                            }
}
},
]
}
]
};
option_baogao = {
backgroundColor: 'white',
title: {
text: '报告信息',
x: 'left',
y: 'top',
itemGap: 10,
backgroundColor: 'white',
backgroundColor: 'white',
// 主标题⽂本样式设置
textStyle: {
fontSize: 16,
fontWeight: 'normal',
color: '#333333'
},
},
tooltip: {
trigger: 'item',
show: true,
confine: true,
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'horizontal',
y: 'bottom',
data: ['正常', '超时', '报警',],
},
series: [
{
name: '状态',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
color: 'rgba(255, 255, 255, 0.3)',
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
data: [
{
value: 630, name: '正常', itemStyle: {                            color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#2D38FF'},                                    {offset: 1, color: '#969BFB'}                                ],
globalCoord: true // 缺省为 false                            }
},
},
{
value: 310, name: '超时', itemStyle: {                            color: {
type: 'linear',
x: 0,
y: 0,
fontweight几百正常x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#FFC700'},
{offset: 0, color: '#FFC700'},                                    {offset: 1, color: '#FFE13C'}                                ],
globalCoord: true // 缺省为 false                            }
}
},
{
value: 234, name: '报警', itemStyle: {                            color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#FF4200'},                                    {offset: 1, color: '#FE8257'}                                ],
globalCoord: true // 缺省为 false                            }
}
},
]
}
]
};
option_lvxin = {
backgroundColor: 'white',
title: {
text: '滤芯信息',
x: 'left',
y: 'top',
itemGap: 10,
backgroundColor: 'white',
// 主标题⽂本样式设置
textStyle: {
fontSize: 16,
fontWeight: 'normal',
color: '#333333'
},
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'horizontal',
y: 'bottom',
data: ['正常', '超时', '报警',],
},
series: [
{
name: '来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 580, name: '正常', itemStyle: {                            color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#2D38FF'},                                    {offset: 1, color: '#969BFB'}                                ],
globalCoord: true // 缺省为 false                            }
},
},
{
value: 310, name: '超时', itemStyle: {                            color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#FFC700'},                                    {offset: 1, color: '#FFE13C'}                                ],
globalCoord: true // 缺省为 false                            }
}
},
{
value: 234, name: '报警', itemStyle: {                            color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#FF4200'},                                    {offset: 1, color: '#FE8257'}                                ],
globalCoord: true // 缺省为 false                            }
}
},
]
}
]
};
//实例化
xunjian.setOption(option_xunjian);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。