旋转的echarts饼图
<template>
<div class="box">
<div id="main" class="chart1"></div>
<div id="toprightviewLines" class="chart"></div>
</div>
</template>
<script>
import init from '@/components/Process/flowable/init';
import * as echarts from 'echarts';
export default {
data() {
return {
alertData: []
};
},
mounted() {
this.getalertData()
},
methods: {
// 告警监控
getalertData() {
this.alertData = [
{
num: 1048,
text: '断电',
},
{
num: 735,
text: '低电',
},
{
num: 580,
text: '停留',
},
{
num: 484,
text: '离线',
},
{
num: 300,
text: '拆卸',
},
{
num: 484,
text: '驶入围栏',
},
{
num: 300,
text: '驶出围栏',
},
]
this.init()
this.showpieLinex();
},
init() {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var data = this.alertData
option = {
// tooltip: {
// trigger: 'item',
// backgroundColor: 'transparent',
// textStyle: {
// color: '#fff'
// }
// },
legend: {
top: '0%',
right: 'right',
textStyle: {
color: '#fff',
fontSize: 12,
},
icon: 'circle',
formatter: function (name) {
let target
for (let i = 0; i < data.length; i++) {
if (data[i].text === name) {
target = data[i].num
}
}
var arr = [
name + target
]
return arr.join(' ')
}
},
series: [
{
name: '告警',
type: 'pie',
radius: ['40%', '60%'],
center: ['37%', '52%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
fontSize: 15,
fontWeight: 'bold',
formatter: '{b}\n\n {c}'
},
emphasis: {
label: {
show: true,
fontSize: 10,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: '断电', itemStyle: { color: '#5B91FF' } },
{ value: 735, name: '低电', itemStyle: { color: '#54FFC6' } },
{ value: 580, name: '停留', itemStyle: { color: '#1890FF' } },
{ value: 484, name: '离线', itemStyle: { color: '#FD5859' } },
{ value: 300, name: '拆卸', itemStyle: { color: '#F6BD16' } },
{ value: 484, name: '驶入围栏', itemStyle: { color: '#75F6FF' } },
{ value: 300, name: '驶出围栏', itemStyle: { color: '#FF7C4A' } }
],
}
]
};
option && myChart.setOption(option);
},
showpieLinex() {
var myChartLine = echarts.init(document.getElementById('toprightviewLines'));
var tips = 0;
var m = 0;
var mm = 1;
function loading() {
return [{
value: tips,
itemStyle: {
normal: {
color: '#5c78a7', // 走过的颜色
}
}
},
{
value: m,
itemStyle: {
normal: {
borderWidth: 5,
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 4,
colorStops: [{
offset: 0,
color: 'rgba(255,255,255,0.7)' // 0% 处的颜色
}, {
offset: 0.3,
color: 'rgba(255,255,255,1)' // 0% 处的颜色
}, {
offset: 0.6,
color: 'rgba(255,255,255,1)' // 0% 处的颜色
}, {
offset: 0.8,
color: 'rgba(255,255,255,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(255,255,255,1)' // 100% 处的颜色
}],
globalCoord: false,
},
color: 'rgba(255,255,255,1)',
shadowBlur: 30,
shadowColor: 'rgba(255,255,255,1)'
}
}
}, {
value: 100 - tips,
itemStyle: {
normal: {
color: '#344285', // 未走的线的颜色
}
}
}
];
}
setInterval(function () {
if (tips == 100) {
tips = 0;
m = 0;
} else if (tips <= 10) {
++tips;
++m
} else if (tips >= 90) {
++tips;
--m
} else {
++tips;
}
myChartLine.setOption({
animation: false,
animationThreshold: 100,
animationDurationUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 1000;
},
series: [{
name: 'loading',
type: 'pie',
radius: ['65%', '75%'],
center: ['36%', '50%'],
hoverAnimation: false,
label: {
normal: {
show: false,
}
},
data: loading()
}]
})
}, 50);
}
},
};
</script>
<style lang="scss" scoped>
.box {
width: 18vw;
height: 20vh;
display: flex;
justify-content: space-around;
}
.chart {
width: 16vw;
height: 19vh;
position: absolute;
z-index: 2
}
.chart1 {
width: 17vw;
height: 18vh;
position: absolute;
z-index: 3
}
</style>