大屏展示js外接echarts图表

我是社区第110628位番薯,欢迎点我头像关注我哦~
在做大屏展示时,碰到帆软自带图表不能满足需求,需要echarts其他图表来满足,一种方法是用网页框去外链图表单页,但这种方法需要开发代码获取数据。
还有一种是用帆软自有功能挂接echarts图表,下面来详细介绍这种方法


1、新建决策报表,在报表内放入标签控件(用于显示图表)、表格控件(用于对接数据)
截图201909271418156506.png
2、新建数据集
截图201909271420158294.png
3、在表格中填入数据
JOINARRAY(ds1.select(c), ",")  
截图201909271421207698.png
预览是这样,两个数据都是字符串
截图201909271422294120.png
把表格设为不可见

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

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. var myChart = echarts.init(document.getElementById("echa")); //指定echarts容器,echa  为新添加div的id,  echarts限制必须用  document.getElementById(" ")

  5. strs1 = ss[0].split(",");  // 将参数转换成数组,根据图表数据格式进行处理
  6. strs2 = aa[0].split(",");
  7. //以下为echarts正常配置
  8. option = {
  9.     xAxis: {
  10.         type: 'category',
  11.         data: strs1
  12.     },
  13.     yAxis: {
  14.         type: 'value'
  15.     },
  16.     series: [{
  17.         data: strs2,
  18.         type: 'line'
  19.     }]
  20. };

  21.     if (option && typeof option === "object") {
  22.         myChart.setOption(option, true);
  23.     }


  24. }, 500);
复制代码



6、保存预览进行调试


注意其他js的引入 截图201909271438026187.png
echarts.common.js 链接

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



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


成图


截图201909271441255886.png




外接echarts模板.frm (23.67 KB, 下载次数: 52, 售价: 10 个F豆)
参与人数 +1 F豆 +100 F币 +1 理由
饭团君 + 100 + 1 骚年,我看好你哦

查看全部评分

发表于 2019-9-27 16:42:40
发表于 2019-9-27 16:59:45
啥都不说了 666起来
发表于 2019-10-23 09:09:35
现在一直报错,老哥你再瞅瞅,模板直接预览
发表于 2019-10-28 14:16:42
Doctor_Wei 发表于 2019-10-23 09:09
现在一直报错,老哥你再瞅瞅,模板直接预览

水球图需要额外引入一个js,折线图是可以直接就显示的
发表于 2020-5-12 18:20:03
为什么没有报错,也没有展示折线图
发表于 2020-6-8 18:11:09
请教一个问题,通过表单获取数据,如何分模块更新。Label传入的参数一直无法更新,除非全局更新
发表于 2021-2-8 09:44:56
下载下来预览啥也没有怎么办
发表于 2023-7-27 09:43:26
请问大佬,这样做的echarts图表可否导出
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

11回帖数 11关注人数 15767浏览人数
最后回复于:2023-7-27 09:43

返回顶部 返回列表