Echarts数据可视化第8章与Python结合的大数据可视化案例 8.1 如何快速结合Python与Echarts 8.1.2 使用Jupyter完成Echarts可视化

ゞ浴缸里的玫瑰 2024-03-25 20:46 23阅读 0赞

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

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

*   *   *  Echarts数据可视化
         *  第8章 与Python结合的大数据可视化案例
         *   *  8.1 如何快速结合Python与Echarts
             *   *  8.1.2 使用Jupyter完成Echarts可视化

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

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

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

###### 8.1.2 使用Jupyter完成Echarts可视化 ######

Jupyter Notebook 可以将每一部代码的执行结果保存并呈现出来。

如果要在Jupyter 中编写JavaScript 代码，需要在代码段前加入 `%%javascript`，代表该部分代码块为JavaScript 代码。

%%javascript
    requirejs.config({
        
        paths: {
        
            echarts: 'E:/ECharts/echarts.all',
        }
    });
    
    %%javascript
    element.append('<div id="chart" style="min-width: 400px; height: 400px"></div>');
    (function(element) {
        
        requirejs(['echarts'], function(echarts) {
        
            var option = {
        
                    title: {
        
                        text: '各商品销量占比',
                        subtext: 'A商场情况分析',
                        left: 'center'
                    },
                    tooltip: {
        
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
        
                        orient: 'vertical',
                        left: 'left',
                        data: ['A商品', 'B商品', 'C商品', 'D商品', 'E商品']
                    },
                    series: [
                        {
        
                            name: '所售商品',
                            type: 'pie',
                            data: [
                                {
        value: 343, name: 'A商品'},
                                {
        value: 250, name: 'B商品'},
                                {
        value: 509, name: 'C商品'},
                                {
        value: 108, name: 'D商品'},
                                {
        value: 948, name: 'E商品'}
                            ],
                        }
                    ]
                };
            var myChart = echarts.init(document.getElementById('chart'));
            myChart.setOption(option);
            return {
        };
        });
    })(element);

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

OK， 运行不出来，区域出来了，但是图画不出来。

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

按理说，应该是个这么个效果，但是没有，不弄了

> 把大佬的解决办法贴上
> 
> [https://zhuanlan.zhihu.com/p/533811497][https_zhuanlan.zhihu.com_p_533811497]

[ef91d702497e49c7acf9da5630df492a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/262103271051473dbeecc02d216df7fd.png
[f435a90038394944b9403b5f99d8059c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a928030aac3a4c3f9e6975432fb1bea0.png
[https_zhuanlan.zhihu.com_p_533811497]: https://zhuanlan.zhihu.com/p/533811497