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.isUpdate = true |
| this.chartData = { |
| ...this.chartData, |
| _changeTime: +new Date(), |
| } |
| }else{ |
| this.isUpdate = false |
| } |
| } |
| } |
4.修改图例
| 单纯修改图例位置 |
| opts: { |
| padding: [20,0,0,0],//画布填充边距 |
| legend: { |
| margin: 10, // 图例外侧填充边距,默认为5 |
| } |
| } |
| |
| 自定义图例的话需要先关闭原先图例,然后自己画相关样式 |
| legend: { |
| show: false, |
| }, |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现