vue 词云

最新推荐文章于 2024-06-14 10:39:01 发布

晴风向上

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量266

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/fly_666/article/details/137603646

版权

本文介绍了如何使用ECharts在Vue中创建一个动态词云图，通过数据绑定实现词频统计并自动调整词的大小和颜色。组件接收一个数组作为输入，实时更新词云效果。

摘要由CSDN通过智能技术生成

<template>
  <div id="word-chart" :style="{width: '100%', height: '300px'}"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  name: "wordCloud",
  props: {
    wordData: {
      type: Array,
      default: () => [
        {name: '张三', value: 10},
        {name: '李四', value: 20},
      ]
    }
  },
  data() {
    return {
      wordChart: null,
      options: {
        backgroundColor: "#FFFFFF",
        tooltip: {},
        series: [{
          type: 'wordCloud',
          //用来调整词之间的距离
          gridSize: 40,
          //词的大小，最小24px，最大60px，可以在这个范围调整词的大小
          sizeRange: [24, 60],
          //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
          // rotationRange: [-45, 0, 45, 90],
          // rotationRange: [ 0,90],
          rotationRange: [0, 0],
          //随机生成字体颜色
          textStyle: {
            color: function (e) {
              let color = 'rgba(93,112,146,' + (0.7 +
                3 * e.data.rate) + ')'
              return color
            }
          },
          // 位置相关设置
          left: "center",
          top: "center",
          right: null,
          bottom: null,
          width: "100%",
          height: "100%",
          //数据
          data: []
        }]
      }
    }
  },
  mounted() {
    this.wordChart = echarts.init(document.getElementById('word-chart'));
    this.initCharts()
  },
  watch: {
    wordData: {
      handler() {
        this.initCharts()
      },
      deep: true
    }
  },
  methods: {
    initCharts() {
      this.options.series[0].data = this.wordData
      if(!this.wordData || this.wordData.length === 0){
        this.wordChart.setOption(this.options)
        const _this = this
        window.addEventListener("resize", function () {
          _this.wordChart.resize();
        });
        return
      }
      let total = this.wordData.map(x=>x.value).reduce((x,y)=>x+y)
      this.wordData.map(x=>x.rate = x.value/total)
      this.wordChart.setOption(this.options)
      const _this = this
      window.addEventListener("resize", function () {
        _this.wordChart.resize();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

效果图在这里插入图片描述