pyecharts Geo grid 多图表在一页显示 地图数据丢失 问题的解决办法

pyecharts 1.9.0 grid Geo

亲测可用，最新版pyecharts 1.9.0 ，使用grid 多图表在一页显示渲染问题，geo的数据丢失，变成了纬度数值，经过咨询行业大佬，加自己的摸索，终于解决了。

问题的关键就是jsCode, html的渲染需要jsCode代码加持，html的代码片段如下图：

html的代码片段，使用pycharm打开html文件即可看见：这个是单独render Geo 数据正常的html代码，图中的function （params){return params.name + params.value[2];}, 是问题的关键；

"tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "formatter": function (params) {        return params.name + ' : ' + params.value[2];    },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },

使用grid 多个图表渲染在一页，bar + geo, Geo的数据会丢失，变成纬度信息，打开html发现代码变成这样：

    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },

function(param) 代码段丢失，地图信息变成了纬度信息

这个时候问题的关键是，需要在python程序里手动添加JsCode，代码如下：

tooltip_opts=opts.TooltipOpts(
formatter=JsCode(
“”“function(param) { return [
‘省份: ’ + param.name,
‘数量: ’ + param.value[2],
].join(’
’) }”""
)
),

# -*- coding: utf-8 -*-
# File  : pyecharts_tooltip.py
# Author: Hbin
# Date  : 2021-02-22 8:22


data2 = [['浙江', 974], ['湖北', 661], ['广东', 632], ['河南', 493], ['湖南', 463],]
from pyecharts import options as opts
from pyecharts.charts import Bar, Grid, Line, Liquid, Page, Pie, Geo, Scatter
from pyecharts.commons.utils import JsCode
from pyecharts.components import Table

from pyecharts.globals import ThemeType
from pyecharts.faker import Faker
from pyecharts.globals import ChartType, SymbolType
from pyecharts.commons.utils import JsCode
bar = (
        Bar()
            .add_xaxis(Faker.choose())
            .add_yaxis("", Faker.values())
            .add_yaxis("", Faker.values())  # Faker.values()
            .set_global_opts(legend_opts=opts.LegendOpts(pos_left="5%"),
                             )
        #     .set_series_opts(
        #     label_opts=opts.LabelOpts(
        #         position="right",
        #         formatter=JsCode(
        #             "function(x){return x.data[0]}"
        #         ),
        #     )
        # )
                )
geo = (
    Geo()
        .add_schema(maptype="china", )
        .add("", data2, type_=ChartType.EFFECT_SCATTER,   # "formatter": function (params) {        return params.name + ' : ' + params.value[2];    },
             tooltip_opts=opts.TooltipOpts(
                 formatter=JsCode(
                     """function(param) { return [
                                 '省份: ' + param.name,
                                 '数量: ' + param.value[2],
                             ].join('<br/>') }"""
                 )
             ),

             )  # [list(z) for z in zip(Faker.provinces, Faker.values())],
        .set_series_opts(label_opts=opts.LabelOpts(is_show=True),
                         # formatter=JsCode(
                         #     "function(x){return x.name;}"
                         # ),
                         )
        .set_global_opts(
        visualmap_opts=opts.VisualMapOpts(),
        title_opts=opts.TitleOpts(title="数据地图"),

        # tooltip_opts=opts.TooltipOpts(trigger="item", axis_pointer_type="shadow"),
    )
)
grid = (
        Grid(init_opts=opts.InitOpts(theme=ThemeType.DARK, width='1220px', height='680px'))
            .add(bar, grid_opts=opts.GridOpts(pos_top="50%", pos_right="65%", pos_left="3%"))
            .add(geo, grid_opts=opts.GridOpts(pos_left="10%"))
    )

# grid.render_notebook()
grid.render('map+bar3_20210221_1.html')
print('done')

渲染完毕 打开生成的map+bar3_20210221.html,发现丢失的JsCOde代码恢复了，代码如下：

            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "formatter": function(param) { return [                                     '\u7701\u4efd: ' + param.name,                                     '\u6570\u91cf: ' + param.value[2],                                 ].join('<br/>') },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5
            },

数据恢复正常截图

如果解决了你的问题，记得给我留言哦！