echart注意事项

1. // 路径配置  
2. require.config({  
3.     paths : {  
4.         echarts : 'jquery/echarts-2.2.7/build/dist'  
5.     }  
6. });  
7. // 使用EChart.js画图  
8. function drawChart() {  
9.     require([ 'echarts', 'echarts/chart/force' // 使用柱状图就加载bar模块，按需加载  
10.     ], function(ec) {  
11.         // 基于准备好的dom，初始化echarts图表  
12.         var myChart = ec.init(document.getElementById('myChart'));  
13.         // 添加点击事件  
14.         var ecConfig = require('echarts/config');  
15.         myChart.on(ecConfig.EVENT.CLICK, eConsole);    
16.         var option = {  
17.             tooltip : {  
18.                 show : false,  
19.                 trigger : 'item',  
20.                 formatter : '{a} : {b}'  
21.             },  
22.             toolbox : {  
23.                 show : true,  
24.                 feature : {  
25.                     restore : {  
26.                         show : true  
27.                     },  
28.                 }  
29.             },  
30.             series : [ {  
31.                 type : 'force',  
32.                 name : "关系",  
33.                 ribbonType : false,  
34.                 clickable : true,  
35.                 draggable : false,  
36.                 categories : [ {  
37.                     name : '属性'  
38.                 }, {  
39.                     name : '实例'  
40.                 } ],  
41.                 itemStyle : {  
42.                     normal : {  
43.                         label : {  
44.                             show : true,  
45.                             textStyle : {  
46.                                 color : '#333'  
47.                             }  
48.                         },  
49.                         nodeStyle : {  
50.                             brushType : 'both',  
51.                             borderColor : 'rgba(255,215,0,0.4)',  
52.                             borderWidth : 1  
53.                         },  
54.                         linkStyle : {  
55.                             type : 'curve'  
56.                         }  
57.                     },  
58.                     emphasis : {  
59.                         label : {  
60.                             show : false  
61.                         // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE  
62.                         },  
63.                         nodeStyle : {  
64.                         // r: 30  
65.                         },  
66.                         linkStyle : {}  
67.                     }  
68.                 },  
69.                 useWorker : false,  
70.                 minRadius : 15,  
71.                 maxRadius : 25,  
72.                 gravity : 1.1,  
73.                 scaling : 1.1,  
74.                 roam : false,  
75.                 nodes : [ {  
76.                     category : 1,  
77.                     name : '实例',  
78.                     value : 10,  
79.                     label : '宝马',  
80.                 }, {  
81.                     category : 0,  
82.                     name : '属性1',  
83.                     value : 6,  
84.                     label : '宝马X1'  
85.                 }, {  
86.                     category : 0,  
87.                     name : '属性2',  
88.                     value : 6,  
89.                     label : '宝马X5'  
90.                 }, {  
91.                     category : 0,  
92.                     name : '属性3',  
93.                     value : 6,  
94.                     label : '宝马3系'  
95.                 }, {  
96.                     category : 0,  
97.                     name : '属性4',  
98.                     value : 6,  
99.                     label : '宝马7系'  
100.                 }, {  
101.                     category : 0,  
102.                     name : '属性5',  
103.                     value : 6,  
104.                     label : '宝马X6'  
105.                 }, {  
106.                     category : 0,  
107.                     name : '属性6',  
108.                     value : 6,  
109.                     label : '宝马1系'  
110.                 }, {  
111.                     category : 0,  
112.                     name : '属性7',  
113.                     value : 6,  
114.                     label : '宝马i8'  
115.                 } ],  
116.                 links : [ {  
117.                     source : '属性1',  
118.                     target : '实例',  
119.                     weight : 1,  
120.                     name : '属性1'  
121.                 }, {  
122.                     source : '属性2',  
123.                     target : '实例',  
124.                     weight : 1,  
125.                     name : '属性2'  
126.                 }, {  
127.                     source : '属性3',  
128.                     target : '实例',  
129.                     weight : 1,  
130.                     name : '属性3'  
131.                 }, {  
132.                     source : '属性4',  
133.                     target : '实例',  
134.                     weight : 1,  
135.                     name : '属性4'  
136.                 }, {  
137.                     source : '属性5',  
138.                     target : '实例',  
139.                     weight : 1,  
140.                     name : '属性5'  
141.                 }, {  
142.                     source : '属性6',  
143.                     target : '实例',  
144.                     weight : 1,  
145.                     name : '属性6'  
146.                 }, {  
147.                     source : '属性7',  
148.                     target : '实例',  
149.                     weight : 1,  
150.                     name : '属性7'  
151.                 }, ]  
152.             } ]  
153.         };  
154.   
155.         // 为echarts对象加载数据  
156.         myChart.setOption(option);  
157.           
158.     });  
159. }  
160.   
161. function eConsole(param) {    
162.     if (typeof param.seriesIndex == 'undefined') {    
163.         return;    
164.     }    
165.     if (param.type == 'click') {    
166.         alert(param.name);    
167.     }    
168. }    

在html中建一个空的div，id是myChart，onclick事件是drawChart()，即可运行得到结果。

 

实现节点可点击，重点在于三行代码，如下：

 

[javascript]  view plain  copy

 

1. var ecConfig = require('echarts/config');  
2. myChart.on(ecConfig.EVENT.CLICK, eConsole);  
3. clickable : true,  

 

重要的事情说三遍：<div id="myChart" class="myChart"></div>一定要设置宽和高、一定要设置宽和高、一定要设置宽和高！！！
刚刚因为忘记给myChart设置宽，导致图无法显示，找了一天才找到原因！！！