Skip to content
  • 版块
  • 最新
  • 标签
  • 热门
  • 用户
  • 群组
皮肤
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • 默认(不使用皮肤)
  • 不使用皮肤
折叠
品牌标识

AIRIOT智慧系统搭建平台经验交流

  1. 主页
  2. 画面管理
  3. 代码图表数据绑定

代码图表数据绑定

已定时 已固定 已锁定 已移动 画面管理
帖子 发布者 浏览
  • 从旧到新
  • 从新到旧
  • 最多赞同
回复
  • 在新帖中回复
登录后回复
此主题已被删除。只有拥有主题管理权限的用户可以查看。
  • guangdaG 离线
    guangdaG 离线
    guangda
    写于 最后由 guangda 编辑
    #1

    1.代码图表样式及绑定位置:
    3c579160-d3f6-45a6-b353-0c38d6cd83ef-image.png
    2.代码图表案例1:
    1)数据源格式
    b2cbb7fe-5358-44d8-ac45-8ab87b52ffe9-6c15d37a754928946d50df00d0f8523.png
    2)绑定数据格式
    63d86ace-2f38-44dc-8b3b-8b33ee357106-1698312330450.jpg
    3)代码图表代码上方添加获取外部绑定数据代码
    f6dcbb1e-68b2-4f2b-995d-672cf365978b-1698312330439.jpg )
    附整个代码:

    let k = 0
    let dataX = []
    let y1 = []
    let s = dataset?.source
    for(k in s){
      if(s[k][0]!= null){
        dataX[k] = s[k][0]
        y1[k] = s[k][1]
        }
    
    }
    // console.log(dataX,y1,6789)
    option = {
        backgroundColor:'',
            tooltip: {
              show: true,
              trigger: "axis", //axis , item
              backgroundColor: "RGBA(0, 49, 85, 1)",
              borderColor: "rgba(0, 151, 251, 1)",
              borderWidth: 1,
              borderRadius: 0,
              textStyle: {
                color: "#BCE9FC",
                fontSize: 12,
                align: "left"
              }
            },
            grid: {
              right: "5%",
              top: "10%",
              left: "5%",
              bottom: "5%",
              containLabel: true
            },
            xAxis: {
              type: "category",
              boundaryGap: true,
              data: dataX,
              axisLabel: {
                //坐标轴刻度标签的相关设置。
                interval: 0, //设置为 1,表示『隔一个标签显示一个标签』
                //	margin:15,
                textStyle: {
                  color: "#65D5FF",
                  fontStyle: "normal",
                  fontSize: 10
                }
              },
              axisTick: {
                //坐标轴刻度相关设置。
                show: false
              },
              axisLine: {
                //坐标轴轴线相关设置
                lineStyle: {
                  color: "rgba(77, 128, 254, 0.2)"
                }
              },
              splitLine: {
                //坐标轴在 grid 区域中的分隔线。
                show: true,
                lineStyle: {
                  color: "rgba(77, 128, 254, 0.2)"
                }
              }
            },
            yAxis: [
              {
                type: "value",
                // max: 100,
                // interval:20,
                // splitNumber: 3,
                axisLabel: {
                  textStyle: {
                    color: "#65D5FF",
                    fontStyle: "normal",
                    fontSize: 12
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(77, 128, 254, 0.2)"
                  }
                }
              }
            ],
            series: [
                {
              name: '数据',
              type: "pictorialBar",
              barWidth: "70%",
              stack: "总量",
              label: {
                    show: true,
                    position: "top",
                    color: "#fff",
                    fontSize: 10
                 },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(0, 151, 251, 1)" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(194, 244, 233, 1)" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  } //渐变颜色
                }
              },
              symbol:
                "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",
    
              data: y1,
            }],
    };
    
    1 条回复 最后回复
    0
  • J 离线
    J 离线
    junn
    写于 最后由 编辑
    #2

    如果x轴数据相同,比如 [2023-10-20 ,2023-10-20,2023-10-20,2023-10-20]只会显示一个,这是什么情况@guangda

    一杯茶一根烟一行代码看一天

    1 条回复 最后回复
    0
  • guangdaG 离线
    guangdaG 离线
    guangda
    写于 最后由 编辑
    #3

    正常配置的数据时间是不同的,检查下自己配置的时间

    1 条回复 最后回复
    0
  • KkK 离线
    KkK 离线
    Kk
    写于 最后由 编辑
    #4

    这种只能显示一组数据咋解决啊image.png
    image.png

    1 条回复 最后回复
    0
  • guangdaG 离线
    guangdaG 离线
    guangda
    写于 最后由 编辑
    #5

    数据格式需要转化一下,选择转换格式 或者自定义脚本

    1 条回复 最后回复
    0
  • KkK 离线
    KkK 离线
    Kk
    写于 最后由 编辑
    #6

    转换格式选择的自定义,用平台自带的折线图,数据源是一个传感器数据可以正常显示,但是数据源是多组数据,四个传感器的数据就没办法正常显示,四条折线都重合到了一起,数据都是第一个传感器的数据

    1 条回复 最后回复
    0
  • KkK 离线
    KkK 离线
    Kk
    写于 最后由 编辑
    #7

    我用历史数据可以显示出来了,实时数据就不行

    1 条回复 最后回复
    0
  • guangdaG 离线
    guangdaG 离线
    guangda
    写于 最后由 编辑
    #8

    实时数据 用脚本处理了吗

    1 条回复 最后回复
    0
  • KkK 离线
    KkK 离线
    Kk
    写于 最后由 编辑
    #9

    可能我的代码有问题

    1 条回复 最后回复
    0
  • guangdaG 离线
    guangdaG 离线
    guangda
    写于 最后由 编辑
    #10

    或者 你用两个tab的格式,在折线图的系列1 和系列2里面填写数据编号 第一个tab是0 以此类推

    image.png
    image.png

    1 条回复 最后回复
    0
  • KkK 离线
    KkK 离线
    Kk
    写于 最后由 编辑
    #11

    非常感谢,可以了

    1 条回复 最后回复
    0
  • 核 核桃酥 在 中 引用了 这个主题
  • 核 核桃酥 在 中 引用了 这个主题
  • 核 核桃酥 在 中 引用了 这个主题
  • 核 核桃酥 在 中 引用了 这个主题

  • 登录

  • 没有帐号? 注册

  • 登录或注册以进行搜索。
  • 第一个帖子
    最后一个帖子
0
  • 版块
  • 最新
  • 标签
  • 热门
  • 用户
  • 群组