Echarts 5 瞎入门指南 - 8

362

本章学习下英雄联盟属性分析图, 下面让我们来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

这样就完成了最基础的英雄属性图了, 参考图:

雷达1.gif

可以看到默认的就是个蜘蛛网状的图形, 这个我们可以自己设置

靶形-circle

    radar = {
        ...
        shape: 'circle' //默认polygon
    }

参考图:

靶心.png

蜘蛛网线/靶圈

接下来看下如何修改蜘蛛网/靶圈样式

    radar = {
        ...
       lineStyle: {
            color: ['red', 'yellow']  //红黄间隔色   从里到外(中心点开始算)
       }

参考图

美化蜘蛛网.png

分割线

还可以去掉分割线, 只留下一个纯靶心

    radar = {
        ...
        axisLine: null
    }

去掉分隔线.png

有时候不想去掉我们也可以修改分割线样式

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

减少圆环数量

    radar ={
        ...
        splitNumber: 3,  //3环
    }

参考图

3环.png

最后的轻语

   空空如也