词云echarts-wordcloud

效果图

依赖版本

"echarts-wordcloud": "^2.1.0",

实现

<template>
    <div id="wc" ref="canvas" class="wc" :style="{width: '100%', height: canHeight + 'vh'}"></div>
</template>

<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {
  type TitleComponentOption,
} from 'echarts/components';
type EChartsOption = echarts.ComposeOption<
    | TitleComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('wc')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        // backgroundColor: '#fff', // canvas背景颜色
        // canvas标题配置项
        title: {
            show: false,
            text: '我是标题',
            top: '0%',
            left: '-1%',
            textStyle: {
                fontSize: 14,
                color: '#3B3E41',
                fontWeight: 'normal'
            }
        },
        grid: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 0,
            containLabel: true
        },
        series: [
            {
                type: 'wordCloud',
                left: 0,  
                right: 0,               // X轴偏移量
                top: 0,                  // Y轴偏移量
                width: '100%',               // canvas宽度大小
                height: '100%',              // canvas高度大小
                sizeRange: [12, 20],         //  词典字体大小范围配置
                rotationRange: [0, 0],       // 词典字体旋转角度配置，默认不旋转
                gridSize: 25,                // 词典字体间距配置
                layoutAnimation: true,       // 为false词典过度会阻塞
                textStyle: {                 // 词典样式配置
                    normal: {
                        color() {
                            // 颜色随机渐变
                            let colors = ['#2ceded', '#f6b768', '#ff714a', '#e70e65', '#b347ff', '#7049f0']
                            let i = Math.floor(Math.random() * (6 - 1 + 1)) + 1;
                            return colors[i]
                        }
                    }
                },
                // 渲染词典数据
                data:[{
                        value: '20',          // 词典大小配置
                        name: 'Vue3',    // 词典名称配置
                        textStyle: {          // 单独配置某个词典样式
                            shadowBlur: 4,
                            shadowOffsetY: 14,
                            color: '#f59fc1'
                        }
                    }].concat(props.data.seriesDataList || [])
            }
        ]
    }
    option && myChart.setOption(option);
})
</script>

<style scope></style>

示例数据

props.data.seriesDataList = [
        { value: '20', name: 'VIVO' },
        { value: '19', name: 'OPPO' },
        { value: '18', name: 'HONOR' },
        { value: '17', name: 'iPhone 12 pro max' },
        { value: '16', name: 'iPhone 12 pro max' },
        { value: '15', name: 'HUAWEI MATE 10' },
        { value: '14', name: 'ONEPLUS' },
        { value: '13', name: 'Lenova T470' },
        { value: '12', name: 'MacBook Air ' },
        { value: '11', name: 'SAMSUNG' },
        { value: '10', name: 'iPad mini' },
        { value: '8', name: 'BLACKBERRY' },
        { value: '8', name: 'OPPO' },
        { value: '8', name: 'SAMSUNG' },
        { value: '8', name: '361' },
        { value: '10', name: 'Lenova' }
].map((m:any, i: number) => {m['textStyle'] = {color: colors[i< 6 ? i : i%6]}; return m })