echarts里的矩形树状图

最新推荐文章于 2024-05-14 15:01:22 发布

小白学data

最新推荐文章于 2024-05-14 15:01:22 发布

阅读量529

点赞数 9

文章标签： echarts 前端 javascript 信息可视化

本文链接：https://blog.csdn.net/weixin_68473774/article/details/137522074

版权

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>