volunteer-4/src/pages-evaluation-sub/evaluate/components/interestChart/DependenciesChart.vue

<template>
  <view
    class="suitable-positions mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx] flex flex-col"
  >
    <TitleBar title="适合的岗位领域" />

    <view class="flex justify-center items-center">
      <view class="h-[146px] w-[265px] z-1">
        <LEchart ref="echart" :is-disable-scroll="true"></LEchart>
      </view>
    </view>

    <view class="flex items-center gap-[10rpx] mb-[10rpx]">
      <view class="w-[5rpx] h-[30rpx] bg-[#1580FF]"></view>
      <text class="text-[#1580FF] text-[32rpx] font-bold">适合职业</text>
      <text class="text-[#999] text-[24rpx]">以下数据仅作为参考</text>
    </view>
    <text class="text-[#666] text-[28rpx]">{{ major }}</text>

    <view class="flex items-center gap-[10rpx] mb-[10rpx] mt-[20rpx]">
      <view class="w-[5rpx] h-[30rpx] bg-[#1580FF]"></view>
      <text class="text-[#1580FF] text-[32rpx] font-bold">适合专业</text>
      <text class="text-[#999] text-[24rpx]">以下数据仅作为参考</text>
    </view>
    <text class="text-[#666] text-[28rpx]">{{ occupation }}</text>
  </view>
</template>

<script lang="ts" setup>
import LEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
import TitleBar from '../TitleBar.vue'
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
const echart = ref(null)

const props = defineProps({
  mainDomain: {
    type: String,
    default: '',
  },
  major: {
    type: String,
    default: '',
  },
  occupation: {
    type: String,
    default: '',
  },
})

// 定义固定的样式配置
const styleConfig = [
  { bg: '#FDF0F0', text: '#F58C8C', size: 45, x: 2, y: 38 },
  { bg: '#ECF5FF', text: '#3B9DFF', size: 77, x: 52, y: 64 },
  { bg: '#F6F4FD', text: '#7E5EFF', size: 63, x: 136, y: 48 },
  { bg: '#FFF8E5', text: '#FFC832', size: 62, x: 116, y: 104 },
  { bg: '#E6FBF0', text: '#37D480', size: 45, x: 0, y: 110 },
  { bg: '#FDF0F0', text: '#F58C8C', size: 45, x: 166, y: 118 },
]

const chartData = ref([])

// 根据文字长度选择合适的样式
const selectStylesByLength = (items: string[]) => {
  const usedIndices = new Set<number>()
  const result: Array<{ style: any; text: string }> = []

  // 优先处理大尺寸的元素
  const processItems = (items: string[], targetSize: number) => {
    items.forEach((item) => {
      // 查找匹配大小且未使用的样式
      const availableIndices = styleConfig
        .map((style, index) => ({ index, style }))
        .filter(({ style, index }) => style.size === targetSize && !usedIndices.has(index))

      if (availableIndices.length > 0) {
        const { index, style } = availableIndices[0]
        usedIndices.add(index)
        result.push({ style, text: item })
      }
    })
  }

  // 按不同尺寸进行分类
  const bigItems = items.filter((item) => item.length >= 4)
  const mediumItems = items.filter((item) => item.length === 3)
  const smallItems = items.filter((item) => item.length <= 2)

  // 依次处理不同尺寸的元素
  processItems(bigItems, 77)
  processItems(mediumItems, 63)
  processItems(smallItems, 45)

  // 处理剩余的未分配元素（使用任何可用样式）
  const remainingItems = items.filter((item) => !result.some((r) => r.text === item))

  remainingItems.forEach((item) => {
    // 尝试找到任何未使用的样式
    for (let i = 0; i < styleConfig.length; i++) {
      if (!usedIndices.has(i)) {
        usedIndices.add(i)
        result.push({ style: styleConfig[i], text: item })
        break
      }
    }
  })

  return result
}

watch(
  () => props.mainDomain,
  (newV) => {
    if (!newV) return

    chartData.value = newV.split('、')
    echart.value.init(echarts, (chart) => {
      // 根据文字长度选择合适的样式
      const selectedStyles = selectStylesByLength(chartData.value)

      // 生成图表数据
      const data = selectedStyles.map(({ style, text }) => {
        return {
          name: text,
          x: style.x,
          y: style.y,
          symbolSize: style.size,
          itemStyle: {
            color: style.bg,
          },
          label: {
            show: true,
            color: style.text,
            fontSize: 14,
            formatter: (params: any) => {
              const text = params.name
              if (text.length >= 5) {
                const lines = []
                for (let i = 0; i < text.length; i += 3) {
                  lines.push(text.slice(i, i + 3))
                }
                return lines.join('\n\n')
              }
              return text
            },
            rich: {
              lineHeight: 20,
            },
            align: 'center',
            verticalAlign: 'middle',
            position: 'inside',
          },
        }
      })

      let option = {
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            roam: true,
            data,
            links: [],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
          },
        ],
      }

      chart.setOption(option)
    })
  },
)
</script>

<style lang="scss" scoped></style>