pyecharts内置库的JSCode无法使用的问题反馈

下面是echarts官方提供的一段图例,我基于pyecharts做了python代码实现,此为用cloudIDE的python生成的html的效果图

这是代码段

from pyecharts import options as opts
from pyecharts.charts import Custom
from pyecharts.commons.utils import JsCode
import random
import datetime

# ----------------------------------------------
# 1. 准备数据(模拟 ECharts 官方示例的数据结构)
# ----------------------------------------------
categories = ['categoryA', 'categoryB', 'categoryC']
types = [
    {'name': 'JS Heap', 'color': '#7b9ce1'},
    {'name': 'Documents', 'color': '#bd6d6c'},
    {'name': 'Nodes', 'color': '#75d874'},
    {'name': 'Listeners', 'color': '#e0bc78'},
    {'name': 'GPU Memory', 'color': '#dc77dc'},
    {'name': 'GPU', 'color': '#72b362'}
]

data = []
start_time = datetime.datetime.utcnow().timestamp() * 1000  # 转换为毫秒时间戳
data_count = 10

for category_idx in range(len(categories)):
    print(category_idx)
    base_time = start_time
    for _ in range(data_count):
        # 随机选择类型
        type_item = random.choice(types)
        duration = random.randint(1000, 10000)
        end_time = base_time + duration
        
        # 数据格式:[categoryIndex, startTime, endTime, duration]
        data.append({
            "name": type_item['name'],
            "value": [category_idx, base_time, end_time, duration],
            "itemStyle": { "normal" : { "color":  type_item['color']  } }
        })
        base_time = end_time + round(2000 * random.random())
# ----------------------------------------------
# 2. 定义 renderItem 函数(直接使用 ECharts 官方代码)
# ----------------------------------------------
render_item_js = JsCode('''
function(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);
    var height = api.size([0, 1])[1] * 0.6;
    
    var rectShape = echarts.graphic.clipRectByRect(
        {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
        },
        {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        }
    );
    
    return rectShape && {
        type: 'rect',
        transition: ['shape'],
        shape: rectShape,
        style: api.style()
    };
}
''')

# ----------------------------------------------
# 3. 创建 Custom 图表并配置
# ----------------------------------------------
chart = Custom(init_opts=opts.InitOpts(width="1000px", height="600px"))

# 添加系列
chart.add(
    series_name="GanttTest",
    render_item=render_item_js,
    data=data,
    encode={
        "x": [1, 2],  # 绑定数据中的第1、2列作为x轴范围
        "y": 0        # 绑定第0列作为y轴分类
    }
)

# chart.__setattr__(name, value)

s = chart.options.setdefault('xAxis', opts.AxisOpts(
        type_="time",
        min_=start_time
    ))

d = opts.AxisOpts()
#.__setattr__(name = 'data', value= categories)
# print(d.update(name = 'data', value = categories))
d.__setattr__('sdata',['categoryA', 'categoryB', 'categoryC'])

print(d.get('sdata'))
chart.options.setdefault('yAxis', opts.AxisOpts(
        
    ))
# print(s, chart.options.get('xAxis'))


# chart.options.get('xAxis',None)[0].update(opts.AxisOpts(
#         type_="time",
#         min_=start_time
#     ))

# 配置全局选项
chart.set_global_opts(
    legend_opts=opts.LegendOpts(is_show=False),
    title_opts=opts.TitleOpts(title="自定义甘特图"),
    tooltip_opts=opts.TooltipOpts(
        formatter=JsCode('''
            function(params) {
                return params.marker + params.name + ': ' + params.value[3] + ' ms';
            }
        ''')
    ),
    # xaxis_opts=opts.AxisOpts(
    #     type_="time",
    #     min_=start_time
    # ),
    # yaxis_opts=opts.AxisOpts(
    # ),
    datazoom_opts=[
        opts.DataZoomOpts(type_="slider", yaxis_index=0, filter_mode="weakFilter"),
        opts.DataZoomOpts(type_="inside")
    ]
)

# ----------------------------------------------
# 4. 渲染图表
# ----------------------------------------------
chart.render("custom_gantt3.html")


同样的代码段在智能表格中执行后,发现不同的图表效果,使用JSCode的部分代码没能生效,猜测是python编辑器生成的html文件防止javascript注入了,是否可以单独对pyecharts放开这个限制?

黑龙江省
浏览 119
收藏
2
分享
2 +1
2
+1
全部评论 2
 
黄曦然

@金山办公

你好,由于安全规范,目前不支持html中使用js脚本
· 北京
回复
OK,跟我想的一样,不是BUG就行,所以后边看对Pyecharts库能不能单独放开吧(JSCode这功能是真需要呀),适当加点防范,之前以为是BUG让我扒了pyecharts官方库源代码好一周了,就琢磨能不能换别的方式实现要渲染的效果
· 黑龙江省
回复