Path configuration require.config ({paths: {echarts: ' Jquery/echarts-2.2.7/build/dist '}}); Use the echart.js paint function Drawchart () {require ([' echarts ', ' echarts/chart/force '///bar graph to load the bars module, load on Demand], function (EC)
{///based on prepared DOM, initialize echarts chart var myChart = ec.init (document.getElementById (' MyChart '));
Add Click event var ecconfig = require (' Echarts/config ');
Mychart.on (EcConfig.EVENT.CLICK, econsole);
var option = {tooltip: {show:false, Trigger: ' Item ', formatter: ' {a}: {b} '}, Toolbox: {
Show:true, Feature: {restore: {show:true},}}, Series: [{type: ' Force ',
Name: "Relationships", Ribbontype:false, Clickable:true, Draggable:false, Categories: [{name: ' Properties ' }, {name: ' instance '}], ItemStyle: {normal: {label: {show:true, TextStyle : {color: ' #333 '}}, NodeStyle: {brushtype: ' both ', BorDercolor: ' Rgba (255,215,0,0.4) ', borderwidth:1}, Linkstyle: {type: ' Curve '}}
, emphasis: {label: {show:false//textstyle:null//default to use global text style, see TextStyle}, NodeStyle: {//r:30}, Linkstyle: {}}, Useworker:false, Minradius:15, MA
Xradius:25, gravity:1.1, scaling:1.1, Roam:false, nodes: [{category:1, Name: ' Instance ',
Value:10, Label: ' BMW ',}, {category:0, Name: ' Property 1 ', Value:6, Label: ' BMW X1 ' {category:0, Name: ' Property 2 ', Value:6, Label: ' BMW X5 '}, {category:0, Name: ' Attribute 3 ', value:6, Label: ' BMW 3 Series '}, {category:0, Name: ' Properties 4 ', Value:6, Label: ' BMW 7 System '}, {category:0, Name: ' attribute 5 ', value:6, Label: ' BMW X6 '}, {category:0, Nam E: ' attribute 6 ', value:6, Label: ' BMW 1 Series '}, {category:0, name: ' attribute 7 ', value:6, Label: ' BMW i8 '}], Lin KS: [{source: ' attribute 1 ', target: ' instance ', Weight:1, Name: ' Property 1 '}, {Source: ' Property 2 ', Ta Rget: ' instance ', Weight:1, Name: ' Attribute 2 '}, {Source: ' Property 3 ', Target: ' instance ', Weight:1, NA Me: ' Property 3 '}, {Source: ' Property 4 ', Target: ' instance ', Weight:1, Name: ' Property 4 '}, {Source: ' Property 5 ', Target: ' instance ', Weight:1, Name: ' attribute 5 '}, {source: ' attribute 6 ', target: ' instance ', Weight:
1, Name: ' attribute 6 '}, {source: ' attribute 7 ', target: ' instance ', Weight:1, Name: ' Attribute 7 '},]}
};
Loads the data mychart.setoption for the Echarts object (option);
});
function Econsole (param) {if (typeof Param.seriesindex = = ' undefined ') {return;
} if (Param.type = = ' click ') {alert (param.name);
}
}
Building an empty div,id in HTML is Mychart,onclick event is Drawchart () and can be run with results.
Implementation node clickable, the focus is three lines of code, as follows:
var ecconfig = require (' Echarts/config ');
Mychart.on (EcConfig.EVENT.CLICK, econsole);
Clickable:true,
Important thing to say three times: <div id= "MyChart" class= "MyChart" ></div> must be set wide and high, must be set wide and high, must be set wide and high ...
Just because forget to mychart set wide, cause the diagram can not show, find a day to find the reason ...