can pie chart support markpoint ?echarts 饼配置项内容和展示
纯属虚构
配置项如下
function data(){
var d = [];
for (var i = 0; i < 20; i++) {
d.push({name:i+'~'+(i+1),value:Math.random()*100});
}
return d;
}
function radarData(){
var d = [];
var cat_icons = [
'M12,1C5.9,1,1,5.9,1,12s4.9,11,11,11s11-4.9,11-11S18.1,1,12,1z M20.5,9.4c-0.6,0.5-1.7,1-3.1,1.7c-0.3-1.6-0.9-3-1.6-4.4 c1-0.3,1.9-0.7,2.6-1C19.3,6.7,20.1,8,20.5,9.4z M17.3,4.7C16.7,5,15.9,5.2,15,5.5c-0.7-1-1.3-1.8-1.9-2.5C14.7,3.2,16,3.8,17.3,4.7 z M8.6,3.7C9.1,3.5,9.5,3.3,10,3.2C10.4,3.1,10.9,3,11.3,3c0.6,0.6,1.6,1.6,2.6,3.2c-1.9,0.6-4,1-6.4,1.3C7.6,6.3,8.1,5,8.6,3.7z M7.4,8.8c2.8-0.3,5.3-0.9,7.3-1.6c0.7,1.2,1.2,2.7,1.6,4.4c-2.2,0.8-5.2,1.6-8.3,1.8C7.5,12.1,7.3,10.5,7.4,8.8z M6.8,4.6 c-0.3,1-0.6,2-0.7,2.9c-0.7,0.1-1.3,0.1-2,0.1C4.7,6.4,5.7,5.4,6.8,4.6z M3.5,9C4.4,9,5.3,9,6,8.8c-0.1,1.7,0.1,3.3,0.6,4.6 c-1.2,0-2.4-0.1-3.6-0.3C3,13.1,2.9,11.2,3.5,9z M3.3,14.5c1.2,0.2,2.5,0.3,3.7,0.3c0.4,1.2,1,2.4,1.7,3.3C7.4,18,6,17.6,4.6,17.2 C4,16.4,3.7,15.5,3.3,14.5z M6.4,19.1c1.1,0.2,2.2,0.3,3.4,0.3c0.4,0.7,0.9,1.1,1.3,1.6C9.3,20.8,7.7,20.1,6.4,19.1z M14.7,20.7 c-0.2,0.1-0.4,0.1-0.8,0.2c-0.3,0-0.6,0.1-0.9,0.1c-0.2-0.2-0.9-0.8-1.7-1.5c1.6-0.2,2.9-0.6,4.3-1C15.4,19.2,15,19.9,14.7,20.7z M16,17c-1.6,0.7-3.6,1.1-5.7,1.2c-0.7-0.9-1.3-2-1.9-3.4c3-0.2,5.8-1,8-1.8C16.4,14.2,16.4,15.6,16,17z M16.6,19.8 c0.2-0.7,0.4-1.4,0.7-1.9c1-0.4,1.8-1,2.6-1.5C19.1,17.7,18,19,16.6,19.8z M17.5,16.3c0.2-1.4,0.2-2.6,0.1-3.7 c1.3-0.7,2.5-1.2,3.3-1.7c0.2,1.1,0.1,2.2-0.2,3.4C19.9,14.8,18.9,15.6,17.5,16.3z',
'M12,1C5.9,1,1,5.9,1,12C1,18.1,5.9,23,12,23C18.1,23,23,18.1,23,12C23,5.9,18.1,1,12,1ZM19,14L17.7,14C17.6,14.2,17.5,14.4,17.5,14.6L18.5,15.6C19.3,16.4,19.3,17.7,18.5,18.4C17.7,19.1,16.4,19.2,15.7,18.4L14.7,17.4C14.5,17.5,14.3,17.6,14.1,17.6L14.1,19C14.1,20.1,13.2,21,12.1,21C11,21,10.1,20.1,10.1,19L10.1,17.7C9.9,17.6,9.7,17.5,9.5,17.5L8.5,18.5C7.7,19.3,6.4,19.3,5.7,18.5C5,17.7,4.9,16.4,5.7,15.7L6.7,14.7C6.6,14.5,6.5,14.3,6.5,14.1L5,14.1C3.9,14.1,3,13.2,3,12.1C3,11,3.9,10.1,5,10.1L6.3,10.1C6.4,9.9,6.5,9.7,6.5,9.5L5.5,8.5C4.7,7.7,4.7,6.4,5.5,5.7C6.3,5,7.6,4.9,8.3,5.7L9.3,6.7C9.6,6.5,9.8,6.4,10,6.3L10,5C10,3.9,10.9,3,12,3C13.1,3,14,3.9,14,5L14,6.3C14.2,6.4,14.4,6.5,14.6,6.5L15.6,5.5C16.4,4.7,17.7,4.7,18.4,5.5C19.1,6.3,19.2,7.6,18.4,8.3L17.4,9.3C17.5,9.5,17.6,9.7,17.6,9.9L19,9.9C20.1,9.9,21,10.8,21,11.9C21,13,20.1,14,19,14Z M15.5,12C15.5,14.7,12.6,16.4,10.3,15C7.9,13.7,7.9,10.3,10.3,9C12.6,7.6,15.5,9.3,15.5,11.9',
'M10.2,12L13.8 12 12 6 z M12,1C5.9,1,1,5.9,1,12s4.9,11,11,11s11-4.9,11-11S18.1,1,12,1z M16,19l-1.2-4H9.2L8,19H5l5-15h4l5,15H16z',
'M12,1C5.9,1,1,5.9,1,12s4.9,11,11,11s11-4.9,11-11S18.1,1,12,1z M18,18l-4,2l-8-3l8,1V7L8,9v6l-2,1V8l8-4l4,2V18z',
'M12,1C5.9,1,1,5.9,1,12s4.9,11,11,11s11-4.9,11-11S18.1,1,12,1z M18,18c0,0.5-0.5,1-1,1H7c-0.5,0-1-0.5-1-1v-6 c0-0.5,0.5-1,1-1h1V9c0-2.2,1.8-4,4-4s4,1.8,4,4v2h1c0.5,0,1,0.5,1,1V18z M12,7c-1.1,0-2,0.9-2,2v2h4V9C14,7.9,13.1,7,12,7z',
];
for (var i=0; i < 20; i++) {
d.push({
value: data().map(function(d, j){
if (j == i) {
return 100;
} else {
return 0;
}
}),
symbol: 'path://'+cat_icons[i%5],
lineStyle: {
normal: {
width: 0,
}
},
})
}
return d;
}
option = {
title : {
text: 'Endpoint Vulunbilities',
subtext: 'by category',
x:'center'
},
tooltip: {
trigger: 'item',
position: ['48.5%', '49.2%'],
backgroundColor: 'rgba(50,50,50,0)',
textStyle : {
color: 'yellow',
fontWeight: 'bold'
},
formatter: "{d}%"
},
radar: {
// shape: 'circle',
indicator: data().map(function(d){
return {max: 100};
})
},
series : [
{
name: '上网时间',
type: 'pie',
radius : ['5%', '70%'],
roseType: 'area',
color:['#3fa7dc'],
data:data(),
labelLine: {
normal: {
show: false
}
},
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name: '',
type: 'gauge',
min: 0,
max: 20,
startAngle: 90,
endAngle: 449.9,
radius: '82%',
splitNumber: 20,
clockwise: false,
animation: false,
detail: {
formatter: '{value}',
textStyle: {
color: '#63869e'
}
},
detail:{
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: [
[0.25, 'orange'],
[0.5, 'yellow'],
[0.75, 'lightblue'],
[1, 'red']
],
width: '40%',
shadowColor: '#0d4b81', //默认透明
shadowBlur: 40,
opacity: 1
}
},
splitLine: {
length: 5,
lineStyle: {
color: '#ffffff',
width: 2
}
},
axisLabel: {
formatter: function(v){
return '';
},
},
itemStyle: {
normal: {
color: 'green',
width: 2
}
}
},
{
name: '',
type: 'gauge',
min: 0,
max: 20,
startAngle: 90,
endAngle: 449.9,
radius: '72%',
splitNumber: 20,
clockwise: false,
animation: false,
detail: {
formatter: '{value}',
textStyle: {
color: '#63869e'
}
},
detail:{
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: [
[1, '#E8E8E8']
],
width: '10%',
opacity:0.8
}
},
splitLine: {
show:true,
length: '92%',
lineStyle: {
color: 'grey',
width: '1'
}
},
axisLabel: {
show:false,
formatter: function(v){
return v?v:'';
},
textStyle: {
color: "#fb5310",
fontWeight: 700
}
},
itemStyle: {
normal: {
color: 'green',
width: 2,
borderWidth: 3,
}
}
},
{
name: 'icons',
type: 'radar',
symbolSize: 20,
zIndex: 999,
data: radarData(),
}
]
};
截图如下
