使用 marquee 标签实现词云滚动、使用原生 js 实现简单拖拽

最新推荐文章于 2026-05-30 15:44:14 发布

原创

最新推荐文章于 2026-05-30 15:44:14 发布 · 1.9k 阅读

1. 使用 marquee 标签实现词云滚动

1.1 使用 echarts 词云图示例

1.2 marquee 基本介绍

1.3 HTML 使用 marquee 示例

1.4 Vue3 使用 marquee 示例

2. 使用原生 js 实现简单拖拽

1. 使用 marquee 标签实现词云滚动

1.1 使用 echarts 词云图示例

最初其实我想用 echarts 实现词云效果的，后来放弃了，因为不知道怎么让那个词云图动起来……

踩坑记录：

我用的 echarts 版本 5.4.3，他需要的词云图至少得是 2.0 以上的版本，词云图配置参考 github -------- echarts-wordcloud
最初使用 npm 安装词云库，即使版本已经按照要求来了，仍然出现报错 Unknown series wordCloud，解决方案是不通过 npm 下载词云依赖，直接去 github 下载 echarts-wordcloud.js 并在项目中引入

<template>
  <!-- 使用 echarts 词云图 -->
  <section class="demo__container">
    <div class="word-cloud--left"></div>
    <div class="word-cloud--right"></div>
  </section>
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted, onUnmounted, PropType, reactive, ref, toRefs, watch } from 'vue';
/*
 * 引入词云外部插件 - 使用第三方库，会报错 Unknown series wordCloud，解决方案：引入js，js顶部添加去除 eslint 校验
 * import 'echarts-wordcloud';
 */
import './echarts-wordcloud.js';
// 引入echarts
import * as echarts from 'echarts';

export default defineComponent({
  name: 'Demo',
  props: {
    // 输入参数
    requestParamList: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    // 输出参数
    resultDataList: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const leftMarqueeRef: any = ref();
    const rightMarqueeRef: any = ref();

    // 响应式数据
    const state = reactive({
      // 左侧词云图数据
      leftChartData: [] as any[],
      // 右侧词云图数据
      rightChartData: [] as any[],
    });

    // 图表实例
    let leftChart: any = null;
    let rightChart: any = null;

    /**
     *  数据处理
     * @description 对传入的数组数据进行键值的处理，以符合图表数据的要求
     */
    const dataProcessing = () => {
      // 清空图表数据
      state.leftChartData = [];
      state.rightChartData = [];

      if (props.requestParamList) {
        state.leftChartData = props.requestParamList.map((item: any) => ({
          name: item?.requestParamName || '--',
          value: 1,
        }));
      }
      if (props.resultDataList) {
        state.rightChartData = props.resultDataList.map((item: any) => ({
          name: item?.nodeDesc || '--',
          value: 1,
        }));
      }
      console.log('重组词云图数据 ---', state.leftChartData, state.rightChartData);
    };

    /**
     * 绘制图形
     */
    const drawChart = () => {
      // 词云图公共配置
      const comWordOpitons = {
        type: 'wordCloud',
        gridSize: 24, // 单词之间的间隔大小，值越大间隔越大
        sizeRange: [8, 14], // 最小字体和最大字体 必须写一个范围不能直接写每个字的大小
        rotationRange: [0, 0], // 字体旋转角度的范围
        // maskImage: leftPng,
        shape: 'star', // 形状
        width: '100%',
        height: '80%',
        left: null,
        top: '10%',
        right: null,
        bottom: '10%',
        drawOutOfBound: false, // 允许文字部分在画布外绘制
        shrinkToFit: true, // 是否收缩文本。如果将其设置为false，则文本将不渲染。如果设置为true，则文本将被缩小
        textStyle: {
          padding: [10, 14, 10, 14], // 单个文字块-间距
          fontWeight: 700, // 字体粗重
          backgroundColor: '#fff', // 单个文字块-背景颜色
          borderRadius: 100, // 单个文字块-圆角
          shadowColor: 'rgba(0, 0, 0, 0.15)', // 单个文

标签