vue3项目echarts实现气泡图

1、下载echarts词云扩展

下载链接

2、修改WordCloudView.js

import * as echarts from 'echarts'

echarts.extendChartView({
  type: 'wordCloud',

  render: function (seriesModel, ecModel, api) {
    const group = this.group
    group.removeAll()

    const data = seriesModel.getData()

    const gridSize = seriesModel.get('gridSize')

    seriesModel.layoutInstance.ondraw = function (text, size, dataIdx, drawn) {
      const itemModel = data.getItemModel(dataIdx)
      const textStyleModel = itemModel.getModel('textStyle')
      const { option: label } = itemModel.getModel('label')
      const labelStyle = itemModel.getModel('labelStyle')

      const textEl = new echarts.graphic.Text({
        style: echarts.helper.createTextStyle(textStyleModel),
        scaleX: 1 / drawn.info.mu,
        scaleY: 1 / drawn.info.mu,
        x: (drawn.gx + drawn.info.gw / 2) * gridSize,
        y: (drawn.gy + drawn.info.gh / 2) * gridSize,
        rotation: drawn.rot
      })
      textEl.setStyle({
        x: drawn.info.fillTextOffsetX,
        y: drawn.info.fillTextOffsetY + size * 0.5,
        text: text,
        verticalAlign: 'middle',
        fill: data.getItemVisual(dataIdx, 'style').fill,
        fontSize: size
      })
      const textLabel = new echarts.graphic.Text({
        style: echarts.helper.createTextStyle(labelStyle),
        scaleX: 1 / drawn.info.mu,
        scaleY: 1 / drawn.info.mu,
        x: (drawn.gx + drawn.info.gw / 2) * gridSize,
        y: (drawn.gy + drawn.info.gh / 2) * gridSize,
        rotation: drawn.rot
      })
      textLabel.setStyle({
        x: drawn.info.fillTextOffsetX + size * 0.45,
        y: drawn.info.fillTextOffsetY + size * 0.45,
        // text: label.length > 5 ? label.slice(0, 5) + '...' : label,
        text: label,
        align: 'center',
        verticalAlign: 'middle'
      })

      group.add(textEl)
      group.add(textLabel)

      data.setItemGraphicEl(dataIdx, textEl)

      textEl.ensureState('emphasis').style = echarts.helper.createTextStyle(
        itemModel.getModel(['emphasis', 'textStyle']),
        {
          state: 'emphasis'
        }
      )
      textEl.ensureState('blur').style = echarts.helper.createTextStyle(
        itemModel.getModel(['blur', 'textStyle']),
        {
          state: 'blur'
        }
      )

      echarts.helper.enableHoverEmphasis(
        textEl,
        itemModel.get(['emphasis', 'focus']),
        itemModel.get(['emphasis', 'blurScope'])
      )

      textEl.stateTransition = {
        duration: seriesModel.get('animation')
          ? seriesModel.get(['stateAnimation', 'duration'])
          : 0,
        easing: seriesModel.get(['stateAnimation', 'easing'])
      }
      // TODO
      textEl.__highDownDispatcher = true
    }

    this._model = seriesModel
  },

  remove: function () {
    this.group.removeAll()

    this._model.layoutInstance.dispose()
  },

  dispose: function () {
    this._model.layoutInstance.dispose()
  }
})

3、使用

<script setup>
import '@/utils/wordCloud/index'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const option = {
  tooltip: {
    show: true,
    formatter: (e) => {
      return `${e.data.label}：${e.data.value}`
    }
  },
  series: [
    {
      type: 'wordCloud',
      // 形状 circle 圆 cardioid  心 diamond 菱形
      // triangle-forward triangle 三角 star五角星
      shape: 'diamond',
      left: 'center',
      top: 10,
      gridSize: 20,
      sizeRange: [35, 80],
      rotationRange: [0, 0],
      rotationStep: 90,
      drawOutOfBound: false,
      labelStyle: {
        color: '#ffffff',
        fontSize: 12,
        width: 80
      },
      textStyle: {
        color: function () {
          // Random color
          return 'rgb(' + [
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255)
          ].join(',') + ')'
        }
      },
      data: [
        { name: '⬤', value: 100, label: 'java' },
        { name: '⬤', value: 21, label: 'c' },
        { name: '⬤', value: 43, label: 'c++' },
        { name: '⬤', value: 12, label: 'python' },
        { name: '⬤', value: 50, label: 'vue' }
      ]
    }]
}

const chartRef = ref(null)

onMounted(() => {
  const chart = echarts.init(chartRef.value)
  chart.setOption(option)
})
</script>
<template>
  <div :style="{height: '300px', width: '400px'}" ref="chartRef"></div>
</template>
<style lang="less" scoped>
</style>

4、效果图