web数据可视化(Echarts版)4-15矩形树图(代码仅供参考)

【代码】web数据可视化(Echarts版)4-15矩形树图(代码仅供参考)

m0_63471474

753人浏览 · 2023-05-22 15:31:25

m0_63471474 · 2023-05-22 15:31:25 发布

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 700px; height: 500px"></div>
    <script type="text/javascript">
    //基于准备好的DOM，初始化ECharts图表
    var myChart = echarts.init(document.getElementById("main"));
    //指定图表的配置项和数据
    function getLevelOption() {
        return [
            {
                itemStyle: {
                    borderWidth: 0,
                    gapWidth: 5
                }
            },
            {
                itemStyle: {
                    gapWidth: 1
                }
            },
            {
                colorSaturation: [0.35, 0.5],
                itemStyle: {
                    gapWidth: 1,
                    borderColorSaturation: 0.6
                }
            }
        ];
    }
    var option = {   //指定图表的配置项和数据
        title: {  //配置标题组件
            text: '矩形树图', top: 15,
            textStyle: { color: 'green' }, left: 270
        },
        series: [{
            name: '全部',
            type: 'treemap',
            levels: getLevelOption(),
            data: [{
                name: '王斌',  //First tree
                value: 24,
                children: [{
                    name: '黄著',  //First leaf of first tree
                    value: 2
                }, {
                    name: '刘旺坚',  //Second leaf of first tree
                    value: 4
                }, {
                    name: '李文科',  //Third leaf of first tree
                    value: 10
                }, {
                    name: '蔡铭浪',  //Forth leaf of first tree
                    value: 8
            }]
        }, {
            name: '刘倩',  //First tree
            value: 16,
            children: [{
                name: '胡斌彬',  //First leaf of first tree
                    value: 3
                }, {
                    name: '廖舒婷',  //Second leaf of first tree
                    value: 7
                }, {
                    name: '胥玉英',  //Third leaf of first tree
                    value: 6
                }]
             }, {
                name: '袁波',  //First tree
                value: 10,
                children: [{
                name: '刘俊权',  //First leaf of first tree
                    value: 4
                }, {
                    name: '古旭高',  //Second leaf of first tree
                    value: 6
                }]
             }]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。