echarts的作图的准备工作就不演示了，可以自行看下面的博文
Ecarts的基础示例（条形图，堆积柱状图，瀑布图，饼图，环形图）-CSDN博客
一、引入js
<script src="/js/echarts.min.js"></script>下载地址
echarts/dist/echarts.min.js at master · apache/echarts · GitHub
二、为ECharts准备一个具备大小
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>初始化echarts实例
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
三、所示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>词云图</title>
<script src="/js/echarts.min.js"></script>
<script src="/js/echarts-wordcloud.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
title:{
text:'矩形树',
left: 'center', // 设置标题水平居中
top: 20 // 设置标题距离顶部的距离为20像素
},
tooltip: { //浮窗效果
},
series: [
{
name:'全部',
type:'treemap', //图例样式，矩形树
levels: [
// 第一个层级的配置
{
// 设置每个矩形的边框样式
itemStyle: {
borderColor: '#555', // 边框颜色
borderWidth: 4, // 边框宽度
gapWidth: 1, // 矩形之间的间隔宽度
},
// 设置上方标签的显示方式
upperLabel: {
show: false, // 是否显示上方标签
},
},
// 第二个层级的配置
{
// 设置每个矩形的边框样式
itemStyle: {
borderColor: '#555', // 边框颜色
borderWidth: 2, // 边框宽度
gapWidth: 1, // 矩形之间的间隔宽度
},
// 设置上方标签的显示方式
upperLabel: {
show: false, // 是否显示上方标签
},
},
],
data: [ //数据
{
name:'第二组',
value:30,
children:[ //数据集
{name: 'Hello', value: 7},
{name: 'World', value: 5},
{name: 'This', value: 15},
{name: 'is', value: 10}
]
},
{
name:'第三组',
value:20,
children:[ //数据集
{name: 'Hello', value: 7},
{name: 'World', value: 10},
{name: 'This', value: 20},
{name: 'is', value: 5}
]
},
{
name:'第一组',
value:50,
children:[ //数据集
{name: 'Hello', value: 7},
{name: 'World', value: 2},
{name: 'This', value: 15},
{name: 'is', value: 20}
]
},
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
所示效果
