OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

换一个饼图

Browse Source
This commit is contained in:
lai
2024-01-29 17:28:50 +08:00
parent 410ee62983
commit cf944a67bd
1 changed files with 187 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/views/dashboard/overview/components/AlarnTypeBar/index.vue
View File

@@ -93,75 +93,216 @@ function initPicture() {
) {
return a.value - b.value;
});
console.log(realData);
// realData.map((item: any) => {
// item.itemStyle={
// color:colorList[i]
// }
// item.name = t('views.index.' + item.name);
// });
for (let i = 0; i < realData.length; i++) {
yData.push(realData[i].name);
realData[i].name = t('views.index.' + realData[i].name);
realData[i].itemStyle = {
color: colorList[i],
};
// realData[i].itemStyle = {
// color: colorList[i],
// };
}
// const optionData: any = {
// tooltip: {
// trigger: 'item',
// },
// visualMap: {
// show: false,
// min: 80,
// max: 600,
// inRange: {
// colorLightness: [0, 1],
// },
// },
// series: [
// {
// name: 'Access From',
// type: 'pie',
// radius: '75%',
// center: ['50%', '48%'],
// data: realData,
// roseType: 'radius',
// label: {
// formatter: '{c|{c}}\n{b|{b}}',
// distance: 80,
// rich: {
// c: {
// color: 'rgb(241,246,104)',
// fontSize: 18,
// fontWeight: 'bold',
// lineHeight: 5,
// },
// b: {
// color: 'rgb(98,137,169)',
// fontSize: 15,
// height: 30,
// },
// },
// },
// labelLine: {
// lineStyle: {
// color: 'rgba(255, 255, 255, 0.3)',
// },
// smooth: 0.2,
// length: 10,
// length2: 80,
// },
// itemStyle: {
// shadowColor: 'rgba(0, 0, 0, 0.8)',
// shadowBlur: 50,
// },
// animationType: 'scale',
// animationEasing: 'elasticOut',
// animationDelay: function (idx: any) {
// return Math.random() * 200;
// },
// },
// ],
// };
const optionData: any = {
color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9'],
grid: {
left: -100,
top: 50,
bottom: 10,
right: 10,
containLabel: true,
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
visualMap: {
legend: {
type: 'scroll',
orient: 'vartical',
// x: "right",
top: 'center',
right: '15',
// bottom: "0%",
itemWidth: 16,
itemHeight: 8,
itemGap: 16,
textStyle: {
color: '#A3E2F4',
fontSize: 12,
fontWeight: 0,
},
data: yData,
},
polar: {},
angleAxis: {
interval: 1,
type: 'category',
data: [],
z: 10,
axisLine: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1],
lineStyle: {
color: '#0B4A6B',
width: 1,
type: 'solid',
},
},
axisLabel: {
interval: 0,
show: true,
color: '#0B4A6B',
margin: 8,
fontSize: 16,
},
},
radiusAxis: {
min: 40,
max: 120,
interval: 20,
axisLine: {
show: false,
lineStyle: {
color: '#0B3E5E',
width: 1,
type: 'solid',
},
},
axisLabel: {
formatter: '{value} %',
show: false,
padding: [0, 0, 20, 0],
color: '#0B3E5E',
fontSize: 16,
},
splitLine: {
lineStyle: {
color: '#0B3E5E',
width: 2,
type: 'solid',
},
},
},
calculable: true,
series: [
{
name: 'Access From',
type: 'pie',
radius: '75%',
center: ['40%', '48%'],
data: realData,
roseType: 'radius',
radius: ['5%', '10%'],
labelLine: {
show: false,
length: 30,
length2: 55,
},
data: [
{
name: '',
value: 0,
itemStyle: {
color: '#0B4A6B',
},
},
],
},
{
type: 'pie',
radius: ['90%', '95%'],
labelLine: {
show: false,
length: 30,
length2: 55,
},
name: '',
data: [
{
name: '',
value: 0,
itemStyle: {
color: '#0B4A6B',
},
},
],
},
{
type: 'pie',
radius: ['20%', '80%'],
roseType: 'area',
zlevel: 10,
label: {
formatter: '{c|{c}}\n{b|{b}}',
distance: 80,
show: true,
formatter: '{c|{c}}',
rich: {
c: {
color: 'rgb(241,246,104)',
fontSize: 18,
fontSize: 16,
fontWeight: 'bold',
lineHeight: 5,
},
b: {
color: 'rgb(98,137,169)',
fontSize: 15,
height: 30,
},
},
position: 'outside',
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
},
smooth: 0.2,
length: 10,
length2: 80,
},
itemStyle: {
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 50,
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx: any) {
return Math.random() * 200;
show: true,
length: 20,
length2: 55,
},
data: realData,
},
],
};