采坑日记---Echarts雷达显示单轴数据

Echarts雷达图-tooltip显示单轴数据

背景

总是有神奇的产品经理嫌弃Echarts雷达图自带的tooltip不好看，想要每一个坐标显示自带的值

开搞

本身Echarts雷达图是不提供这种单轴显示的，但是我们可以利用我们的操作将一个图多画几份，然后利用显示隐藏的方法把这种效果做出来

代码

      let dataMax = 100;
      const source = {
        data: [43, 10, 28, 35, 50, 19, 13],
        indicator: [
          { name: '数学', max: dataMax},
          { name: '英语', max: dataMax},
          { name: '语文', max: dataMax},
          { name: '化学', max: dataMax},
          { name: '生物', max: dataMax},
          { name: '物理', max: dataMax},
          { name: '体育', max: dataMax},
        ]
      }
      const buildSeries = function(data){
        const helper = data.map((item, index) => {
          const arr = new Array(data.length);
          arr.splice(index, 1, item);
          return arr;
        })
        console.log([data, ...helper])
        return [data, ...helper].map((item, index) => {
          return {
            type: 'radar',
            itemStyle: {
              color: '#125FD1'
            },
            symbolSize: index === 0 ? 9 : 0,
            lineStyle: {
              color: index === 0 ? '#E30ED8' : 'transparent'
            },
            areaStyle: {
              color: index === 0 ? '#E30ED8' : 'transparent',
              opacity: 0.3
            },
            tooltip: {
              show: index === 0 ? false : true,
              formatter: function() {
                return source.indicator[index - 1].name + source.data[index - 1] + '分';
              }
            },
            z: index === 0 ? 1 : 2,
            data: [item]
          }
        })
      }
      option = {
        tooltip: {},
        radar: {
          name: {
            textStyle: {
              fontSize: 22,
              color: ['#555'],
              padding: [3, 5]
            }
          },
          splitNumber: 5,
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(12,62,129,0)','rgba(12,62,129,0.3)','rgba(12,62,129,0)','rgba(12,62,129,0.3)','rgba(12,62,129,0)']
            }
          },
          splitLine: {
            lineStyle: {
              color: '#0c3e81'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#0c3e81'
            }
          },
          indicator: source.indicator
        },
        series: buildSeries(source.data)
      };

效果

总结

Echarts的配置项太多了，想要实现的效果总是需要各种实践、各种采坑。最后祝愿大家在最新的一年里多多的摸鱼、狠狠的丰收

结束