echarts 词云图

        实际上是基于echarts散点图实现的,并非真正的词云图(有轮廓形状)。适用于词语较少的情况,其中字体的大小和颜色,也可以根据提供的类别value值自行设置(本文代码是写死的)。

option = {
    grid: {
      left: '10%',
      top: 5,
      right: '10%',
      bottom: 5,
    },
    itemStyle: {
      color: 'rgba(255,255,255,0)',
    },
    tooltip: {
      show: true,
      trigger: 'item',
    },
    series: [
      {
        type: 'graph',
        layout: 'force', //引导布局
        label: {
          show: true,
          color: 'auto',
        },
        data: [{ name: '年久失修', size: 18, color: '#3B8BFF', x: 60, y: 32 },
        { name: 'xxx1', size: 16, color: '#70aeb4', x: 30, y: 50 },
        { name: '开发过度', size: 18, color: '#3059F7', x: 50, y: 80 },
        { name: 'xxx2', size: 14, color: '#559399', x: 104, y: 86 },
        { name: '泥头车过重', size: 22, color: '#B4FFFC', x: 90, y: 54 },
        { name: '地形原因', size: 17, color: '#C36D6D', x: 120, y: 70 },
        { name: '天气原因', size: 16, color: '#77BFFF', x: 164, y: 48 },
        { name: 'xxx3', size: 16, color: '#3059F7', x: 174, y: 75 },
        { name: '质量管控', size: 20, color: '#FCD67A', x: 156, y: 30 },
        { name: 'xxx4', size: 15, color: '#3059F7', x: 112, y: 24 }].map((item) => ({
          name: item.name,
          //   draggable: false,
          itemStyle: {
            color: 'rgba(255,255,255,0)',
          },
          value: item.val,
          x: item.x,
          y: item.y,
          fixed: true,
          label: {
            color: item.color,
            fontSize: item.size,
          },
        })),
      },
    ],
  };

 

  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 是一个非常流行的数据可视化库,它支持多种图表类型,包括词云图。下面是一个简单的使用 Echarts 绘制词云图的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts 词云图</title> <!-- 引入 Echarts 库 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 使用 Echarts 绘制词云图的容器 --> <div id="wordcloud" style="width: 600px; height: 400px;"></div> <script> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('wordcloud')); // 定义词云图的数据 var data = [ {name: '张三', value: 100}, {name: '李四', value: 80}, {name: '王五', value: 70}, {name: '赵六', value: 60}, {name: '钱七', value: 50}, {name: '孙八', value: 40}, {name: '周九', value: 30}, {name: '吴十', value: 20}, ]; // 配置词云图的参数 var option = { series: [{ type: 'wordCloud', shape: 'circle', left: 'center', top: 'center', width: '80%', height: '80%', right: null, bottom: null, sizeRange: [12, 60], rotationRange: [-90, 90], rotationStep: 45, gridSize: 8, drawOutOfBound: false, textStyle: { normal: { fontFamily: 'sans-serif', fontWeight: 'bold', 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: data }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 这个示例中,我们首先引入了 Echarts 库,然后在页面中创建一个容器用于显示词云图。接着,我们定义了词云图的数据,包括每个词的名称和权重。最后,我们使用 Echarts 的 `wordCloud` 类型来创建词云图,并通过配置参数来指定词云图的样式和数据。最终,我们将配置项和数据传递给 Echarts 的实例对象,并通过调用 `setOption` 方法显示图表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值