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);});