
图表数据
var valueType = [
{ name: "sales", index: 0, value: 4300, ratio: 20, max: 6500 },
{ name: "Administration", index: 1, value: 4300, ratio: 20, max: 16000 },
{ name: "Information Techology", index: 2, value: 4300, ratio: 20, max: 30000 },
{ name: "Customer Support", index: 3, value: 4300, ratio: 20, max: 38000 },
{ name: "Development", index: 4, value: 4300, ratio: 20, max: 52000 },
{ name: "Marketing", index: 5, value: 4300, ratio: 20, max: 25000 }
];
var colorList = ['#007DFF', '#FE739D', '#FFA66F', '#8CE130', '#90D5F6'];
var DynamicRich = {};
valueType.map((m,n)=> {
DynamicRich['a'+n] = {
align: 'center',
fontWeight: 'bold',
fontSize: 16,
color: colorList[n]
}
})
Option设置:
let option = {
title: {
show: false,
text: "基础雷达图"
},
tooltip: {
show: false,
},
legend: {
show: false,
data: ["Allocated Budget", "Actual Spending"]
},
radar: {
center: ['50%', '50%'],
radius: '70%',
splitNumber: 5,
triggerEvent: true,
axisNameGap: 20,
splitArea: {
areaStyle: {
color: [
'#F6F6F6', '#EDEDED', '#E5E5E5', '#DEDEDE', '#D6D6D6'
].reverse()
}
},
splitLine: {
lineStyle: {
width:2,
color: [
'#D6D6D6', '#DEDEDE', '#E5E5E5','#EDEDED', '#F6F6F6'
].reverse()
}
},
axisName: {
color: '#000000',
fontSize: 14,
fontWeight: 400,
padding: -10,
formatter: (name, point) => {
return [
`{a${point.index}|${point.ratio}%}`,
`{a${point.index}|${point.value}}`,
`${name}`
].join('\n')
},
rich: DynamicRich
},
indicator: valueType
},
series: [{
name: "",
type: "radar",
selectedMode: true,
silent: false,
lineStyle: {
color: '#5A63FB'
},
symbol: 'rect',
symbolSize: 10,
emphasis: {
focus: 'series',
blurScope: 'coordinateSystem'
},
areaStyle: {
color: {
type: 'radial',
x: 0.5, //右
y: 0.5, //下
r: 1,
colorStops: [
{
offset: 1,
color: '#5A63FB'
},
{
offset: 0,
color: '#5A63FB'
}
],
globalCoord: false
},
opacity: 0.3 // 区域透明度
},
data: [{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "因素"
}]
}]
};
分类:
echarts
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)