Echarts Add Click event

Source: Internet
Author: User

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 ...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.