鲜活数据的艺术：使用Vue和ECharts绘制交互式词云图的完整指南

前端奇遇记

已于 2023-07-28 17:36:10 修改

阅读量1.5k

点赞数 1

文章标签：前端 echarts javascript

于 2021-12-16 13:48:35 首次发布

本文链接：https://blog.youkuaiyun.com/LaityMm/article/details/121972625

版权

首先效果图

1.你需要了解echarts的简单使用方法，以及各个配置项的作用。

2.在下载echarts后还需要下载wordcloud

npm install echarts-wordcloud --save

3.引入wordcloud（我的echarts是挂载到Vue原型上的，在此不需要再引入）

import 'echarts-wordcloud';

4.主要代码（注意要给盒子容器ref=“wordCloud”属性,并给定宽高）

getChart() {
      this.worldCloudChart = this.$echarts.init(this.$refs.wordCloud);
      this.option = {
        tooltip: {
          show: true,
          position: "top",
          formatter: (params) => {
            return `${params.marker}${params.name} : 热度