本章学习下英雄联盟属性分析图, 下面让我们来new几个英雄出来对比下它们的属性
const 卡特 = [[30, 80, 800, 600, 7]] //从左到右顺序 同 底下radar顺序
const 剑圣 = [[300, 100, 1500, 50, 6]]
const 螳螂 = [[400, 120, 1000, 80, 8]]
const 石头人 = [[70, 400, 4000, 200, 2]]
创建系列
const legendData = ['卡特', '剑圣', '螳螂', '石头人']
const series = legendData.map(item => {
return {
name: item,
type: 'radar',
symbol: 'none',
data: eval(item), //灵活使用eval 把字符串转换成变量
}
})
接着创建options
const options = {
backgroundColor: '#161627',
legend: {
bottom: 10,
icon: 'rect', //长方形图标
data: legendData,
textStyle: {color: '#fff'},
selectedMode: 'single' //设置只显示单个英雄属性
},
radar: {
indicator: [
{name: '物理伤害', max: 500},
{name: '防御', max: 500},
{name: '生命值', max: 5000},
{name: '魔法伤害', max: 700},
{name: '上手难度', max: 10},
],
splitArea: null
},
series: series
}
myChart.setOption(options)
蜘蛛网形-polygon
这样就完成了最基础的英雄属性图了, 参考图:
可以看到默认的就是个蜘蛛网状的图形, 这个我们可以自己设置
靶形-circle
radar = {
...
shape: 'circle' //默认polygon
}
参考图:
蜘蛛网线/靶圈
接下来看下如何修改蜘蛛网/靶圈样式
radar = {
...
lineStyle: {
color: ['red', 'yellow'] //红黄间隔色 从里到外(中心点开始算)
}
参考图
分割线
还可以去掉分割线, 只留下一个纯靶心
radar = {
...
axisLine: null
}
有时候不想去掉我们也可以修改分割线样式
radar = {
...
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)'
}
}
}
减少圆环数量
radar ={
...
splitNumber: 3, //3环
}
参考图
最后的轻语
空空如也