词云E charts

效果展示：

 

1.安装echarts

npm run --save echarts

2.安装echarts-wordcloud

npm run -save echarts-wordcloud

3.创建option.js

export const productTopOption = (ProductTopList) => {
  return {
    title: {
      show: false,
      x: 'center',
      textStyle: {
        fontSize: 23
      }
    },
    backgroundColor: 'transparent',
    tooltip: {
      show: true
    },
    toolbox: {
      show: false,
      feature: {
        saveAsImage: {
          iconStyle: {
            normal: {
              color: '#ffffff'
            }
          }
        }
      }
    },
    series: [{
      type: 'wordCloud',
      sizeRange: [10, 22],
      rotationRange: [0, 0],
      textPadding: 0,
      drawOutOfBound:true,
      autoSize: {
        enable: true,
        minSize: 6
      },
      textStyle: {
        normal: {
          color: function () {
            return 'rgb(' + [
              Math.round(Math.random() * 10),
              Math.round(Math.random() * 255),
              240
            ].join(',') + ')';
          }
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      data: ProductTopList
    }]
  };
}

4.index.vue

<template>
  <div>
    <div id="rightModule6" style="width:100%;height:400px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud'
import { productTopOption } from './option'
export default {
  data () {
    return {
      ProductTopList: []
    }
  },
  mounted () {
    this.ProductTopList = [
      {name: "启天 M510",value: 10},
      {name: "启天 M520",value: 20},
      {name: "启天 M530",value: 30},
      {name: "启天 M540",value: 40},
      {name: "启天 M510",value: 10},
      {name: "启天 M520",value: 2},
      {name: "启天 M530",value: 3}
    ]
    this.renderProductToplist();
  },
  methods: {
    renderProductToplist() {
      var dom = document.getElementById('rightModule6');
      var myChart = echarts.init(dom);
      var option = productTopOption(this.ProductTopList)
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    }
  }
}
</script>