首页 前端知识 echarts实现自定义雷达图

echarts实现自定义雷达图

2024-09-08 02:09:00 前端知识 前端哥 967 386 我要收藏

在这里插入图片描述
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',

            },
          },
        }
      ]
    },
  ]
};
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17918.html
标签
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!