ECharts force-oriented layout diagram - data source description and back-end API convention

WBOY
Release: 2016-08-08 09:30:52
Original
2344 people have browsed it

Echarts?

About Echarts please go here

force force directed diagram

Implementation method, such as:

<code>function require_EC () {
	require(
	    [
	        'echarts',
	        //载入force模块
	        'echarts/chart/kforce'
	    ],
	    function (ec) {
	    	//确定需要绘制的DOM
	        setChats(ec);
	    }
	)
}

function setChats (ec) {
	var myChart = ec.init(document.getElementById('main'));
	myChart.setOption(option);
}</code>
Copy after login

Data source description

There are three main data sources: categories (data classification), nodes (node ​​names in the chart), links (links between nodes in the chart), as shown below:

API Development

Force-directed graph data API documentation (personal opinions are for reference only)

Implement functions 1. Categories, nodes, links, and arrays are loaded on demand to reduce server pressure;
2. Optimization of displaying island links
3. Cache data application
Main parameters and main values ​​passed by the interface name, force, categories, nodes, links, cache, refresh
Return code See the return code attachment picture

Parameter description:

Request example: (see picture for details)

Example link Return value Meaning
force-api.php?name=demo1&force=nodes Picture details Obtained the nodes data of the force-directed graph named "demo1"
force-api.php?name=demo1&force=categories Picture details Acquired the categories data of the force-directed chart named "demo1", [and so on, links are not given as examples]
force-api.php?name=demo1_isolated_all&force=links Picture details 【How to get the island link? 】Treat the chart composed of island links as a new chart: as shown in the figure, the links array of all island links (demo1_isolated_all) of demo1 is obtained
force-api.php?name=demo1_isolated_all&force=nodes&cache=refresh Picture details Obtained the node array of all isolated island links (demo1_isolated_all) of demo1 and performed a forced refresh

Note: The first time you request the server, if the request is correct the return code will be

<code>code: "2200",message: "nodes success",</code>
Copy after login

The second request to the server will return

<code>code: "3304",message: "cache:2015-01-19 15:14:43",</code>
Copy after login

Unless the parameter cache=refresh is added, the cache time is 3 days

Return code convention

End

Attached is the API interface source code php (php just write it down, tap...): Download

The above introduces the force-oriented layout diagram of ECharts - data source description and back-end API convention, including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template