<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>词云图</title>
<script src="js/echarts.js"></script>
<script src="js/echarts-wordcloud.min.js"></script>
<!-- <style>
main {
width: 700px;
height: 500px;
box-shadow: 0 0 15px 3px rgb(39, 128, 128);
margin: 100px auto 50px;
border-radius: 15px;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
tooltip: {
show: true
},
series: [{
type: 'wordCloud', //词云图
gridSize: 6, //词的间距
// 可用的形状有(circle)圆形(默认)、(cardioid)心形,(diamond)菱形,(triangle-forward)三角形向前,(triangle)三角形,(pentagon)五边形和(star)星形。
shape: 'cardioid', //词云形状,可选diamond,pentagon,circle,triangle,star等形状
sizeRange: [25, 65], //词云大小范围
width: 700, //词云显示宽度
height: 600, //词云显示高度
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: [{
name: ' 没有',
value: 30
}, {
name: ' 屏幕',
value: 24
}, {
name: ' 不错',
value: 21
}, {
name: ' 可以',
value: 19
}, {
name: ' 发货',
value: 18
}, {
name: ' 这个',
value: 18
}, {
name: ' 什么',
value: 17
}, {
name: ' 一个',
value: 12
}, {
name: ' 不好',
value: 12
}, {
name: ' 质量',
value: 11
}, {
name: ' 快递',
value: 11
}, {
name: ' 问题',
value: 10
}, {
name: ' 物流',
value: 9
}, {
name: ' 几天',
value: 9
}, {
name: ' 一般',
value: 9
}, {
name: ' 就是',
value: 9
}, {
name: ' 使用',
value: 8
}, {
name: ' 怎么',
value: 8
}, {
name: ' 电池',
value: 8
}, {
name: ' 不能',
value: 8
}, {
name: ' 速度',
value: 8
}, {
name: ' 客服',
value: 8
}, {
name: ' 一星',
value: 8
}, {
name: ' 拍照',
value: 8
}, {
name: ' 没zhe',
value: 30
}, {
name: ' 屏mu',
value: 20
}, {
name: ' ok',
value: 31
}, {
name: ' 头',
value: 17
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>