<html>
<head>
<meta charset="utf-8">
// echarts CDN
<script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>
// 下載下傳wordcloud.js檔案
// https://github.com/ecomfe/echarts-wordcloud
<script src='./echarts/Wordcloud/echarts-wordcloud.js'></script>
</head>
<body>
<style>
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#main{
width: 600px;
height: 500px;
background: rgba(70, 120, 200, 0.2)
}
</style>
<div id='main'></div>
<script>
var chart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
series: [ {
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255)
].join(',') + ')';
},
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
//資料自己加
data: [
{
name: 'Sam S Club',
value: 10000,
// textStyle: {
// normal: {
// color: 'black'
// },
// emphasis: {
// color: 'red'
// }
// }
},
{
name: 'Macys',
value: 6181
},
{
name: 'Amy Schumer',
value: 4386
},
]
} ]
};
chart.setOption(option);
window.onresize = chart.resize;
</script>
</body>
</html>