Echarts数据可视化第8章与Python结合的大数据可视化案例 8.1 如何快速结合Python与Echarts 8.1.3 JSON数据导入方式

清疚 2024-03-25 20:46 19阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第8章 与Python结合的大数据可视化案例
         *   *  8.1 如何快速结合Python与Echarts
             *   *  8.1.3 JSON数据导入方式

> Echarts数据可视化：入门、实战与进阶

#### 第8章 与Python结合的大数据可视化案例 ####

##### 8.1 如何快速结合Python与Echarts #####

###### 8.1.3 JSON数据导入方式 ######

字典是常用的数据结构，被广泛应用于存放数据和相关设置参数，而JSON是字符串格式的字典，在Python中使用也非常方便。

通过设置字典结构的option，然后转为Echarts 所需要的option 结构并传入，即可获得相应的Echarts 可视化。

import json
    from IPython.core.display import Javascript
    
    new_option = {
        
        'title': {
        
            'text': '雷达图'
        },
        'tooltip': {
        },
        'legend': {
        
            'data': ['1号员工', '2号员工']
        },
        'radar': {
        
            'name': {
        
                'textStyle': {
        
                    'color': '#fff',
                    'backgroundColor': '#999',
                    'borderRadius': 3,
                    'padding': [3, 5]
                }
            },
            'indicator': [
                {
        'name': '技能A', 'max': 6500},
                {
        'name': '技能B', 'max': 16000},
                {
        'name': '技能C', 'max': 30000},
                {
        'name': '技能D', 'max': 38000},
                {
        'name': '技能E', 'max': 52000},
                {
        'name': '技能F', 'max': 25000}
            ]
        },
        'series': [{
        
            'type': 'radar',
            'data': [
                {
        
                    'value': [4300, 10000, 28000, 35000, 50000, 19000],
                    'name': '1号员工'
                },
                {
        
                    'value': [5000, 14000, 28000, 31000, 42000, 21000],
                    'name': '2号员工'
                }
            ]
        }]
    };
    Javascript(f"window.new_option = JSON.parse('{
          json.dumps(new_option, ensure_ascii=False)}')")

通过python 的json 库和Javascript 模块，new\_option 是字典结构，通过json.dumps 将其转换为JSON 字符串，再通过 JSON.parse 方法将JSON 字符串转为对象。

%%javascript
    element.append('<div id="new_option_chart" style="min-width: 400px; height: 400px"></div>');
    (function(element) {
        
        requirejs(['echarts'], function(echarts) {
        
            var myChart = echarts.init(document.getElementById('new_option_chart'));
            myChart.setOption(new_option);
            return {
        };
        });
    })(element);

按理效果应该是下面这样的

![在这里插入图片描述][1492319429fa48aaa32a5b59b9fd6f02.png_pic_center]

但是笔者根本出不来

![在这里插入图片描述][493ee0aa851941798e86bc5c4be873d4.png_pic_center]

如果有大佬知道如何更正，还请不吝赐教。

[1492319429fa48aaa32a5b59b9fd6f02.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ca8a1139e9ca4e2da87b86458c4b9b53.png
[493ee0aa851941798e86bc5c4be873d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ce79c5cc0d514d6fbdaad809fadfc355.png