矩形树图

最新推荐文章于 2024-06-15 13:19:11 发布

lianflower

最新推荐文章于 2024-06-15 13:19:11 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/lianflower/article/details/107982121

版权

echarts 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px;height: 600px;border: red solid 1px;"></div>
<script>
    var myChart = echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 3});
    //如果使用svg渲染，在ie上运行，下钻的时候有问题
    //var myChart = echarts.init(document.getElementById('chart'), null, {renderer: 'svg'});
    var color1 = "red";
    var color2 = "orange";

    var data = [
        {
            name: "系统变更",
            //第一层
            children: [
                //第一层第一个节点
                {
                    name: "存储",
                    //第一层第一个节点的第二层
                    children: [
                        //第二层第一个节点，默认使用父结点的颜色(即该节点对应的第一层的节点)，通过value值的大小，来映射颜色深浅
                        //也可以使用itemStyle单独设置该节点的颜色
                        {
                            name: "逻辑分区",
                            value: 700,
                        },
                        //第二层第二个节点
                        {
                            name: "物理分区",
                            value: 1090,
                        },
                        {
                            name: "存储",
                            value: 0
                        }
                    ],
                    //第一层第一个节点的颜色
                    itemStyle: {
                        color: color1
                    }
                },
                //第一层第二个节点
                {
                    name: "网络设备",
                    //第一层第二个节点的第二层
                    children: [
                        {
                            name: "大型机",
                            value: 158,
                        },
                        {
                            name: "小型机",
                            value: 326,
                        },
                        {
                            name: "加密机",
                            value: 494,
                        },
                        {
                            name: "网络设备",
                            value: 0
                        }
                    ],
                    //第一层第二个节点的颜色
                    itemStyle: {
                        color: color2
                    }
                },
                {
                    name: "系统变更",
                    value: 0
                }
            ]
        }
    ];
    var option = {
        /*title: {
            text: 'ECharts 配置项查询分布',
            subtext: '2016/04',
            left: 'leafDepth'
        },*/
        tooltip: {},
        //工具箱
        toolbox: {
            show: true,
            feature: {
                //显示还原logo
                restore: {show: true},
                //显示下载logo
                saveAsImage: {show: true}
            }
        },
        series: [{
            name: 'index',
            type: 'treemap',
            visibleMin: 300,
            data: data,
            roam: false,
            leafDepth: 2,
            breadcrumb: {
                show: false,
            },
            levels: [
                //第一层，最外边的边框样式
                {
                    itemStyle: {
                        borderColor: '#555',
                        borderWidth: 4,
                        gapWidth: 4
                    }
                },
                //第一层中矩形块的全局样式
                {
                    colorSaturation: [0.3, 0.6],
                    itemStyle: {
                        borderColorSaturation: 0.7,
                        gapWidth: 2,
                        borderWidth: 2,
                        //统一设置第一层矩形块的颜色
                        //color: 'green'
                    }
                },
                //第二层中矩形块的全局样式
                {
                    colorSaturation: [0.3, 0.5],
                    itemStyle: {
                        borderColorSaturation: 0.6,
                        gapWidth: 1,
                        //此处不能统一设置第二层矩形块的颜色，因为第二层矩形块的颜色默认继承自所对应的第一层矩形块的颜色，通过value值映射颜色深浅
                        //或者再第二层的矩形块中，单独设置第二层各个矩形块的颜色
                        //color: 'orange'
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

lianflower

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
矩形树图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/echarts.min.js"></script>&
复制链接

扫一扫

专栏目录