echarts之雷达图

最新推荐文章于 2025-02-23 11:54:36 发布

alice_code

最新推荐文章于 2025-02-23 11:54:36 发布

阅读量481

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/weixin_44009648/article/details/117424619

echarts 专栏收录该内容

4 篇文章

订阅专栏

这篇博客详细记录了使用echarts创建雷达图的过程，重点探讨了雷达图的相关配置，包括如何设置类别hover后的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts之雷达图

记录雷达图相关配置
针对类别hover后弹出提示信息
在这里插入图片描述

let el = this.$refs.echartsEl
let myChart = el && echarts.init(el);
var option = {
  legend: { //图例组件配置
    left: 20,
    top: 10,
    data: this.dataName,
    icon: 'circle', //图形
    textStyle: { //文字颜色
      color: `rgba(${rgbaColor},1)`
    }
  },
  tooltip : { //提示信息
    trigger: 'axis',
    axisPointer:{
      axis:'radius'
    },
    backgroundColor: 'rgba(2, 29, 39, 1)',
    padding: 0,
    borderColor: `rgba(${rgbaColor},1)`,
    formatter:(params)=>{ //提示信息      
      return `<div style="padding:4px;font-size:10px;text-align:center;box-shadow: inset 0px 0px 12px rgba(${rgbaColor},1)">
        <p style="color:#fff">${params.name}<p>
        </div>`
    }
  },
  color: [ 'rgba(255, 228, 2, 1)',`rgba(${rgbaColor},1)`, '#56A3F1', '#FF917C'],
  radar: {
      nameGap : 2, // 图中工艺等字距离图的距离
      // center: ['25%', '40%'],
      radius: 70,
      indicator: this.dataList,
      splitNumber:5,
      triggerEvent:true, //设置为true弹出提示配置formatter
      splitArea: {
        areaStyle: {
          color: `rgba(${rgbaColor},0.3)`,
          opacity: 1,
        },
      },
      axisLine: {
        lineStyle: {
          fontSize: 10,
          color: 'rgba(131,141,158,.1)',
        },
      },
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 10,
          // backgroundColor: '#666',
          // borderRadius: 3,
        }
      },
      splitLine : {
        show : true,
        lineStyle : {
          width : 1,
          color : 'rgba(255,255,255,0.3)', // 设置网格的颜色
        },
      },
      
  },
  series: [
    {
      name: '分数',
      type: 'radar',
      symbol: 'circle', // 拐点的样式，'rect','angle'等
      symbolSize: 2, // 拐点的大小
      top: 10,
      areaStyle: { //区域
        normal: {
            width: 1,
            opacity: 0.3,
        },
      },
      itemStyle: { //拐点
        normal: {
            // color: 'rgba(60,135,213,.3)',
            lineStyle: {
                width: 1,
                opacity: 0.3,
                // color: 'rgba(60,135,213,.3)',
            },
        },
      },
      
      data: this.dataItem,
  }]
};
option && myChart.setOption(option)