使用echarts画一个词云

最新推荐文章于 2024-07-14 18:12:01 发布

张木木爱熬夜

最新推荐文章于 2024-07-14 18:12:01 发布

阅读量376

点赞数 2

分类专栏： vue 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44030791/article/details/129732367

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

废话不多说先看下效果是不是你想要的，宝贝

在这里插入图片描述

一，在vue中引入echarts

import echarts from 'echarts'

二、定义容器

<div id="wordCloudChart" style="width: 545px;height: 280px;">

三、自定义样式(自定义的样式需要自己去探索)

mounted(){
this.drawWorldCloud()
},
methods：{
drawWorldCloud(){
      this.myChartWordCloud = this.$echarts.init(document.getElementById("wordCloudChart"))
      // 绘制图表
      this.myChartWordCloud.setOption({
        tooltip: {
          show: false
        },
        series: [{
          name: '热词分析',
          type: 'wordCloud',
          sizeRange: [14, 50],
          rotationRange: [0, 0],
          shape: 'circle',
          textPadding: 0,
          autoSize: {
            enable: true,
            minSize: 6
          },
          textStyle: {
            normal: {
            //  自定义颜色
              color: function() {
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')';
              }
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          // data的格式[{ value: '10', name: '杭州' },{ value: '50', name: '有限公司' }]
          data: this.hotList
        }]
      })
      // 让echarts自适应
            window.addEventListener("resize", function () {
                myChart.resize();
            });
		// 点击某个词的事件，可以自己去探索
      /*myChart.on('click', function (params) {
        //alert((params.name));
        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));

      });*/
    },
  }