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放开这个限制?
@金山办公