大屏展示js外接echarts图表

在做大屏展示时，碰到帆软自带图表不能满足需求，需要echarts其他图表来满足，一种方法是用网页框去外链图表单页，但这种方法需要开发代码获取数据。
还有一种是用帆软自有功能挂接echarts图表，下面来详细介绍这种方法


1、新建决策报表，在报表内放入标签控件（用于显示图表）、表格控件（用于对接数据）

2、新建数据集

3、在表格中填入数据
JOINARRAY(ds1.select(c), ",")  

预览是这样，两个数据都是字符串

把表格设为不可见

4、在标签控件加 初始化后代码，加入两个参数，值为表格里面的字符串ss=report0~a1   ，aa=report0~a2


5、加入以下js代码

1. setTimeout(function (){ //延时执行
   
2. $("div[widgetname=LABEL0]").empty(); //清空标签控件里的内容    LABEL0  标签控件名  
   
3. $("div[widgetname=LABEL0]").append("<div style='width:100%;height:100%;' id='echa'></div>"); //往标签控件里添加div，指定id
   
4. 
   
5. var myChart = echarts.init(document.getElementById("echa")); //指定echarts容器，echa  为新添加div的id，  echarts限制必须用  document.getElementById(" ")
   
6. 
   
7. strs1 = ss[0].split(",");  // 将参数转换成数组，根据图表数据格式进行处理
   
8. strs2 = aa[0].split(",");
   
9. //以下为echarts正常配置
   
10. option = {
    
11.     xAxis: {
    
12.         type: 'category',
    
13.         data: strs1
    
14.     },
    
15.     yAxis: {
    
16.         type: 'value'
    
17.     },
    
18.     series: [{
    
19.         data: strs2,
    
20.         type: 'line'
    
21.     }]
    
22. };
    
23. 
    
24.     if (option && typeof option === "object") {
    
25.         myChart.setOption(option, true);
    
26.     }
    
27. 
    
28. 
    
29. }, 500);

复制代码

6、保存预览进行调试


注意其他js的引入
echarts.common.js 链接

下载文件放到自己目录里初始化引入



同一页面使用多个这种图表注意div    id名的变换



成图







外接echarts模板.frm (23.67 KB, 下载次数: 52, 售价: 10 个F豆)

2019-9-27 14:43 上传

点击文件名下载附件
售价: 10 个F豆  [记录]

外接echarts模板.frm (18.36 KB, 下载次数: 44, 售价: 10 个F豆)

2019-10-30 09:17 上传

点击文件名下载附件
售价: 10 个F豆  [记录]

增加了关系图示例

1. 
   
2. setTimeout(function (){
   
3. $("div[widgetname=GUANXITU]").empty();
   
4. $("div[widgetname=GUANXITU]").append("<div style='width:100%;height:100%;' id='gxt'></div>");
   
5. 
   
6. 
   
7. var myChart = echarts.init(document.getElementById("gxt"));
   
8. 
   
9. option = {
   
10.        // backgroundColor: 'black',
    
11. 
    
12.         tooltip: {},
    
13.         animationDurationUpdate: 1000,
    
14.         animationEasingUpdate: 'quinticInOut',
    
15.         color:['#83e0ff','#45f5ce','#b158ff'],
    
16.         series: [
    
17.             {
    
18.                 type: 'graph',
    
19.                 layout: 'force',
    
20.                 force:{
    
21.                     repulsion:300,
    
22.                     edgeLength:120
    
23.                 },
    
24.                 roam: true,
    
25.                 label: {
    
26.                     normal: {
    
27.                         show: true
    
28.                     }
    
29.                 },
    
30.                 data: [
    
31.                     {
    
32.                         name: '类目一',
    
33.                         symbolSize: 80,  //值控制它的面积大小
    
34.                         draggable: true,
    
35.                         category: 0,
    
36.                         itemStyle: {
    
37.                             normal: {
    
38.                                 borderColor: '#ff1f31',
    
39.                                 borderWidth: 1, //边框粗细
    
40.                                 shadowBlur:2,
    
41.                                 shadowColor: '#ff1f31',
    
42.                                 color: '#ff1f31',
    
43.                             }
    
44.                         }
    
45.                     },
    
46.                     {
    
47.                         name: '类目二',
    
48.                         symbolSize: 55,
    
49.                         itemStyle: {
    
50.                             normal: {
    
51.                                 borderColor:'#383afe',
    
52.                                 borderWidth: 1,
    
53.                                 shadowBlur: 2,
    
54.                                 shadowColor: '#383afe',
    
55.                                 color: '#383afe',
    
56.                             }
    
57.                         },
    
58.                         category: 1,
    
59. 
    
60.                     },
    
61.                     {
    
62.                         name:'类目三',
    
63.                         symbolSize: 40,
    
64.                         category: 1,
    
65.                         itemStyle: {
    
66.                             normal: {
    
67.                                 borderColor: '#5052fe',
    
68.                                 borderWidth: 1,
    
69.                                 shadowBlur: 2,
    
70.                                 shadowColor: '#5052fe',
    
71.                                 color: '#5052fe',
    
72.                             }
    
73.                         },
    
74. 
    
75.                     },
    
76.                     {
    
77.                         name:'类目四',
    
78.                         symbolSize: 40,
    
79.                         category: 1,
    
80.                         itemStyle: {
    
81.                             normal: {
    
82.                                 borderColor: '#383afe',
    
83.                                 borderWidth: 1,
    
84.                                 shadowBlur: 2,
    
85.                                 shadowColor: '#383afe',
    
86.                                 color: '#383afe',
    
87.                             }
    
88.                         },
    
89. 
    
90.                     },
    
91.                     {
    
92.                         name:'类目五',
    
93.                         symbolSize: 40,
    
94.                         category: 1,
    
95.                         itemStyle: {
    
96.                             normal: {
    
97.                                 borderColor: '#5052fe',
    
98.                                 borderWidth: 1,
    
99.                                 shadowBlur: 2,
    
100.                                 shadowColor: '#5052fe',
     
101.                                 color: '#5052fe',
     
102.                             }
     
103.                         },
     
104. 
     
105.                     },
     
106.                     {
     
107.                         name:'类目六',
     
108.                         symbolSize: 40,
     
109.                         category: 1,
     
110.                         itemStyle: {
     
111.                             normal: {
     
112.                                 borderColor: '#383afe',
     
113.                                 borderWidth: 1,
     
114.                                 shadowBlur: 2,
     
115.                                 shadowColor: '#383afe',
     
116.                                 color: '#383afe',
     
117.                             }
     
118.                         },
     
119. 
     
120.                     },
     
121.                     {
     
122.                         name:'类目七',
     
123.                         symbolSize: 40,
     
124.                         category: 1,
     
125.                         itemStyle: {
     
126.                             normal: {
     
127.                                 borderColor: '#5052fe',
     
128.                                 borderWidth: 1,
     
129.                                 shadowBlur: 2,
     
130.                                 shadowColor: '#5052fe',
     
131.                                 color: '#5052fe',
     
132.                             }
     
133.                         },
     
134. 
     
135.                     },
     
136.                     {
     
137.                         name: '类目八',
     
138.                         symbolSize:55,
     
139.                         category: 2,
     
140.                         itemStyle: {
     
141.                             normal: {
     
142.                                 borderColor: '#1cc73a',
     
143.                                 borderWidth: 1,
     
144.                                 shadowBlur: 2,
     
145.                                 shadowColor: '#1cc73a',
     
146.                                 color: '#1cc73a',
     
147.                             }
     
148.                         },
     
149. 
     
150.                     },
     
151.                     {
     
152.                         name: '类目九',
     
153.                         symbolSize:40,
     
154.                         category: 2,
     
155.                         itemStyle: {
     
156.                             normal: {
     
157.                                 borderColor: '#30da4e',
     
158.                                 borderWidth: 1,
     
159.                                 shadowBlur: 2,
     
160.                                 shadowColor: '#30da4e',
     
161.                                 color: '#30da4e'
     
162.                             }
     
163.                         },
     
164. 
     
165.                     },
     
166.                     {
     
167.                         name: '类目十',
     
168.                         symbolSize:40,
     
169.                         itemStyle: {
     
170.                             normal: {
     
171.                                 borderColor: '#30da4e',
     
172.                                 borderWidth: 1,
     
173.                                 shadowBlur: 2,
     
174.                                 shadowColor: '#30da4e',
     
175.                                 color: '#30da4e'
     
176. 
     
177.                             }
     
178.                         },
     
179.                         category: 2,
     
180. 
     
181.                                           
     
182.                     }],
     
183.                 links: [
     
184.                     {
     
185.                         source: '类目一',
     
186.                         target: '类目二'
     
187. 
     
188.                     },
     
189.                     {
     
190.                         source: '类目一',
     
191.                         target: '类目三',
     
192.                     },
     
193.                     {
     
194.                         source: '类目一',
     
195.                         target: '类目四',
     
196.                     },
     
197.                      {
     
198.                         source: '类目一',
     
199.                         target: '类目五',
     
200.                     },
     
201.                     {
     
202.                         source: '类目二',
     
203.                         target: '类目六',
     
204.                     },
     
205.                     {
     
206.                         source: '类目二',
     
207.                         target: '类目七',
     
208.                     },
     
209.                     {
     
210.                         source: '类目二',
     
211.                         target: '类目八',
     
212.                     },
     
213.                     {
     
214.                         source: '类目二',
     
215.                         target: '类目九',
     
216.                     },
     
217.                     {
     
218.                         source: '类目二',
     
219.                         target: '类目十',
     
220.                     },
     
221.                     {
     
222.                         source: '类目三',
     
223.                         target: '类目十',
     
224.                     },
     
225.                     {
     
226.                         source: '类目三',
     
227.                         target: '类目七',
     
228.                     },
     
229.                                         {
     
230.                         source: '类目三',
     
231.                         target: '类目六',
     
232.                     },
     
233.                                         {
     
234.                         source: '类目三',
     
235.                         target: '类目四',
     
236.                     }
     
237.                     
     
238.                 ],
     
239.                 lineStyle: {
     
240.                     normal: {
     
241.                         opacity: 0.9,
     
242.                         width: 4,
     
243.                         curveness: 0
     
244.                     }
     
245.                 },
     
246.                 categories:[
     
247.                     {name: '0'},
     
248.                     {name: '1'},
     
249.                     {name: '2'},
     
250.                     {name: '3'},
     
251.                     {name: '4'}
     
252.                 ]
     
253.             }
     
254.         ]
     
255.     };
     
256. 
     
257. 
     
258.     if (option && typeof option === "object") {
     
259.         myChart.setOption(option, true);
     
260.     }
     
261. 
     
262. 
     
263. 
     
264. 
     
265. 
     
266. 
     
267. 
     
268. 
     
269. 
     
270. 
     
271. 
     
272. 
     
273. 
     
274. 
     
275. 
     
276. }, 500);
     
277. 
     
278. 
     
279. 
     
280. 
     

复制代码

啥都不说了 666起来

现在一直报错，老哥你再瞅瞅，模板直接预览

Doctor_Wei 发表于 2019-10-23 09:09
现在一直报错，老哥你再瞅瞅，模板直接预览

水球图需要额外引入一个js，折线图是可以直接就显示的

为什么没有报错，也没有展示折线图

请教一个问题，通过表单获取数据，如何分模块更新。Label传入的参数一直无法更新，除非全局更新

下载下来预览啥也没有怎么办

请问大佬，这样做的echarts图表可否导出