In this chapter, we will learn the attribute analysis diagram of league of Legends. Now let’s compare the attributes of some new heroes

    constCarter = [[30.80.800.600.7]] // The sequence from left to right is the same as that of the bottom radar
    constBlademaster = [[300.100.1500.50.6]]
    constMantis = [[400.120.1000.80.8]]
    const= [[70.400.4000.200.2]]
Copy the code

Create a series of

const legendData = ['carter'.'blademaster'.'mantis'.'Stone Man']
const series = legendData.map(item= > {
    return {
        name: item,
        type: 'radar'.symbol: 'none'.data: eval(item),   // Use eval to convert strings to variables}})Copy the code

And then I’m gonna create options

    const options = {
        backgroundColor: '# 161627'.legend: {
            bottom: 10.icon: 'rect'.// Rectangle icon
            data: legendData,
            textStyle: {color: '#fff'},
            selectedMode: 'single' // Set to display only a single hero attribute
        },
        radar: {
            indicator: [{name: 'Physical Damage'.max: 500},
                {name: 'defence'.max: 500},
                {name: 'Health'.max: 5000},
                {name: 'Magic damage'.max: 700},
                {name: 'Start difficulty'.max: 10},].splitArea: null
        },
        series: series
    }
    
    myChart.setOption(options)
Copy the code

Spider web -polygon

This completes the basic hero attribute diagram, refer to the diagram:

You can see that the default is a spider web, which we can set ourselves

Target shape – circle

    radar = {
        ...
        shape: 'circle' / / the default polygon
    }
Copy the code

Reference:

Spider wire/target ring

Next, how to modify the spider web/target ring style

radar = { ... LineStyle: {color: ['red', 'yellow'] // color: ['red', 'yellow']Copy the code

Refer to figure

The divider

You can also remove the dividing line, leaving only a pure bull ‘s-eye

    radar = {
        ...
        axisLine: null
    }
Copy the code

Sometimes we can change the divider style if we don’t want to

    radar = {
        ...
        axisLine: {
            lineStyle: {
                color: 'rgba (238, 197, 102, 0.5)'}}}Copy the code

Reduce the number of rings

    radar ={
        ...
        splitNumber: 3./ / 3
    }
Copy the code

Refer to figure

The last whisper

   I wander in the world, looking for the heaven with you
Copy the code