词云图 - 用echarts散点图模拟

最新推荐文章于 2024-12-09 14:19:08 发布

1234Wu

最新推荐文章于 2024-12-09 14:19:08 发布

阅读量548

点赞数 1

分类专栏：配置文件 Web前端文章标签： javascript 前端 echarts

本文链接：https://blog.youkuaiyun.com/qq_42866164/article/details/126047377

版权

Web前端同时被 2 个专栏收录

103 篇文章

订阅专栏

配置文件

19 篇文章

订阅专栏

该示例展示了如何利用Echarts的散点图模拟词云图，包含两个年份（1990和2015）的数据，每个数据点由标签和数值组成，并通过调整symbolSize和label样式来实现视觉效果。示例中还涉及到了标签显示、高亮聚焦、自定义布局等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

词云图 - 用echarts散点图模拟

示例：
在这里插入图片描述

在这里插入图片描述

const data = [
  [
    [2, 4, 56, '标签1', 1990],
    [31, 7.4, 27, '标签2', 1990],
    [1, 6, 73, '标签333333', 1990],
    [13, 7.7, 90, '标签4444444444444444', 1990],

  ],
  [
    [44, 8, 23, '标签5', 2015],
    [43, 25, 35, '标签6', 2015],
    [13, 17, 13, '标签7', 2015],
    [21, 1, 67, '标签8', 2015],
    [3, 28, 55, '标签9', 2015],
  ]
];
option = {
  legend: {
    right: '10%',
    top: '0',
    data: ['1990', '2015'],
    icon:'roundRect',
  },
  grid: {
    left: '8%',
    top: '10%'
  },
  xAxis: {
    show:false
  },
  yAxis: {
    show:false,
  },
  series: [
    {
      name: '1990',
      data: data[0],
      type: 'scatter',
      label: {
        show: true,
        color:'#000',
        // width: 30,
        formatter: '{@[3]}',
        overflow: 'truncate',
        ellipsis: '...'
      },
      labelLayout(params) {
        console.log('params',params)
          return {
            // fontSize: Math.max(params.rect.width / 5, 10),
            width: params.rect.width,
            hideOverlap:true
          };
      },
      symbolSize: function (data) {
        return data[2];
      },
      emphasis: {
        focus: 'series',
        label: {
          show: true,
          width:300,
          formatter: function (param) {
            return param.data[3];
          },
          position: 'top'
        }
      },
      itemStyle: {
        color: 'rgb(204, 46, 72)'
      }
    },
    
    
    
    {
      name: '2015',
      data: data[1],
      type: 'scatter',
      label: {
         show: true,
        color:'#000',
        // width: 30,
        formatter: '{@[3]}',
        overflow: 'truncate',
        ellipsis: '...'
      },
      labelLayout(params) {
        console.log('params',params)
          return {
            // fontSize: Math.max(params.rect.width / 5, 10),
            width: params.rect.width,
            moveOverlap:'shiftX'
          };
      },
      symbolSize: function (data) {
        return data[2];
      },
      emphasis: {
        focus: 'series',
        label: {
          show: true,
          width:300,
          formatter: function (param) {
            return param.data[3];
          },
          position: 'top'
        }
      },
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(25, 100, 150, 0.5)',
        shadowOffsetY: 5,
        color: 'rgb(129, 227, 238)'
      }
    }
  ]
};