vue+echarts封装词云图

前端可视化封装词云图

注意：这里需要下载词云图依赖

npm install echarts
npm install echarts-wordcloud

1. html

<template>
  <div>
    <div ref="world" class="positionloopecharts" :style="{ width: `${width}`, height: `${height}` }"></div>
  </div>
</template>

2. js

<script>


import 'echarts-wordcloud'
export default {
  props: {
    height: { type: String, default: '100%' }, //高度
    width: { type: String, default: '100%' }, //宽度
    // 数据
    rowData: {
      default: () => {
        return [
          {
            name: '景点特色',
            value: 30,
          },
          {
            name: '工地扬尘',
            value: 28,
          },
          {
            name: '流感',
            value: 24,
          },
          {
            name: '景点特色小吃',
            value: 23,
          },
          {
            name: '小区挪车',
            value: 22,
          },
          {
            name: '医疗救助',
            value: 21,
          },
          {
            name: '水路报修',
            value: 20,
          },
          {
            name: '电路报修',
            value: 29,
          },
          {
            name: '重大病虫害',
            value: 28,
          },
          {
            name: '心理咨询',
            value: 27,
          },
          {
            name: '心理咨询',
            value: 27,
          },
          {
            name: '心理咨询',
            value: 27,
          },
          {
            name: '心理咨询',
            value: 27,
          },
          {
            name: '心理咨询',
            value: 27,
          },
        ]
      },
    },
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.drawChart()
    })
  },
  watch: {
    rowData: function() {
      this.drawChart()
    },
  },
  computed: {
    
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      this.worldchart = this.$echarts.init(this.$refs.world)
      this.option = {
        tooltip: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 30,
          },
        },
        series: [
          {
            type: 'wordCloud',
            // 网格大小，各项之间间距
            gridSize: 35,
            // 形状 circle 圆，cardioid  心， diamond 菱形，
            // triangle-forward 、triangle 三角，star五角星
            shape: 'circle',
            // 字体大小范围
            sizeRange: [18, 25],
            // 文字旋转角度范围
            rotationRange: [0, 0],
            // 旋转步值
            // rotationStep: 90,
            // 自定义图形
            // maskImage: maskImage,
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            // 画布宽
            width: '90%',
            // 画布高
            height: '90%',
            // 是否渲染超出画布的文字
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function() {
                  return 'rgb(' + [Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55)].join(',') + ')'
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#2ac',
              },
            },
            data: this.rowData,
          },
        ],
      }
      this.worldchart.setOption(this.option)
    },
  },
}
</script>

3.css

<style lang="scss" scoped>
没有哈哈哈
</style>