echarts实现自定义雷达图

最新推荐文章于 2024-08-13 16:13:49 发布

进阶的巨人001

最新推荐文章于 2024-08-13 16:13:49 发布

阅读量1.2k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_45389051/article/details/131128361

版权

该文章展示了如何使用ECharts创建一个雷达图，详细配置了包括触发提示、图例位置、雷达图形状、轴线颜色、区域样式、网格颜色以及数据系列的颜色等。雷达图的指标包括适应能力、语言、精细动作、思维逻辑和大运动，数据值分别为100、80、50、80和60。

摘要由CSDN通过智能技术生成

在这里插入图片描述
option

option1 = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'center'
  },
  radar: [
    {
      indicator: [
        { text: '适应能力', max: 100 },
        { text: '语言', max: 100 },
        { text: '精细动作', max: 100 },
        { text: '思维逻辑', max: 100 },
        { text: '大运动', max: 100 }
      ],
      radius: 50,
      center: ['50%', '50%'],
      axisLine: {
        lineStyle: {
          color: "#2565d6",
        },
      },
      name: {
        textStyle: {
          color: "#AADDFF"
        },
      },
      splitArea: {
        show: false,
        areaStyle: {
          color: "#2565d6", // 图表背景的颜色
        },
      },
      splitLine: {
        lineStyle: {
          width: 2,
          color: "#2565d6", // 设置网格的颜色
        },
      },
    }
  ],
  series: [
    {
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      areaStyle: {
        color: ['#4391cc']
      },
      lineStyle: {
        color: ['#00CBF6']
      },
      data: [
        {
          value: [100, 80, 50, 80, 60],
          itemStyle: {
            normal: {
              color: '#70eefc',

            },
          },
        }
      ]
    },
  ]
};