• EchartWordcloud 字符云

    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>