ECharts词云图（案例一）+配置项详解

news2024/11/27 6:17:23

ECharts词云图（案例一）+配置项详解

ECharts 是一款由百度团队开发的基于 JavaScript 的开源可视化图表库，它提供了丰富的图表类型，包括常见的折线图、柱状图、饼图等，以及一些较为特殊的图表，如词云图。从版本 5.0 开始，ECharts 引入了对词云图的支持，通过 echarts-wordcloud 插件来实现。本篇博客将详细讲解 ECharts 词云图的配置项。

引入依赖

首先，确保你的页面引入了 ECharts 的主文件和词云图插件文件。以下是 HTML 页面的基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ECharts 词云图示例</title>
  <link rel="stylesheet" href="../reset.css">
  <style>
      .EChartBox {
          width: 500px;
          height: 300px;
      }
  </style>
</head>
<body>
<!-- 词云图容器 -->
<div id="ECharts" class="EChartBox"></div>

<!-- 引入 jQuery，ECharts 和词云图插件 -->
<script src="../jquery.min.js"></script>
<script src="../echarts.js"></script>
<script src="../echarts-wordcloud.js"></script>
<script src="index001.js"></script>
</body>
</html>

请注意，这里使用的 ECharts 版本是 5.2.0，词云图插件版本是 2.0。

配置项详解

在 JavaScript 中，我们通过配置项来定义词云图的各项属性。以下是一些主要的配置项：

1. `tooltip`

show: 是否显示提示框。
borderColor: 提示框边框颜色。
borderWidth: 提示框边框宽度。
padding: 提示框内边距。
confine: 是否将提示框限定在图表区域内。
backgroundColor: 提示框背景色。
textStyle: 提示框文字样式。

2. `series`

type: 系列类型，对于词云图，应设置为 'wordCloud'。
shape: 词云形状，可以是 'circle'（圆形）、'cardioid'（心形）、'diamond'（菱形）、'pentagon'（五边形）等。
left, top, right, bottom, width, height: 控制词云图在容器内的位置和大小。
sizeRange: 文字大小范围。
rotationRange: 文字旋转角度范围。
gridSize: 网格大小，影响词间距。
drawOutOfBound: 是否允许词超出画布范围。
layoutAnimation: 是否启用布局动画。
textStyle: 全局文本样式，包括字体、颜色等。
data: 词云数据，每个数据项应包含 name（词云中显示的文字）和 value（影响文字大小的值）。

示例代码

./index.js

$(function () {
    // 初始化 ECharts 图表
    var myChart = echarts.init(document.getElementById('ECharts'));
    
    // 定义词云数据
    const list = [
        {
             value: 50, // 值，将影响词云中文字的大小
            name: '企联网', // 词云中显示的文字
            // 定义文本样式，如阴影效果和颜色
            textStyle: {
                shadowBlur: 4,
                shadowColor: '#ECEFFF',
                shadowOffsetY: 14,
                color: '#73DDFF',
            },
        }, // 50
        {value: '30', name: '智农通'},
        {value: '29', name: 'OPPO'},
        {value: '28', name: 'HONOR'},
        {value: '27', name: '红米'},
        {value: '26', name: '小米'},
        {value: '25', name: '美图'},
        {value: '24', name: 'ONEPLUS'},
        {value: '23', name: '魅族'},
        {value: '22', name: '红手指'},
        {value: '21', name: 'SAMSUNG'},
        {value: '20', name: '金立'},
        {value: '16', name: 'BLACKBERRY'},
        {value: '15', name: '诺基亚'},
        {value: '14', name: '锤子'},
        {value: '13', name: '大疆'},
        {value: '12', name: '361'},
        {value: '11', name: '摩托罗拉'},
        {value: '10', name: '联想'},
        {value: '9', name: '玩家国度'},
    ]
    
    option = {
        tooltip: {
             show: true, // 显示提示框
            // 配置提示框的样式
            borderColor: '#fe9a8bb3',
            borderWidth: 1,
            padding: [10, 15, 10, 15],
            confine: true,
            backgroundColor: 'rgba(255, 255, 255, .9)',
            textStyle: {
                color: 'hotpink', // 提示框文字颜色
                lineHeight: 22, // 文字行高
            },
            // 额外的 CSS 样式
            extraCssText: 'box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;'
        },
        series: [
            {
                type: 'wordCloud', // 系列类型为词云图
                shape: 'pentagon', // 词云形状为五边形
                left: 'center', // 词云水平居中
                top: 'center', // 词云垂直居中
                width: '100%', // 词云宽度
                height: '100%', // 词云高度
                // 定义词云中文字大小的范围
                sizeRange: [14, 50],
                // 定义词云中文字的旋转范围
                rotationRange: [0, 0],
                rotationStep: 0,
                gridSize: 25, // 网格大小
                drawOutOfBound: false, // 不允许词超出画布范围
                layoutAnimation: true, // 启用布局动画
                textStyle: {
                    fontFamily: 'PingFangSC-Semibold', // 字体
                    fontWeight: 600, // 字重
                    // 定义文字颜色的回调函数，随机选择颜色
                    color: function () {
                        let colors = [
                            '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#73DDFF', '#58D5FF'
                        ];
                        return colors[parseInt(Math.random() * colors.length)];
                    },
                },
                emphasis: {
                    focus: 'none', // 高亮状态下不聚焦任何词
                },
                data: list, // 词云数据
            },
        ],
    };
    
    myChart.setOption(option);
    
});