如何给echarts雷达图某列单独设置数值标注

倾城IT女貂

于 2024-08-27 18:28:36 发布

阅读量223

点赞数 4

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_48798604/article/details/141609527

版权

要实现的效果如图：

目前使用的数据结构是echarts官网的，如果修改才能实现效果并且最简便？

option = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
};

1、使用新的结构，即用polar属性将正常图表圆圈化：

var chart = Highcharts.chart('container', {
		chart: {
				polar: true,
				type: 'line'
		},
		xAxis: {},
		yAxis: {},
		tooltip: {},
		legend: {},
		series: []
});

但由于需要修改结构，太复杂；

2、用一个radiusAxis下的axisLabel属性来设置：

option = {
    backgroundColor: '#0E1327',
    polar: {
        center: ['50%', '50%'],
        radius: '60%'
    },
    radar: {},
    angleAxis: {},
    radiusAxis: {
        axisLabel: {
            show:true,
            fontSize: 12,
            color: '#5aa3d0',
            align: 'left',
            margin: -5
        }
    },
    series: [
        setgauge(0),
        setgauge(1),
        setgauge(2),
        setgauge(3),
        setgauge(4),
        {
            type: 'radar',
            silent: true,
            lineStyle: {
                color: '#66ffff'
            },
            areaStyle: {
                color: 'rgba(102, 255, 255, 0.31)'
            },
            data: setData()
        },
        {
            type: 'scatter',
            coordinateSystem: 'polar',
            symbolSize: 20,
            data: setSpot()
        }
    ]
};

但缺少polar的一些属性，基本相当于重写；

3、直接使用axisLabel写入radar中：

const option = {
  radar: {
    indicator: [],
    // 刻度标签
    axisLabel: {
      show: false,
      color: '#fff'
    }
  },
  series: []
}

但是这会导致八条线全部标注；

4、直接在inde里面某列单独加属性即可：

indicator: [
   {    "name":'举报投诉',
        "max":"100",
        axisLabel : {
            show: true
        }
    },
   {    "name":'举报投诉',
        "max":"100"
    },
   {    "name":'举报投诉',
        "max":"100"
    }
],

成功！