1. 画一个基础的echart

目前发现有两种方法可以完成一个简单的Echart.

• 方法一

一种是使用%%html，在一个cell中写完HTML+JS代码。例如，

%%html
<div id=\"main\" style=\"width:700px;height:400px\"></div>
<script src=\"js/echarts.min.js\"></script>

<script>

<!-- do something -->
<!-- inital echart -->  

</script>

• 方法2

另一种，%%javascript和%%html结合使用，各司其职。

Jupyter Notebook自带requirejs，可以使用requirejs来引入外部js文件.

%%javascript

//配置js源地址，也可以使用本地的js文件
requirejs.config({
     paths:{
            \'echarts\': [\"http://echarts.baidu.com/dist/echarts.min\"],  //末尾会自动添加.js， 这里一定要去掉，否则引用失败  
             \'jquery\': [\"https://code.jquery.com/jquery-3.3.1.min\"],
         }
});
require([\"ecahrts\", \"jquery\"], function(echarts, jquery){
    
    // do something  
    // initial echart
});

2. 使用Python定义的变量

使用Notebook画图时，变量大多是之前用python脚本算好的。那么，要使Notebook中画echart实用，要解决的关键问题就是，如何使用python定义的变量画图.

Notebook javascript自带的IPython模块，让我们可以在js脚本中执行python的代码。
如图：

Ipython.notebook.kernel.execute允许设置callbacks, 在callbacks中可以对代码执行的output进行相关处理。

var code = \"print (\'Hello World\')\";    
    var callbacks = {    
    iopub : {
        output: function(data){
            var res = data.content.text;
            // `res` is \'Hello World\'
            // do something
        }
    }
    };
execute(code, callbacks);

由此，我的基本思路就是通过处理output获取Python定义的变量。
单纯的print出来，当变量是list时，格式会有问题。所以通过json.dumps对数据进行了转换

var code = \"print(json.dumps([\"+ paramNames.join() +\"]))\";  
//paraNames是变量名组成的list
var callbacks = {    
    iopub : {
        output: function(data){
            var res = JSON.parse(data.content.text.trim()); 
            // do something
        }
    }

3. 完整代码

整理前面的思路， 将引用js，传递变量等部分，整理为一个js文件. 以后只需要引用这个js文件即可。

这是一个简陋且高度定制化的方法，目前基本满足我的日常工作，如果你有更好的意见或是建议，欢迎指出

//   my-echart.js  

requirejs.config({
     paths:{
            \'echarts\': [\"http://echarts.baidu.com/dist/echarts.min\"],
             \'jquery\': [\"https://code.jquery.com/jquery-3.3.1.min\"],
         }
});

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function execute(code, callbacks) {
    var kernel = IPython.notebook.kernel;
    // notebook分享给其他人时，为避免kernel未启动js报错，会等待kernel ready再画图
    while(!kernel){
    console.log(\'Taking a break...\');
    await sleep(2000);
    console.log(\'Two seconds later\');
    var kernel = IPython.notebook.kernel;
    }
    console.log(\"kernel has ready\");
    IPython.notebook.kernel.execute(\"import json\");
    IPython.notebook.kernel.execute(code,callbacks);
}

// 按顺序将echart option中的变量替换为callbacks获取的变量
function formatOption(option) {
    var string = JSON.stringify(option)
    var args = arguments[1];
    var pattern = new RegExp(\'([\", \\\'])\\%([1-\'+ args.length +\'])([\",\\\'])\', \"g\");
    var str_with_data = String(string).replace(pattern, 
                                               function(match,p1,index) {
        return JSON.stringify(args[index-1]);
    });
    return JSON.parse(str_with_data)
};


function loadChart(option,chartId){
    
    require([\"jquery\",\"echarts\"],function(jquery,echarts){    
    var myChart = echarts.init(document.getElementById(chartId));
    myChart.clear();
    
    myChart.setOption(option);

});    
};

// MAIN-FUNCTION
async function newEChart(chartId, option, paramNames){
    
    var code = \"print(json.dumps([\"+ paramNames.join() +\"]))\";    
    var callbacks = {    
    iopub : {
        output: function(data){
            var res = JSON.parse(data.content.text.trim()); 
            var optionWithData = formatOption(option,res);
            loadChart(optionWithData, chartId);
        }
    }
    };
    execute(code, callbacks);
};

4. 使用范例

• 定义数据

x = [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"]
data = [5, 20, 36, 10, 10, 20]

• 定义模块

%%html
<div id=\"main\" style=\"width:700px;height:400px\"></div>
<script src=\"js/my-echarts.js\"></script>   

• initial Chart

%%javascript

// 指定图表的配置项和数据
var option = {
    title: {
        text: \'ECharts 入门示例\'
    },
    tooltip: {},
    legend: {
        data:[\'销量\']
    },
    xAxis: {
        data: \"%1\"   // 会被替换为 x
    },
    yAxis: {},
    series: [{
        name: \'销量\',
        type: \'bar\',
        data: \"%2\"  // 会被替换为 data
    }]
};


newEChart(\"main\",option,[\"x\",\"data\"]);
// params：  ID, option, parameter names list