2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

Template:Echart

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳转到导航 跳转到搜索
Template-info.svg 模板文档  [查看] [编辑] [历史] [刷新]

该模板用以显示使用Apache Echarts 5渲染的图表,使用以下5个参数:

  • datapage必填,指定包含Echarts#setOption可接受的数据的页面,该页面必须以JSON格式填写(可在页面左侧工具栏【页面信息】处打开页面信息页,找到修改“页面内容类型”的链接;或是直接打开[[Special:ChangeContentModel/【页面名称】]];例如User:AnnAngela/contributions);
    • data:数据较少且不常变动时,可以使用该参数直接填写JSON,代替datapage(提示:可以在必要时使用<nowiki>标签包裹这个JSON片段以防止模板意外闭合)。
  • 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
}