Javascript framework echarts plug-in to implement cool human cube
Recently, due to project requirements, a network relationship effect similar to the person-cube effect is required. After querying many documents, it is found that the open-source echarts component of Baidu is very suitable and the loading speed is great, echarts graphics are mainly based on the new features of html5 and the canvas. The following are some of my own processes and experiences for your reference.
There are detailed use procedures and examples, as long as you know a little javascript can understand.
Step 1:
Download the echarts plug-in: import two files in the project
1 esl. js
2 echarts-original.js
3 jquery-1.9.1.min.js jQuery compressed file
Step 2:
Define a div container to hold the echarts image. An id must be defined. As follows:
Step 3:
Configure related graphics properties, load the graphics to the container, and start the graphics.
The Code is as follows:
<Script type = text/javascript src = javascript/jquery-1.9.1.min.js> </script> <script type = text/javascript src = js/echarts/esl. js> </script> <script type = text/javascript> function relativeWord () {// configure require in the path. config ({paths: {echarts: js/echarts-original, echarts/chart/force: js/echarts-original }}); // use require ([echarts, echarts/chart/force], function (ec) {// force-Directed Graph module, load as needed // Based on the prepared dom, initialize echarts chart var myChart = ec. init (document. getElementById (rel); var option = {title: {text: network relationship diagram, subtext: Data Source andy, x: right, y: bottom, padding: [10, 30]}, dataRange: {color: ['# 1178ad', '#72bbd0']}, tooltip: {trigger: item, formatter: {a0 }:{ b0}
Link value: {d}, borderRadius: 3, backgroundColor: rgba (0.4, 0,), padding: 4, axisPointer: {type: 'none', lineStyle: {color: '# 4b8', width: 2, type: 'dashed'}, crossStyle: {color:' # 1e90ff ', width: 5, type: 'dashed'}, shadowStyle: {size: 'auto', color: 'rgba (150,150,150, 0.3) '}}, color: [' #33ff33 ',' # cc33ff '], legend: {data: [{name: center word, textStyle: {color: #33ff33 },{ name: link word, textStyle: {co Lor: # cc33ff }}, series: [{type: force, name: Word relation, categories: [{name: center word,}, {name: link word,}], itemStyle: {normal: {label: {show: true, textStyle: {color: # FFF, fontFamily:, fontSize: 12 }}, nodeStyle: {brushType: both, color: '#333333', strokeColor: rgba (255,215, 0, 0.4), lineWidth: 10}, linkStyle: {strokeColor: #8cdfc3, type: 'dashed', lineWidth: 2 }}, emphasis: {label: {show: fa Lse // textStyle: null // The Global Text style is used by default. For details, see TEXTSTYLE}, nodeStyle :{// color: #4B8 // r: 30 },}, useWorker: false, minRadius: 25, maxRadius: 35, gravity: 0.4, scaling: 1.5, animation: true, large: true, useWorker: 20, linkSymbol: none, nodes: [{category: 0, name: 'Happiness ', value: 10 },{ category: 1, name: 'you', value: 4 },{ category: 1, name:' I ', value: 5}, {category: 1, name: 'tag', value: 4}, {category: 1, n Ame: 'home', value: 22}, {category: 1, name: 'microwa', value: 3}, {category: 1, name: 'love ', value: 4 },{ category: 1, name: 'friendship ', value: 9 },{ category: 1, name: 'affection Relatives', value: 11 }, {category: 1, name: 'house', value: 14}, {category: 1, name: 'chely', value: 10}, {category: 1, name: 'Happy ', value: 11}, {category: 1, name: 'Healthy', value: 14}, {category: 1, name: 'career ', value: 12}, {category: 1, name: 'villa ', valu E: 10}], links: [{source: 'Happy ', target: 'you', weight: 2}, {source: 'Happy', target: 'me ', weight: 9}, {source: 'Happiness ', target: 'to', weight: 11}, {source: 'Happiness', target: 'home', weight: 2}, {source: 'Happiness ', target: 'Happy', weight: 11}, {source: 'Happy ', target: 'Healthy', weight: 14 }, {source: 'Happiness ', target: 'career', weight: 12}, {source: 'Happiness ', target: 'villa', weight: 10}, {source: 'You', target: 'chely', weight: 22}, {s Ource: 'you', target: 'microwa', weight: 10}, {source: 'you', target: 'house', weight: 8}, {source: 'my', target: 'love', weight: 5}, {source: 'house', target: 'love', weight: 10}, {source: 'chela', target: 'home', weight: 5}, {source: 'Happiness ', target: 'house', weight: 7}, {source: 'me ', target: 'love', weight: 9}, {source: 'my', target: 'friend', weight: 7},]}; var ecConfig = require (echarts/config); function focus (param) {var d Ata = param. data; var links = option. series [0]. links; var nodes = option. series [0]. nodes; if (data. source! = Undefined & data.tar get! = Undefined) {// click the edge var sourceNode = nodes [data. source]; var targetNode = nodes‑data.tar get]; console. log (selected edge + sourceNode. name +-> + targetNode. name + (+ data. weight +);} else {// click console. log (+ data. name + (+ data. value +);} console. log (param);} myChart. on (ecConfig. EVENT. CLICK, focus); // load the data myChart for the echarts object. setOption (option) ;}) ;}relativeword (); </script>
Its entry:
