EchartWordcloud 字符云

TIP

1.1.0+

  1. <!-- 导入需要的包 -->  
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
  3. <script src="https://avuex.avue.top/cdn/echarts-wordcloud.min.js"></script>

字符云 - 图1

  1.   <avue-echart-wordcloud ref="echart" :option="config" :data="data" width="1000"></avue-echart-wordcloud>
  2. <script>
  3. export default {
  4.   data() {
  5.       return {
  6.         data: [{
  7.           "name": "iPhone X",
  8.           "value": 19651
  9.         }, {
  10.           "name": "Mac Pro",
  11.           "value": 18341
  12.         }, {
  13.           "name": "华为P20",
  14.           "value": 17319
  15.         }, {
  16.           "name": "小米手机",
  17.           "value": 12550
  18.         }, {
  19.           "name": "欧莱雅",
  20.           "value": 11638
  21.         }, {
  22.           "name": "玛莎拉蒂",
  23.           "value": 10608
  24.         }, {
  25.           "name": "特斯拉Model S",
  26.           "value": 8298
  27.         }, {
  28.           "name": "jackjones",
  29.           "value": 7630
  30.         }, {
  31.           "name": "韩都衣舍",
  32.           "value": 7440
  33.         }, {
  34.           "name": "天生要强",
  35.           "value": 6065
  36.         }, {
  37.           "name": "梅西",
  38.           "value": 5065
  39.         }, {
  40.           "name": "三只松鼠",
  41.           "value": 4965
  42.         }],
  43.         config: {
  44.           "minFontSize": 30,
  45.           "maxFontSize": 80,
  46.           "split": 30,
  47.           "rotate": true
  48.         }
  49.       }
  50.     },
  51. }
  52. </script>