词云图

首先，安装词云图依赖

npm i --save echarts-wordcloud

其次，进行加载

import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom, '', { width: 800, height: 500 })
      const option = {
        backgroundColor: '#fff',
        tooltip: {
          show: true,
        },
        series: [
          {
            type: 'wordCloud',
            sizeRange: [12, 50],
            gridSize: 10, //距离
            shape: 'triangle-forward',
            textStyle: {
              fontWeight: 'bold',
              fontFamily: 'sans-serif',
              borderColor: 'pink',
              color: () => {
                return `rgb(${Math.round(Math.random() * 255)},${Math.round(
                  Math.random() * 255,
                )},${Math.round(Math.random() * 255)})`
              },
            },
            data: [
              { name: '前端工程化', value: 10 },
              { name: 'HTML5新特性', value: 635 },
              { name: 'Less', value: 124 },
              { name: 'Scss', value: 246 },
              { name: 'JavaScript', value: 754 },
              { name: 'TypeScript', value: 754 },
              { name: 'es6', value: 754 },
              { name: '小程序', value: 754 },
              { name: 'Vite', value: 754 },
              { name: 'Webpack', value: 754 },
              { name: 'Vue3', value: 754 },
              { name: 'React', value: 794 },
              { name: 'Nodejs', value: 1000 },
            ],
          },
        ],
      }
      myChart.setOption(option)
    }
  },
}

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。