echarts+ts+vue实现词云

<template>

  <div id="ciyun-charts" />

</template>

const myChart = (this as any).$echarts.init(
    document.getElementById('ciyun-charts')
)

  option处理

gridSize // 用来调整词之间的距离

sizeRange // 用来调整字的大小范围

Math.round(Math.random() * 255) // 生成随机颜色

    title: {

            text: '',

        x: 'center'

      },

      backgroundColor: '#fff',

      series: [

        {

          type: 'wordCloud',

          // 用来调整词之间的距离

          gridSize: 30,

          // 用来调整字的大小范围

          sizeRange: [10, 40],

          rotationRange: [0, 0],

          // 随机生成字体颜色

          textStyle: {

            normal: {

              color: function() {

                return (

                  'rgb(' +

                  Math.round(Math.random() * 255) +

                  ', ' +

                  Math.round(Math.random() * 255) +

                  ', ' +

                  Math.round(Math.random() * 255) +

                  ')'

                )

              }

            }

          },

          left: 'center',

          top: 'center',

          right: null,

          bottom: null,

          // 画布宽

          width: '95%',

          // 画布高

          height: '90%',

          // 是否渲染超出画布的文字

          drawOutOfBound: false,

          // 数据

          data: [

        {name: '西安',value:12}, 

        {name: '南京',value:34},

        {name: '济南',value:20},

        {name: '大连',value:18},

        {name: '兰州',value:24}

        ]

        }

      ]

如图：