Шаблон:Echarts

{{Echarts}} — шаблон, позволяющий внедрять в страницы визуализации, отрисованные программой Apache ECharts.

Визуализация описывается особым языком, являющимся подмножеством JSON.

Программа визуализации написана на языке JavaScript и выполняется на стороне сервера с помощью node.js. Таким образом, отображение визуализации не зависит от наличия JavaScript в браузере и даже от наличия самого браузера.

Параметры

1. или 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'
];

Системные требования

• node.js,
• Apache ECharts,
• External Data.

Ссылки

• About echarts.