pyecharts实战之树图

艾鹤

已于 2022-05-13 17:13:42 修改

阅读量3k

点赞数 1

分类专栏： jupyter python 文章标签： pyecharts echarts

于 2020-05-12 19:49:45 首次发布

本文链接：https://blog.csdn.net/u010212101/article/details/106083449

版权

python 同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

jupyter

3 篇文章 1 订阅

订阅专栏

简易版

code:

import os
import json
from pyecharts.charts import Tree
from pyecharts import options as opts

data = [{
    "name": "flare",
    "children": [
        {
            "name": "flex",
            "children": [
                {"name": "FlareVis", "value": 4116}
            ]
        },
        {
            "name": "scale",
            "children": [
                {"name": "IScaleMap", "value": 2105},
                {"name": "LinearScale", "value": 1316},
                {"name": "LogScale", "value": 3151},
                {"name": "OrdinalScale", "value": 3770},
                {"name": "QuantileScale", "value": 2435},
                {"name": "QuantitativeScale", "value": 4839},
                {"name": "RootScale", "value": 1756},
                {"name": "Scale", "value": 4268},
                {"name": "ScaleType", "value": 1821},
                {"name": "TimeScale", "value": 5833}
           ]
        },
        {
            "name": "display",
            "children": [
                {"name": "DirtySprite", "value": 8833}
           ]
        }
    ]
}]

c = Tree().add(
    series_name="tree",
    data=data,
    orient="",
    initial_tree_depth=1,
    label_opts=opts.LabelOpts(),
    leaves_label_opts=opts.LabelOpts(),
)


c.render('口算推题-知识点分析_人教版.html')

# 如果在jupyter上开发，可打开这个注释
#bar.render_notebook()

效果
在这里插入图片描述

完善版

说明：树图在节点非常多的时候，原生的会出现文字遮挡，分支重合的现象，这里参考网上资料给出解决方案：
eg：test_tree.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',
                data:[{"name":"flare","children":[{"name":"flex","children":[{"name":"FlareVis","value":4116}]},{"name":"scale","children":[{"name":"IScaleMap","value":2105},{"name":"LinearScale","value":1316},{"name":"LogScale","value":3151},{"name":"OrdinalScale","value":3770},{"name":"QuantileScale","value":2435},{"name":"QuantitativeScale","value":4839},{"name":"RootScale","value":1756},{"name":"Scale","value":4268},{"name":"ScaleType","value":1821},{"name":"TimeScale","value":5833}]},{"name":"display","children":[{"name":"DirtySprite","value":8833}]}]}],
                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',

                symbolSize: 7,
padding: [5, 10],

                label: {
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right',
                    fontSize: 9
                },

                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        var container = document.getElementById('main');
        var allNode=0;
        var nodes=myChart._chartsViews[0]._data._graphicEls;
        for(var i=0,count =nodes.length;i<count;i++){
           var node=nodes[i];
           if(node===undefined)
               continue;
           allNode++;
        }
        var height=window.innerHeight;
        var currentHeight=35*allNode;
        var newWidth=Math.max(currentHeight,height);
        container.style.width = window.innerWidth + 'px';
        container.style.height = newWidth + 'px';
        myChart.resize();


    </script>
</body>
</html>

使用时只需要修改该代码第25行，将数据填入即可，数据格式，我们参考官网即可，这里我写了一个修改25行数据的代码，便于经常改数据带来的困扰：

# echarts 可自由伸缩版本
def create_tree(data_list, page_name = 'demo.html'):
    if  isinstance(data_list, list) == False:
        print('data_list type should be list!')
        
    with open('test_tree.html','r') as read_file:
        with open(page_name,'w') as write_file:
            count = 0
            for line in read_file:
                count += 1
                if count == 25:
                    #print(line)
                    line = 'data:' +json.dumps(data_list)+','
                write_file.write(line)
data = [{"name":"flare","children":[{"name":"flex","children":[{"name":"FlareVis","value":4116}]},{"name":"scale","children":[{"name":"IScaleMap","value":2105},{"name":"LinearScale","value":1316},{"name":"LogScale","value":3151},{"name":"OrdinalScale","value":3770},{"name":"QuantileScale","value":2435},{"name":"QuantitativeScale","value":4839},{"name":"RootScale","value":1756},{"name":"Scale","value":4268},{"name":"ScaleType","value":1821},{"name":"TimeScale","value":5833}]},{"name":"display","children":[{"name":"DirtySprite","value":8833}]}]}]

# 传入tree数据，自动生成tree网页 demo.html
create_tree(data, ‘demo.html’)

效果形如下：
在这里插入图片描述