vue 实现词云图

vue 实现词云图

准备工作:
  1. echarts-wordcloud的git仓库地址
    https://github.com/ecomfe/echarts-wordcloud

  2. echarts官方文档
    https://echarts.apache.org/zh/index.html

  3. 依赖版本号
    “echarts”: “^5.0.1”,
    “echarts-wordcloud”: “^2.0.0”,
    版本号可以根据echarts-wordcloud依赖里面的版本号找到对应echarts的版本,否则很容易出现问题,echarts-wordcloud2.0 中使用textStyle 不可以加nomal 可以在上面的仓库里面看官方示例。

贴上完整代码
// 封装成组件
<template>
  <div>
    <div id="chart" style="width: 500px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud";
// import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
   
  data() {
   
    return {
   
      wordList: [
        {
   
          name: "珍珠奶茶",
          value: 15000,
        },
        {
   
          name: "冰激凌红茶",
          value: 10081,
        },
        {
   
          name: "椰果奶茶",
          value: 9386,
        },
        {
### 使用 Vue 3 和 ECharts 实现词云图 #### 安装依赖库 为了在 Vue 3 中实现词云图,需安装 `echarts` 和 `echarts-wordcloud` 库。通过 npm 进行安装: ```bash npm install echarts echarts-wordcloud ``` #### 创建组件并引入必要的模块 创建一个新的 Vue 组件用于展示词云图,并导入所需的 ECharts 模块。 ```javascript import { defineComponent, onMounted, ref } from 'vue'; import * as echarts from 'echarts/core'; import { WordCloudSeriesOption } from 'echarts/charts'; import { TitleComponent, TooltipComponent, } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; // 注册必须的组件 echarts.use([ TitleComponent, TooltipComponent, CanvasRenderer, ]); export default defineComponent({ name: "WordCloudChart", setup() { const chartInstance = ref(null); function initChart() { let myChart = echarts.init(chartInstance.value); // 设置初始配置项 let option = { title: { text: '词云图', left: 'center' }, tooltip: {}, series: [{ type: 'wordCloud', gridSize: 20, sizeRange: [12, 60], rotationRange: [-90, 90], shape: 'circle', data: [ {name: 'Vue', value: 80}, {name: 'JavaScript', value: 70}, {name: 'TypeScript', value: 60} ] }] }; myChart.setOption(option); } onMounted(() => { initChart(); }); return { chartInstance }; } }); ``` 此代码片段展示了如何初始化图表实例以及设置基本选项[^3]。 #### HTML模板部分 定义好上述逻辑之后,在组件内编写相应的HTML结构来承载ECharts容器: ```html <template> <div style="width: 600px;height:400px;"> <div ref="chartInstance" style="width: 100%; height: 100%;"> </div> </div> </template> <script lang="ts"> // ... 上述 JavaScript 部分的内容 ... </script> ``` 这段HTML设置了固定宽度和高度给包含词云图的 div 元素,并绑定了一个引用以便后续操作DOM节点。 #### 动态更新数据 当需要监听某些属性的变化从而重新绘制图表时,可以利用 Vue 的响应式特性配合 `watch` 函数完成这一需求。每当指定的数据源发生改变,则调用方法刷新视图中的图表显示[^2]: ```javascript import { watchEffect } from 'vue'; setup(props) { // ... watchEffect(() => { if (props.data && Array.isArray(props.data)) { updateChartData(props.data); // 自定义函数处理新传入的数据 drawChart(); // 调用该函数触发重绘流程 } }); //... } ``` 以上就是基于 Vue 3 结合 ECharts 构建动态交互式的词云图的方式。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值