Skip to content

Instantly share code, notes, and snippets.

@liudonghua123

liudonghua123/echarts_demo.ipynb

Last active January 6, 2022 14:34
Show Gist options
  • Save liudonghua123/01c19fcd981b867a07c38aee25107eb8 to your computer and use it in GitHub Desktop.
Save liudonghua123/01c19fcd981b867a07c38aee25107eb8 to your computer and use it in GitHub Desktop.
Download ZIP
echarts_demo.ipynb
Display the source blob
Display the rendered blob
Raw
echarts_demo.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 78,
"metadata": {
"scrolled": true
},
"outputs": [
{
"data": {
"text/html": [
"<div id=\"main\" style=\"width:640px; height:320px\"></div>\n",
"\n",
"<script>\n",
"// disable require.js at runtime\n",
"var __origDefine = define;\n",
"define = null;\n",
"</script>\n",
"<script src=\"//cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js\"></script>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%html\n",
"<div id=\"main\" style=\"width:640px; height:320px\"></div>\n",
"\n",
"<script>\n",
"// disable require.js at runtime\n",
"var __origDefine = define;\n",
"define = null;\n",
"</script>\n",
"<script src=\"//cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js\"></script>"
]
},
{
"cell_type": "code",
"execution_count": 79,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
"// 基于准备好的dom，初始化echarts实例\n",
"globalThis.myChart = echarts.init(document.getElementById('main'));\n",
"// 指定图表的配置项和数据\n",
"globalThis.option = {\n",
" title: {\n",
" text: 'ECharts 入门示例'\n",
" },\n",
" tooltip: {},\n",
" legend: {\n",
" data:['销量']\n",
" },\n",
" xAxis: {\n",
" data: [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"]\n",
" },\n",
" yAxis: {},\n",
" series: [{\n",
" name: '销量',\n",
" type: 'bar',\n",
" data: [150, 20, 36, 10, 10, 20]\n",
" }]\n",
"};\n",
"// 使用刚指定的配置项和数据显示图表。\n",
"globalThis.myChart.setOption(option);\n",
"\n",
"console.info(globalThis.myChart)\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"\n",
"// 基于准备好的dom，初始化echarts实例\n",
"globalThis.myChart = echarts.init(document.getElementById('main'));\n",
"// 指定图表的配置项和数据\n",
"globalThis.option = {\n",
" title: {\n",
" text: 'ECharts 入门示例'\n",
" },\n",
" tooltip: {},\n",
" legend: {\n",
" data:['销量']\n",
" },\n",
" xAxis: {\n",
" data: [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"]\n",
" },\n",
" yAxis: {},\n",
" series: [{\n",
" name: '销量',\n",
" type: 'bar',\n",
" data: [150, 20, 36, 10, 10, 20]\n",
" }]\n",
"};\n",
"// 使用刚指定的配置项和数据显示图表。\n",
"globalThis.myChart.setOption(option);\n",
"\n",
"console.info(globalThis.myChart)"
]
},
{
"cell_type": "code",
"execution_count": 80,
"metadata": {},
"outputs": [],
"source": [
"# %pip install pyecharts"
]
},
{
"cell_type": "code",
"execution_count": 81,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"'{\"xAxis\": {\"data\": [\"衬衫\", \"毛衣\", \"领带\", \"裤子\", \"风衣\", \"高跟鞋\", \"袜子\"]}, \"series\": [{\"name\": \"商家A\", \"type\": \"bar\", \"data\": [107, 55, 62, 135, 121, 57, 112]}, {\"name\": \"商家B\", \"type\": \"bar\", \"data\": [130, 139, 141, 65, 144, 119, 24]}]}'"
]
},
"execution_count": 81,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from pyecharts.faker import Faker\n",
"import json\n",
"\n",
"def get_data():\n",
" xAxis = {'data': Faker.choose()}\n",
" series = [{\n",
" 'name': '商家A',\n",
" 'type': 'bar',\n",
" 'data': Faker.values(),\n",
" },{\n",
" 'name': '商家B',\n",
" 'type': 'bar',\n",
" 'data': Faker.values(),\n",
" },\n",
" ]\n",
" return json.dumps({\n",
" 'xAxis':xAxis,\n",
" 'series':series,\n",
" }, ensure_ascii=False)\n",
"\n",
"get_data()"
]
},
{
"cell_type": "code",
"execution_count": 82,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"// pass data from python to javascript\n",
"globalThis.outputVar = null\n",
"IPython.notebook.kernel.execute(\n",
" \"get_data()\", \n",
" {\n",
" iopub: {\n",
" output: function(response) {\n",
" // Get output as plain text\n",
" console.info(response.content);\n",
" globalThis.output = response.content.data[\"text/plain\"];\n",
" console.log(output)\n",
" // Remove unwanted characters\n",
" globalThis.output = output.substring(1, output.length-1).replace(\"\\\\'\",\"'\") \n",
" // Set the variable\n",
" globalThis.outputVar = JSON.parse(output)\n",
" }\n",
" }\n",
" },\n",
" {\n",
" silent: false, \n",
" store_history: false, \n",
" stop_on_error: true\n",
" }\n",
")\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"// pass data from python to javascript\n",
"globalThis.outputVar = null\n",
"IPython.notebook.kernel.execute(\n",
" \"get_data()\", \n",
" {\n",
" iopub: {\n",
" output: function(response) {\n",
" // Get output as plain text\n",
" console.info(response.content);\n",
" globalThis.output = response.content.data[\"text/plain\"];\n",
" console.log(output)\n",
" // Remove unwanted characters\n",
" globalThis.output = output.substring(1, output.length-1).replace(\"\\\\'\",\"'\") \n",
" // Set the variable\n",
" globalThis.outputVar = JSON.parse(output)\n",
" }\n",
" }\n",
" },\n",
" {\n",
" silent: false, \n",
" store_history: false, \n",
" stop_on_error: true\n",
" }\n",
")"
]
},
{
"cell_type": "code",
"execution_count": 83,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"// update graph from javascript\n",
"globalThis.myChart.setOption({...globalThis.option, ...globalThis.outputVar});\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"// update graph from javascript\n",
"globalThis.myChart.setOption({...globalThis.option, ...globalThis.outputVar});"
]
},
{
"cell_type": "code",
"execution_count": 84,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
"globalThis.updateBar = (data) => {\n",
" console.info(data, typeof data);\n",
" var dataObj = JSON.parse(data);\n",
" console.info(`data: ${data}, dataObj: ${dataObj}`);\n",
" globalThis.myChart.setOption({...globalThis.option, ...dataObj});\n",
"}\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"\n",
"globalThis.updateBar = (data) => {\n",
" console.info(data, typeof data);\n",
" var dataObj = JSON.parse(data);\n",
" console.info(`data: ${data}, dataObj: ${dataObj}`);\n",
" globalThis.myChart.setOption({...globalThis.option, ...dataObj});\n",
"}"
]
},
{
"cell_type": "code",
"execution_count": 85,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"updateBar('{\"xAxis\": {\"data\": [\"小米\", \"三星\", \"华为\", \"苹果\", \"魅族\", \"VIVO\", \"OPPO\"]}, \"series\": [{\"name\": \"商家A\", \"type\": \"bar\", \"data\": [108, 20, 39, 138, 97, 112, 124]}, {\"name\": \"商家B\", \"type\": \"bar\", \"data\": [120, 50, 38, 40, 53, 86, 29]}]}')"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"execution_count": 85,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"# update graph from python\n",
"\n",
"data = get_data()\n",
"\n",
"from IPython.display import HTML, Javascript\n",
"\n",
"Javascript(\"updateBar('{data}')\".format(data=data))"
]
},
{
"cell_type": "code",
"execution_count": 86,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"// enable require.js at runtime\n",
"define = __origDefine;\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"// enable require.js at runtime\n",
"define = __origDefine;"
]
},
{
"cell_type": "code",
"execution_count": 87,
"metadata": {
"scrolled": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<script>\n",
" require.config({\n",
" paths: {\n",
" 'echarts':'https://assets.pyecharts.org/assets/echarts.min'\n",
" }\n",
" });\n",
"</script>\n",
"\n",
" <div id=\"f44051d11ebf47489833b26400601866\" style=\"width:900px; height:500px;\"></div>\n",
"\n",
"<script>\n",
" require(['echarts'], function(echarts) {\n",
" var chart_f44051d11ebf47489833b26400601866 = echarts.init(\n",
" document.getElementById('f44051d11ebf47489833b26400601866'), 'white', {renderer: 'canvas'});\n",
" var option_f44051d11ebf47489833b26400601866 = {\n",
" \"animation\": true,\n",
" \"animationThreshold\": 2000,\n",
" \"animationDuration\": 1000,\n",
" \"animationEasing\": \"cubicOut\",\n",
" \"animationDelay\": 0,\n",
" \"animationDurationUpdate\": 300,\n",
" \"animationEasingUpdate\": \"cubicOut\",\n",
" \"animationDelayUpdate\": 0,\n",
" \"color\": [\n",
" \"#c23531\",\n",
" \"#2f4554\",\n",
" \"#61a0a8\",\n",
" \"#d48265\",\n",
" \"#749f83\",\n",
" \"#ca8622\",\n",
" \"#bda29a\",\n",
" \"#6e7074\",\n",
" \"#546570\",\n",
" \"#c4ccd3\",\n",
" \"#f05b72\",\n",
" \"#ef5b9c\",\n",
" \"#f47920\",\n",
" \"#905a3d\",\n",
" \"#fab27b\",\n",
" \"#2a5caa\",\n",
" \"#444693\",\n",
" \"#726930\",\n",
" \"#b2d235\",\n",
" \"#6d8346\",\n",
" \"#ac6767\",\n",
" \"#1d953f\",\n",
" \"#6950a1\",\n",
" \"#918597\"\n",
" ],\n",
" \"series\": [\n",
" {\n",
" \"type\": \"bar\",\n",
" \"name\": \"\\u5546\\u5bb6A\",\n",
" \"legendHoverLink\": true,\n",
" \"data\": [\n",
" 24,\n",
" 150,\n",
" 88,\n",
" 129,\n",
" 140,\n",
" 119,\n",
" 84\n",
" ],\n",
" \"showBackground\": false,\n",
" \"barMinHeight\": 0,\n",
" \"barCategoryGap\": \"20%\",\n",
" \"barGap\": \"30%\",\n",
" \"large\": false,\n",
" \"largeThreshold\": 400,\n",
" \"seriesLayoutBy\": \"column\",\n",
" \"datasetIndex\": 0,\n",
" \"clip\": true,\n",
" \"zlevel\": 0,\n",
" \"z\": 2,\n",
" \"label\": {\n",
" \"show\": true,\n",
" \"position\": \"top\",\n",
" \"margin\": 8\n",
" }\n",
" },\n",
" {\n",
" \"type\": \"bar\",\n",
" \"name\": \"\\u5546\\u5bb6B\",\n",
" \"legendHoverLink\": true,\n",
" \"data\": [\n",
" 133,\n",
" 133,\n",
" 116,\n",
" 121,\n",
" 54,\n",
" 46,\n",
" 38\n",
" ],\n",
" \"showBackground\": false,\n",
" \"barMinHeight\": 0,\n",
" \"barCategoryGap\": \"20%\",\n",
" \"barGap\": \"30%\",\n",
" \"large\": false,\n",
" \"largeThreshold\": 400,\n",
" \"seriesLayoutBy\": \"column\",\n",
" \"datasetIndex\": 0,\n",
" \"clip\": true,\n",
" \"zlevel\": 0,\n",
" \"z\": 2,\n",
" \"label\": {\n",
" \"show\": true,\n",
" \"position\": \"top\",\n",
" \"margin\": 8\n",
" }\n",
" }\n",
" ],\n",
" \"legend\": [\n",
" {\n",
" \"data\": [\n",
" \"\\u5546\\u5bb6A\",\n",
" \"\\u5546\\u5bb6B\"\n",
" ],\n",
" \"selected\": {\n",
" \"\\u5546\\u5bb6A\": true,\n",
" \"\\u5546\\u5bb6B\": true\n",
" },\n",
" \"show\": false,\n",
" \"padding\": 5,\n",
" \"itemGap\": 10,\n",
" \"itemWidth\": 25,\n",
" \"itemHeight\": 14\n",
" }\n",
" ],\n",
" \"tooltip\": {\n",
" \"show\": true,\n",
" \"trigger\": \"item\",\n",
" \"triggerOn\": \"mousemove|click\",\n",
" \"axisPointer\": {\n",
" \"type\": \"line\"\n",
" },\n",
" \"showContent\": true,\n",
" \"alwaysShowContent\": false,\n",
" \"showDelay\": 0,\n",
" \"hideDelay\": 100,\n",
" \"textStyle\": {\n",
" \"fontSize\": 14\n",
" },\n",
" \"borderWidth\": 0,\n",
" \"padding\": 5\n",
" },\n",
" \"xAxis\": [\n",
" {\n",
" \"show\": true,\n",
" \"scale\": false,\n",
" \"nameLocation\": \"end\",\n",
" \"nameGap\": 15,\n",
" \"gridIndex\": 0,\n",
" \"inverse\": false,\n",
" \"offset\": 0,\n",
" \"splitNumber\": 5,\n",
" \"minInterval\": 0,\n",
" \"splitLine\": {\n",
" \"show\": false,\n",
" \"lineStyle\": {\n",
" \"show\": true,\n",
" \"width\": 1,\n",
" \"opacity\": 1,\n",
" \"curveness\": 0,\n",
" \"type\": \"solid\"\n",
" }\n",
" },\n",
" \"data\": [\n",
" \"\\u886c\\u886b\",\n",
" \"\\u6bdb\\u8863\",\n",
" \"\\u9886\\u5e26\",\n",
" \"\\u88e4\\u5b50\",\n",
" \"\\u98ce\\u8863\",\n",
" \"\\u9ad8\\u8ddf\\u978b\",\n",
" \"\\u889c\\u5b50\"\n",
" ]\n",
" }\n",
" ],\n",
" \"yAxis\": [\n",
" {\n",
" \"show\": true,\n",
" \"scale\": false,\n",
" \"nameLocation\": \"end\",\n",
" \"nameGap\": 15,\n",
" \"gridIndex\": 0,\n",
" \"inverse\": false,\n",
" \"offset\": 0,\n",
" \"splitNumber\": 5,\n",
" \"minInterval\": 0,\n",
" \"splitLine\": {\n",
" \"show\": false,\n",
" \"lineStyle\": {\n",
" \"show\": true,\n",
" \"width\": 1,\n",
" \"opacity\": 1,\n",
" \"curveness\": 0,\n",
" \"type\": \"solid\"\n",
" }\n",
" }\n",
" }\n",
" ],\n",
" \"title\": [\n",
" {\n",
" \"text\": \"Bar-\\u663e\\u793a ToolBox\",\n",
" \"padding\": 5,\n",
" \"itemGap\": 10\n",
" }\n",
" ],\n",
" \"toolbox\": {\n",
" \"show\": true,\n",
" \"orient\": \"horizontal\",\n",
" \"itemSize\": 15,\n",
" \"itemGap\": 10,\n",
" \"left\": \"80%\",\n",
" \"feature\": {\n",
" \"saveAsImage\": {\n",
" \"type\": \"png\",\n",
" \"backgroundColor\": \"auto\",\n",
" \"connectedBackgroundColor\": \"#fff\",\n",
" \"show\": true,\n",
" \"title\": \"\\u4fdd\\u5b58\\u4e3a\\u56fe\\u7247\",\n",
" \"pixelRatio\": 1\n",
" },\n",
" \"restore\": {\n",
" \"show\": true,\n",
" \"title\": \"\\u8fd8\\u539f\"\n",
" },\n",
" \"dataView\": {\n",
" \"show\": true,\n",
" \"title\": \"\\u6570\\u636e\\u89c6\\u56fe\",\n",
" \"readOnly\": false,\n",
" \"lang\": [\n",
" \"\\u6570\\u636e\\u89c6\\u56fe\",\n",
" \"\\u5173\\u95ed\",\n",
" \"\\u5237\\u65b0\"\n",
" ],\n",
" \"backgroundColor\": \"#fff\",\n",
" \"textareaColor\": \"#fff\",\n",
" \"textareaBorderColor\": \"#333\",\n",
" \"textColor\": \"#000\",\n",
" \"buttonColor\": \"#c23531\",\n",
" \"buttonTextColor\": \"#fff\"\n",
" },\n",
" \"dataZoom\": {\n",
" \"show\": true,\n",
" \"title\": {\n",
" \"zoom\": \"\\u533a\\u57df\\u7f29\\u653e\",\n",
" \"back\": \"\\u533a\\u57df\\u7f29\\u653e\\u8fd8\\u539f\"\n",
" },\n",
" \"icon\": {},\n",
" \"xAxisIndex\": false,\n",
" \"yAxisIndex\": false,\n",
" \"filterMode\": \"filter\"\n",
" },\n",
" \"magicType\": {\n",
" \"show\": true,\n",
" \"type\": [\n",
" \"line\",\n",
" \"bar\",\n",
" \"stack\",\n",
" \"tiled\"\n",
" ],\n",
" \"title\": {\n",
" \"line\": \"\\u5207\\u6362\\u4e3a\\u6298\\u7ebf\\u56fe\",\n",
" \"bar\": \"\\u5207\\u6362\\u4e3a\\u67f1\\u72b6\\u56fe\",\n",
" \"stack\": \"\\u5207\\u6362\\u4e3a\\u5806\\u53e0\",\n",
" \"tiled\": \"\\u5207\\u6362\\u4e3a\\u5e73\\u94fa\"\n",
" },\n",
" \"icon\": {}\n",
" },\n",
" \"brush\": {\n",
" \"icon\": {},\n",
" \"title\": {\n",
" \"rect\": \"\\u77e9\\u5f62\\u9009\\u62e9\",\n",
" \"polygon\": \"\\u5708\\u9009\",\n",
" \"lineX\": \"\\u6a2a\\u5411\\u9009\\u62e9\",\n",
" \"lineY\": \"\\u7eb5\\u5411\\u9009\\u62e9\",\n",
" \"keep\": \"\\u4fdd\\u6301\\u9009\\u62e9\",\n",
" \"clear\": \"\\u6e05\\u9664\\u9009\\u62e9\"\n",
" }\n",
" }\n",
" }\n",
" }\n",
"};\n",
" chart_f44051d11ebf47489833b26400601866.setOption(option_f44051d11ebf47489833b26400601866);\n",
" });\n",
" </script>\n"
],
"text/plain": [
"<pyecharts.render.display.HTML at 0x2517d772a00>"
]
},
"execution_count": 87,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from pyecharts import options as opts\n",
"from pyecharts.charts import Bar\n",
"\n",
"bar = (\n",
" Bar()\n",
" .add_xaxis(Faker.choose())\n",
" .add_yaxis(\"商家A\", Faker.values())\n",
" .add_yaxis(\"商家B\", Faker.values())\n",
" .set_global_opts(\n",
" title_opts=opts.TitleOpts(title=\"Bar-显示 ToolBox\"),\n",
" toolbox_opts=opts.ToolboxOpts(),\n",
" legend_opts=opts.LegendOpts(is_show=False),\n",
" )\n",
")\n",
"bar.render_notebook()\n",
" "
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.3"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment