echarts雷达图类目下显示值

  initRadar() {
      let chartDom = this.$refs.radar;
      let myChart = echarts.init(chartDom);
      let i = -1;
      // 获取数据
      let arr1 = [75, 1.50, 87, 84, 98.3]
      let option = {
        legend: {
          show: true,
          data: ["Allocated Budget", "Actual Spending"],
        },
        radar: {
          center: ["50%", "50%"],
          splitNumber: 5,
          radius: 80,
          indicator: [
            { name: "平均车辆在线率", max: 100, color: "rgba(255, 255, 255, 0.88) " },
            { name: "时间错乱比例", max: 100, color: "rgba(255, 255, 255, 0.88) " },
            { name: "数据留存率", max: 100, color: "rgba(255, 255, 255, 0.88) " },
            { name: "数据一致性", max: 100, color: "rgba(255, 255, 255, 0.88) " },
            { name: "有效数据比例", max: 100, color: "rgba(255, 255, 255, 0.88) " },
          ],
          axisLine: {
            // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: "#383d6a",
              // 坐标轴线线的颜色。
              width: 1,
              // 坐标轴线线宽。
              type: "solid",
              // 坐标轴线线的类型。
            },
          },
          splitLine: {
            // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              color: "#383d6a",
              // 分隔线颜色
              width: 2,
              // 分隔线线宽
            },
          },
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域,默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ["rgba(19, 25, 78)"],
              // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            },
          },
          name: {
            rich: {
              a: {
                color: 'rgba(255, 255, 255, 0.88)',
                lineHeight: 20
              },
              b: {
                color: '#fff',
                align: 'center',
                backgroundColor: '#666',
                padding: 2,
                borderRadius: 4
              }
            },
            
            formatter: (a,b) => {
              i++;
              return `{a|${a}}\n{b|${arr1[i]}%}`
            }
          }
        },
        series: [
          {
            type: "radar",
            itemStyle: {
              opacity: 0,
            },
            areaStyle: {
              color: "#02FFFB",
            },
            data: [
              {
                value: arr1,
                label: {
                  normal: {
                    show: true,
                    formatter: function (params) {
                      return params.value;
                    }
                  }
                }
              },
            ],
          },
        ],
        color: ["#06b0bf"],
      };
      option && myChart.setOption(option);
    },

 

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值