2023年政策修订增补工作正在进行中,欢迎参与!
Template:Echart
跳转到导航
跳转到搜索
该模板用以显示使用Apache Echarts 5渲染的图表,使用以下5个参数:
- datapage:必填,指定包含Echarts#setOption可接受的数据的页面,该页面必须以JSON格式填写(可在页面左侧工具栏【页面信息】处打开页面信息页,找到修改“页面内容类型”的链接;或是直接打开
[[Special:ChangeContentModel/【页面名称】]]
;例如User:AnnAngela/contributions);- data:数据较少且不常变动时,可以使用该参数直接填写JSON,代替datapage(提示:可以在必要时使用
<nowiki>
标签包裹这个JSON片段以防止模板意外闭合)。
- data:数据较少且不常变动时,可以使用该参数直接填写JSON,代替datapage(提示:可以在必要时使用
- width:选填,指定图表宽度,只支持整数(以
px
为单位),若该值无法解析为整数或小于等于160则按1200解析; - height:选填,指定图表高度,只支持整数(以
px
为单位),若该值无法解析为整数或小于等于90则按675解析; - debug:选填,当值为1时指定页面加载debug版本(即没有被Uglifyjs压缩过的版本,该版本会输出完整的报错信息,适合用于调试;该设置具有全局性,只要页面中有一处指定了
debug=1
则页面只会加载debug版本)。 - draw:选填。
{{Echart}}
可以同时绘制多个数据系列,但如果出于排版等的考虑,需要在一个页面内多次调用这一模板时,除了最后一次调用外之前每次都需要加上draw=off
。
注意:由于安全原因,本模板加载的数据不接受html字符串,有需要的请使用richText。(即html字符串会被格式化不会加载,以避免诸如该示例中的XSS攻击)
示例如下:
{{Echart|datapage=User:AnnAngela/contributions|height=370}}
{
"title": { "text": "我的编辑历史(不含自动工具、机器人编辑)", "subtext": "按月统计次数(截至 2020 年 4 月 15 日 21:50)", "subtextStyle": { "color": "#333" } }, "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross", "animation": false } }, "toolbox": { "show": true, "feature": { "dataZoom": { "yAxisIndex": "none" }, "dataView": { "readOnly": true }, "magicType": { "type": [ "line", "bar" ] }, "restore": {}, "saveAsImage": { "excludeComponents": [ "toolbox", "dataZoom" ] } } }, "axisPointer": { "link": { "xAxisIndex": "all" } }, "dataZoom": [ { "type": "inside", "xAxisIndex": [ 0 ], "startValue": 0, "end": 100 }, { "show": true, "xAxisIndex": [ 0 ], "type": "slider", "start": 0, "end": 100 } ], "legend": { "data": [ "编辑次数" ] }, "xAxis": { "data": [ "2014年8月", "2014年9月", "2014年10月", "2014年11月", "2014年12月", "2015年1月", "2015年2月", "2015年3月", "2015年4月", "2015年5月", "2015年6月", "2015年7月", "2015年8月", "2015年9月", "2015年10月", "2015年11月", "2015年12月", "2016年1月", "2016年2月", "2016年3月", "2016年4月", "2016年5月", "2016年6月", "2016年7月", "2016年8月", "2016年9月", "2016年10月", "2016年11月", "2016年12月", "2017年1月", "2017年2月", "2017年3月", "2017年4月", "2017年5月", "2017年6月", "2017年7月", "2017年8月", "2017年9月", "2017年10月", "2017年11月", "2017年12月", "2018年1月", "2018年2月", "2018年3月", "2018年4月", "2018年5月", "2018年6月", "2018年7月", "2018年8月", "2018年9月", "2018年10月", "2018年11月", "2018年12月", "2019年1月", "2019年2月", "2019年3月", "2019年4月", "2019年5月", "2019年6月", "2019年7月", "2019年8月", "2019年9月", "2019年10月", "2019年11月", "2019年12月", "2020年1月", "2020年2月", "2020年3月", "2020年4月" ] }, "yAxis": {}, "series": [ { "name": "每月编辑数", "type": "line", "label": { "formatter": "{c}", "distance": 0, "backgroundColor": "#fff", "padding": 1 }, "data": [ { "value": 99, "label": { "show": true, "position": "bottom" } }, { "value": 674, "label": { "show": true } }, { "value": 585, "label": { "show": true } }, { "value": 317, "label": { "show": true } }, { "value": 154, "label": { "show": true, "position": "bottom" } }, { "value": 373, "label": { "show": true } }, { "value": 810, "label": { "show": true, "position": "left" } }, { "value": 829, "label": { "show": true } }, { "value": 385, "label": { "show": true, "position": "bottom" } }, { "value": 868, "label": { "show": true } }, { "value": 957, "label": { "show": true } }, { "value": 314, "label": { "show": true } }, { "value": 278, "label": { "show": true } }, { "value": 243, "label": { "show": true, "position": "bottom" } }, { "value": 423, "label": { "show": true } }, { "value": 238, "label": { "show": true, "position": "bottom" } }, { "value": 975, "label": { "show": false } }, { "value": 598, "label": { "show": true } }, { "value": 493, "label": { "show": true } }, { "value": 377, "label": { "show": true } }, { "value": 308, "label": { "show": true } }, { "value": 119, "label": { "show": true } }, { "value": 110, "label": { "show": true, "position": "bottom" } }, { "value": 177, "label": { "show": true } }, { "value": 397, "label": { "show": true } }, { "value": 76, "label": { "show": true, "position": "bottom" } }, { "value": 231, "label": { "show": true, "position": "bottom" } }, { "value": 329, "label": { "show": true } }, { "value": 230, "label": { "show": true } }, { "value": 187, "label": { "show": true } }, { "value": 125, "label": { "show": true } }, { "value": 76, "label": { "show": true, "position": "bottom" } }, { "value": 190, "label": { "show": true } }, { "value": 156, "label": { "show": true, "position": "bottom" } }, { "value": 118, "label": { "show": true, "position": "bottom" } }, { "value": 141, "label": { "show": true } }, { "value": 213, "label": { "show": true } }, { "value": 46, "label": { "show": true, "position": "left" } }, { "value": 80, "label": { "show": true } }, { "value": 86, "label": { "show": true, "position": "bottom" } }, { "value": 165, "label": { "show": true, "position": "bottom" } }, { "value": 167, "label": { "show": true } }, { "value": 97, "label": { "show": true, "position": "right" } }, { "value": 270, "label": { "show": true } }, { "value": 50, "label": { "show": true, "position": "left" } }, { "value": 27, "label": { "show": true, "position": "bottom" } }, { "value": 58, "label": { "show": true } }, { "value": 70, "label": { "show": true, "position": "bottom" } }, { "value": 111, "label": { "show": true } }, { "value": 43, "label": { "show": true } }, { "value": 40, "label": { "show": true, "position": "bottom" } }, { "value": 69, "label": { "show": true } }, { "value": 80, "label": { "show": true, "position": "bottom" } }, { "value": 395, "label": { "show": true } }, { "value": 246, "label": { "show": true } }, { "value": 68, "label": { "show": true, "position": "bottom" } }, { "value": 184, "label": { "show": true } }, { "value": 83, "label": { "show": true } }, { "value": 61, "label": { "show": true, "position": "bottom" } }, { "value": 118, "label": { "show": true } }, { "value": 111, "label": { "show": true, "position": "bottom" } }, { "value": 293, "label": { "show": true } }, { "value": 87, "label": { "show": true, "position": "left" } }, { "value": 15, "label": { "show": false } }, { "value": 76, "label": { "show": true, "position": "right" } }, { "value": 425, "label": { "show": true } }, { "value": 771, "label": { "show": true } }, { "value": 727, "label": { "show": true } }, { "value": 341, "label": { "show": true } } ], "markPoint": { "data": [ { "type": "max", "name": "最大值" }, { "type": "min", "name": "最小值" } ] }, "markLine": { "data": [ { "type": "average", "name": "平均值" } ] } } ], "animation": false}