echarts 关系图(展示top10排行图示例)

需求:使用echarts展示排行top10的器材

难点:①不同排名的器材气泡大小不同

           ②排名为1的器材数量颜色不同

           ③器材名称根据气泡大小进行省略处理

           ④气泡背景使用本地图片

           ⑤echarts关系图的使用

实现:

creatChart() {
  const imgList = [
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon1.webp'),
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon2.webp'),
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon3.webp'),
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon4.webp'),
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon5.webp'),
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon6.webp'),
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon7.webp'),
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon8.webp'),
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon9.webp'),
    'image://' + require('@/assets/images/newScreen/armPlanePageRight2Icon10.webp')
  ]
  this.options = {
    tooltip: {
      confine: true,
      show: true,
      trigger: "item",
      textStyle: {
        align: "left",
      },
      className: "custom-tooltip-box",
      formatter: function (params) {
        return `<div class='custom-tooltip-style'>
          <div class='title'>
            <span>${params.name}</span>
          </div>
          <div class="span">
            <div class="content">
              <span>故障次数:</span>
              <span>${params.value}</span>
            </div>
          </div>
        </div>`;
      },
    },
    series: [
      {
        type: 'graph',
        layout: 'force',
        roam: true,
        force: {
          repulsion: 110, // 如果感觉图标之间离得近,把这里调大
          edgeLength: [10, 30],
          layoutAnimation: false
        },
        label: {
          show: true,
          formatter: (data) => [
            `{value|${data.value}}`,
            `{name|${data.name.substring(0, data.data.symbolSize / 10 - 2) === data.name ? data.name : data.name.substring(0, data.data.symbolSize / 10 - 2) + "..."}}`
          ].join("\n"),
          color: '#fff',
          rich: {
            value: {
              fontSize: 24,
              align: 'center',
              color: "#fff",
              fontWeight: 600
            },
            name: {
              fontSize: 13,
              color: "#ffffffcc",
              align: 'center'
            },
          },
        },
        data: this.echartData.map((item, index) => ({
          id: item.id,
          name: item.name,
          value: item.malfunctionNum,
          model: item.model,
          avgNoDowntime: item.avgNoDowntime,
          ceSeq: item.ceSeq,
          // 图标图片,使用%,不管设置了几个img,都能保证每个图标都有图片
          symbol: imgList[index % imgList.length],
          // 图标大小
          symbolSize: (0.4 + (1 - index / this.echartData.length) * 0.6) * 80,
          label: {
            rich: {
              value: {
                // 字体大小根据malfunctionNum动态变化,和图标大小一样,有最大最小值,最大1 * 30,最小0.5 *30
                // 如果需要改最大最小值的话,改里面的0.5或30都可以
                fontSize: (item.malfunctionNum / Math.max(...this.echartData.map(jndex => jndex.malfunctionNum)) < 0.5 ?
                  0.5 : (item.malfunctionNum / Math.max(...this.echartData.map(jndex => jndex.malfunctionNum)))) * 30,
                color: item.malfunctionNum === Math.max(...this.echartData.map(item => item.malfunctionNum)) ? "#FFF313" : "#fff"
              }
            }
          }
        }))
      }
    ]
  }
}
  • 16
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超级无敌小小小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值