首页 > 其他分享 >记录 Ucharts 的使用

记录 Ucharts 的使用

时间:2023-10-07 16:12:12浏览次数:39  
标签:渲染 记录 Ucharts 开启 2d newVal 图例 使用 opts

1.开启 2d 渲染

线上运行开启 canvas2d 可以解决图表显示问题
<qiun-data-charts  canvas2d .../>
canvasId 可以不传,官方内置生成随机字符串id的方法

注:
    开启 2d 后,不能真机调试,只能开发者工具调试或扫二维码"预览"。
    开启 2d 后,模拟器出现显示穿透的问题无需理会。
    调试时若需要看到具体效果可先关闭 2d。

2.开启横向触摸拖拽

将 ontouch 设为true
<qiun-data-charts  ontouch .../>

 然后在opts 中设置
 opts: {
   enableScroll: true
}

3.动态渲染

(1) opts 和 chartsData 的 变化可以动态渲染
要将 opts 中的 update 为 true

原因是官方源码中设定了update属性
防止数据每次更新的时候,让整个图表重新渲染

(2) type 类型(图标类型)的变化有两个方法
一是修改源码:监听 type 类型,执行重新渲染画布
在qiun-data-charts.vue 的 watch 中
type(newVal, oldVal) {
 if (newVal != oldval) {
  this.checkData(this.drawData);
 }
}

二是用 v-if 来重现渲染画布
<view v-if="isUpdate">
  <qiun-data-charts :chartData="chartData" :type="selectedType"  .... />
</view>

watch:{
selectedType(newVal, oldVal) {
   if (newVal != oldVal) {
    this.chartData = {
    ...this.chartData,
    _changeTime: +new Date(),
   }
  }
 }
}

4.修改图例

单纯修改图例位置
opts: {
    padding: [20,0,0,0],//画布填充边距
    legend: {
      margin: 10, // 图例外侧填充边距,默认为5
    }
}

自定义图例的话需要先关闭原先图例,然后自己画相关样式
legend: {
  show: false,
 },

标签:渲染,记录,Ucharts,开启,2d,newVal,图例,使用,opts
From: https://www.cnblogs.com/yiheng-orange/p/17746566.html

相关文章

  • 一个电脑管理多个node版本 (不同项目使用不同版本的node)
    一、介绍使用nvm可以方便的在同一台设备上进行多个node版本之间切换,解决不同的项目所使用的node版本不一样的问题二、安装nvm1、NVM下载(1)如果已经单独安装了node,请先卸载再继续(2)进入安装包下载地址:https://github.com/coreybutler/nvm-windows/releases,选择nvm-setup.zip ......
  • .NET 使用 ZXing.Net 生成二维码,并识别
    .NET使用ZXing.Net生成二维码,并识别前言前面已经分享给很多创建二维码,条形码。。。等一系列的方式各有优缺点,暂时不做评价。今天推荐ZXing.Net。也是比较全面的一种方式,还支持解码.NET二维码生成库-QrCodeGenerator商业库--Spire.BarcodeThoughtWorks.QRCodeQRCoder......
  • Spring Boot中配置文件介绍及其使用教程
    一、配置文件介绍SpringBoot项目中,大部分配置都有默认值,但如果想替换默认配置的话,就可以使用application.properties或者application.yml或者application.yaml进行配置。SpringBoot默认会从resources目录下加载application.properties或application.yml文件。其中,application.prop......
  • 是用非构建工具开始使用Vue3
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • 使用rsync+inotify实现/www目录实时同步
     #rsync常用于做为linux系统下的数据镜像备份工具,实现远程同步,支持本地复制,或者与其他SSH、rsync主机同步数据,支持增量备份,配合任务计划,rsync能实现定时或间隔同步,配合inotify或sersync,可以实现触发式的实时数据同步官方网站:http://rsync.samba.org/软件包:rsync,rsy......
  • xpath 处理自增的id manage11 使用表达式 //*[starts-with(@id, "manage") and
      //*[starts-with(@id,"manage")andnumber(substring-after(@id,"manage"))=11] 1.使用starts-with()函数选择以"manage"开头的所有元素,2.使用substring-after()函数获取ID中"manage"后面的部分。3.使用number()函数将这部分转换为数字,4.使用逻辑运算符and来判断......
  • 使用rewrite规则实现将所有到a域名的访问rewrite到b域名
     [root@centos8~]#vim/apps/nginx/conf/conf.d/mobile.confserver{listen80;server_namewww.a.com;location/{root"/data/nginx/html/mobile";indexindex.html;rewrite/http://www.b.comredi......
  • 记录在广州两个月的Android面试插曲和感想
    前言一晃眼9月份了,入职快两个月闲着才想着写一份面经,从今年4月份离的职,中间休息加上学习一个半月(好不容易有闲时间就有些懈怠了)剩下一个半月的时间,通过内推+BOSS直聘,前前后后约到了10几家面试,终于拿到了一个满意的offer,仍然是一家做海外APP的公司。离职上家公司位于广州天河区,是一......
  • 编写脚本实现登陆远程主机。(使用expect和shell脚本两种形式)。
    expect脚本:[10:40:45root@centos8~]#catexpect{1..3}#!/usr/bin/expectspawnssh10.0.0.151expect{    "yes/no"{send"yes\n";exp_continue}    "password"{send"123456\n"}}interact​######################......
  • 在非React组件的文件中使用Reudx 会造成的问题及解决方案
    Redux的使用场景函数式组件内(hooks调用redux)其他文件(无法使用hooks调用redux)这里函数式组件内使用Redux不再赘述,站内跳转,Reduxtoolkit使用一、非函数式组件的文件内使用reduxuseDispatch和useSelector这两个hooks只能在函数组件内使用,在非函数组件的文件(以下简称三方文......