Echarts雷达图单独设置拐点颜色

标题:echarts 雷达图单独设置拐点的颜色

先上效果图:
拐点效果图
配置信息:

   option: {
        title: {
          text: '基础雷达图',
        },
        legend: {
          data: ['预算分配(Allocated Budget)'],
        },
        radar: {
          // shape: 'circle',
          center: ['50%', '50%'],
          // 设置段数
          splitNumber: 3,
          indicator: [
            // 设置销售指示器为红色
            { name: '销售(Sales)', max: 100 },
            { name: '管理(Administration)', max: 100 },
            { name: '信息技术(Information Technology)', max: 100 },
            { name: '客服(Customer Support)', max: 100 },
            { name: '研发(Development)', max: 100, color: 'red' },
            { name: '市场(Marketing)', max: 100 },
          ],
          // 坐标轴刻度
          //   axisTick: {
          //     lineStyle: {
          //       color: 'red',
          //     },
          //   },
          // 指示器名称配置,如果不设置,会显示axisLine设置的颜色
          name: {
            color: '#333',
            formatter: '【{value}】',
          },
          // 坐标轴轴线
          axisLine: {
            show: true,
            lineStyle: {
              color: 'red',
            },
          },
          // 分割线
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#000000', 'orange'],
            },
          },
        },
        series: [
          //单独设置 某个拐点的颜色---根据层级来渲染,
          // 1.全部数据 渲染各个点,层级设置1
          // 2.单独拐点的设置一层,层级设置 2
          {
            name: '预算 vs 开销(Budget vs spending)',
            type: 'radar',
            z: 1,
            data: [
              {
                value: ['27.50', 5.5, 20.0, 13.5, 35.0, 25.2],
                name: '预算分配(Allocated Budget)',
                // 显示数值
                label: {
                  show: true,
                  formatter: function (params) {
                    // 查找 需要设置的index,单独设置
                    if (params.dimensionIndex == 4) {
                      params.data.label.color = 'red'
                    } else {
                      params.data.label.color = 'inherit'
                    }
                    return params.value
                  },
                },
              },
            ],
          },
          {
            // 这是 第二步操作
            name: '预算 vs 开销(Budget vs spending)',
            type: 'radar',
            z: 2,
            data: [
              {
                // 思想是:设置无线大,去掉链接线即可
                value: ['100000', 100000, 100000, 100000, 35.0, 100000],
                name: '预算分配(Allocated Budget)',
              },
            ],
            itemStyle: {
              normal: {
                borderWidth: 2,
                color: 'red',
                //  opacity: 0
              },
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false, //隐藏标示线
              },
            },
          },
        ],
      },
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值