<div class="panel-body"><div class="panel-echart" id="echart1"></div></div>
// echart1
var piedom1 = document.getElementById("echart1");
var piedChart1 = echarts.init(piedom1);
var data1 = [20, 50, 60, 60, 90, 80]
pieoption1 = {
tooltip: {
//雷达图的tooltip不会超出div,也可以设置position属性,position定位的tooltip 不会随着鼠标移动而位置变化,不友好
confine: true,
enterable: true, //鼠标是否可以移动到tooltip区域内
},
legend: {
icon: 'circle',
right: '10',
textStyle: {
fontSize: 14,
color: '#fff'
},
itemGap: 20,
itemWidth: 14,
data: ['红牌', '黄牌']
},
radar: {
name: {
textStyle: {
color: '#acc3e5',
fontSize: 14,
},
},
shape: 'polygon',
center: ['40%', '50%'],
radius: '60',
scale: true,
axisLine: {
lineStyle: {
color: '#122742',
},
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: '#122742', // 设置网格的颜色
},
},
indicator: [{
name: '赫塔菲',
max: 100,
},
{
name: '亚拉斯加',
max: 100,
},
{
name: '佩斯齐亚',
max: 100,
},
{
name: '塞尔塔',
max: 100,
},
{
name: '马赛',
max: 100,
},
],
splitArea: {
show: false,
},
},
grid: {
position: 'center',
},
polar: {
center: ['50%', '50%'], // 默认全局居中
radius: '0%',
},
angleAxis: {
min: 0,
clockwise: false,
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
min: 0,
interval: 20,
splitLine: {
show: false,
},
},
series: [{
name: '红牌',
type: 'radar',
symbol: 'circle', // 拐点的样式,还可以取值'rect','angle'等
symbolSize: 4, // 拐点的大小
itemStyle: {
normal: {
color: '#294b92',
},
},
areaStyle: {
normal: {
color: '#20489f',
opacity: 0.5,
},
},
lineStyle: {
width: 1,
color: '#294b92',
},
label: {
normal: {
show: true,
formatter: (params) => {
return params.value;
},
color: '#294b92',
},
},
data: [{
value: data1,
}, ],
}, {
name: '黄牌',
type: 'radar',
symbol: 'circle', // 拐点的样式,还可以取值'rect','angle'等
symbolSize: 4, // 拐点的大小
itemStyle: {
normal: {
color: '#6f3eb3',
},
},
areaStyle: {
normal: {
color: '#6f3eb3',
opacity: 0.5,
},
},
lineStyle: {
width: 1,
color: '#6f3eb3',
},
label: {
normal: {
show: true,
formatter: (params) => {
return params.value;
},
color: '#294b92',
},
},
data: [{
value: [60, 60, 90, 80, 20, 50],
}, ],
}, ],
}
if (pieoption1 && typeof pieoption1 === "object") {
piedChart1.clear();
piedChart1.resize();
piedChart1.setOption(pieoption1, true);
};