2200echarts 饼配置项内容和展示
pie
配置项如下
option = {
backgroundColor: '#142468',
title: {
text: '2200',
textStyle: {
color: '#ffffff',
fontSize: 12,
},
x: 'center',
y: 'center',
},
series: [
{
name:'外1圈装饰',
type: 'pie',
zlevel: 1,
silent: true,
radius: ['98%', '97%'],
hoverAnimation: false,
color: "rgba(88,142,197,0.5)",
// animation:false, //charts3 no
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [1]
},
{
name: '外2圈装饰',
type: 'pie',
zlevel: 2,
silent: true,
radius: ['90%', '91%'],
startAngle: 0,
hoverAnimation: false,
// animation:false, //charts3 no
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [{
name: '',
value: 10,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 8,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 10,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 8,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 10,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 8,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 10,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 8,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
}
]
},
{
name: '外3圈装饰',
type: 'pie',
zlevel: 3,
silent: true,
radius: ['88%', '87%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [{
name: '',
value: 8,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 10,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 8,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 10,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 8,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 10,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 8,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 10,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
]
},
{
name:'外4圈装饰',
type: 'pie',
zlevel: 4,
silent: true,
radius: ['84%', '83%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
},
{
name: '',
value: 1,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
}
]
},
{
name:'外5圈装饰',
type: 'pie',
zlevel: 5,
silent: true,
radius: ['80%', '78%'],
color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
startAngle: 50,
hoverAnimation: false,
// animation:false, //charts3 no
label: {
normal: {
show: false
},
},
data: [50, 20, 40]
},
{
name: "外6圈装饰",
type: 'gauge',
splitNumber: 30, //刻度数量
min: 0,
max: 100,
radius: '65%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[1, '#0dc2fe']
]
}
},
axisTick: {
show: true,
lineStyle: {
color: 'auto',
width: 2
},
length: -8,
splitNumber: 5
},
splitLine: {
show: true,
length: -20,
lineStyle: {
color: 'auto',
}
},
axisLabel: {
show: false
},
pointer: { //仪表盘指针
show: 0,
},
detail: {
show: 0,
},
},
{
type: 'pie',
zlevel: 20,
silent: true,
radius: ['60%', '59%'],
hoverAnimation: false,
color: '#2dc0c9',
// animation:false,
data: [1],
labelLine: {
normal: {
show: false
}
}
},
{
name: '报警分类',
type: 'pie',
radius: ['35%', '55%'],
avoidLabelOverlap: false,
hoverAnimation: false,
itemStyle: {
normal: {
color: '#80ADD2',
borderColor: '#3D4268',
}
},
color: ['#64e4ff', '#18edc9', '#1188f3', '#6ac5fa', '#b6e9ff'],
label: {
normal: {
show: false,
position: 'center',
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 25,
itemStyle: {
normal: {
color: '#64e4ff',
}
}
},
{
value: 25,
itemStyle: {
normal: {
color: '#18edc9',
}
}
},
{
value: 25,
itemStyle: {
normal: {
color: '#1188f3',
}
}
},
{
value: 25,
itemStyle: {
normal: {
color: '#6ac5fa',
}
}
},
{
value: 25,
itemStyle: {
normal: {
color: '#b6e9ff',
}
}
},
]
},
]
};
myChart.on('mouseover', function(params) {
stopTimer();
});
myChart.on('mouseout', function(params) {
startTimer();
});
var timer;
function doing() {
let option = myChart.getOption();
option.series[3].startAngle = option.series[3].startAngle - 1;
option.series[6].data[0].value = option.series[6].data[0].value + 1;
myChart.setOption(option);
}
function startTimer() {
timer = setInterval(doing, 100);
}
function stopTimer() {
clearInterval(timer);
xzTimer = null;
}
setTimeout(startTimer, 500);
/*
window.onload = function() {
setTimeout(startRotate, 500);
}
*/
截图如下
