Шаблон:Echarts
{{Echarts}} — шаблон, позволяющий внедрять в страницы визуализации, отрисованные программой Apache ECharts.
Визуализация описывается особым языком, являющимся подмножеством JSON.
Программа визуализации написана на языке JavaScript и выполняется на стороне сервера с помощью node.js. Таким образом, отображение визуализации не зависит от наличия JavaScript в браузере и даже от наличия самого браузера.
ПараметрыПравить
- или
chart— описание визуализации в виде JSON. Все|должны быть заменены на{{!}},}}на} },=на{{=}}(вместо последнего можно использовать именованный параметрchart),
ширина(необязательный) — ширина в пикселях,высота(необязательный) — высота в пикселях.
ПримерыПравить
| Викитекст | Вывод |
|---|---|
{{echarts|{
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b}: {c} ({d}%)"
},
"legend": {
"data": [
"Direct",
"Marketing",
"Search Engine",
"Email",
"Union Ads",
"Video Ads",
"Baidu",
"Google",
"Bing",
"Others"
]
},
"series": [
{
"name": "Access From",
"type": "pie",
"selectedMode": "single",
"radius": [0, "30%"],
"label": {
"position": "inner",
"fontSize": 14
},
"labelLine": {
"show": false
},
"data": [
{ "value": 1548, "name": "Search Engine" },
{ "value": 775, "name": "Direct" },
{ "value": 679, "name": "Marketing", "selected": true }
]
},
{
"name": "Access From",
"type": "pie",
"radius": ["45%", "60%"],
"labelLine": {
"length": 30
},
"label": {
"formatter": "{a{{!}}{a} }{abg{{!}}}\n{hr{{!}}}\n {b{{!}}{b}：}{c} {per{{!}}{d}%} ",
"backgroundColor": "#F6F8FC",
"borderColor": "#8C8D8E",
"borderWidth": 1,
"borderRadius": 4,
"rich": {
"a": {
"color": "#6E7079",
"lineHeight": 22,
"align": "center"
},
"hr": {
"borderColor": "#8C8D8E",
"width": "100%",
"borderWidth": 1,
"height": 0
},
"b": {
"color": "#4C5058",
"fontSize": 14,
"fontWeight": "bold",
"lineHeight": 33
},
"per": {
"color": "#fff",
"backgroundColor": "#4C5058",
"padding": [3, 4],
"borderRadius": 4
}
}
},
"data": [
{ "value": 1048, "name": "Baidu" },
{ "value": 335, "name": "Direct" },
{ "value": 310, "name": "Email" },
{ "value": 251, "name": "Google" },
{ "value": 234, "name": "Union Ads" },
{ "value": 147, "name": "Bing" },
{ "value": 135, "name": "Video Ads" },
{ "value": 102, "name": "Others" }
]
}
]
}
}}
|
Требуемые настройки External DataПравить
// ECharts:
/* in /var/www/js:
npm install echarts --save
mkdir echarts
echo | echarts/echarts.js <<ECHARTS
const echarts = require( 'echarts' );
// Parameters:
let width = 400;
let height = 300;
process.stdin.on('data', ( data ) => {
// Parameters:
let width = 400;
let height = 300;
process.argv.forEach( ( val, index, array ) => {
let matches = val.match( /(width|height)\s*=\s*(\d+)/ );
if ( matches ) {
if ( matches[1] === 'width' ) {
width = parseInt( matches[2] );
} else if ( matches[1] === 'height' ) {
height = parseInt( matches[2] );
}
}
});
// In SSR mode the first container parameter is not required
let chart = echarts.init( null, null, {
renderer: 'svg', // must use SVG rendering mode
ssr: true, // enable SSR
width: width,
height: height
});
// Use setOption as normal
chart.setOption( JSON.parse( data ) );
// Output a string
console.log( chart.renderToSVGString() );
// If chart is no longer useful, consider dispose it to release memory.
chart.dispose();
chart = null;
});
ECHARTS
*/
$wgExternalDataSources['echarts'] = [
'name' => 'ECharts',
'program url' => 'https://echarts.apache.org',
'version command' => 'npm -v echarts',
'command' => 'node /var/www/js/echarts/echarts.js width=$width$ height=$height$ < echart.json',
'limits' => [ 'memory' => 0 ],
'params' => [ 'chart', 'width' => 400, 'height' => 300 ],
'param filters' => [ 'chart' => static function( string $json ): bool {
return is_array( $json ) || is_string( $json ) && json_decode( $json );
}, 'width' => '/^\d+$/', 'height' => '/^\d+$/' ],
'input' => 'chart',
'min cache seconds' => 30 * 24 * 60 * 60,
'tag' => 'echarts'
];