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"
              }
            }
          }
        }))
      }
    ]
  }
}