关于uniapp,使用uchart(秋云),错位问题简单记录下

关于uchart 错位问题

1.修改配置的 js  对应折线/饼状图(有难度,暂未尝试)
2.不在组件内使用  uchart(个人在组件使用uchart,父页面因为使用折线和饼状图,不只一个,所以数据变更时,减少被uchart 判断this变更的可能性)
3.确立this 指向 (未尝试,因为使用的插件,而不是git下载的原始配置包,所以不能像网上文献那样,直接改内置)
4.封装独立的内置 (和3 说的一个道理)
5.确立总页面,没有使用height:100vh;且 overflow-y:auto; (避开这个雷区,uni转微信小程序,我感觉使用了回收机制,只有页面资源未被回收的前情下,滚动才不会触发 uchart自带的追随滚动,但是去掉设定高度,以及允许滚动,这个问题居然就好了)


关于 eacher 无法显示
1.包裹  eacher 插件的盒子,使用 option:abusirute (解决了,但又没完全,至少看得到效果了,一旦有对应的相对盒子,就隐藏了)
2.源文件有一行 z-index 是99999999,且为option:abusirute
3.定制化 eachar,分离源文件配置,设定层级(下载需要的echart图配置)

### 如何在 UniApp使用秋云 UCharts 和 ECharts 实现图表功能 #### 安装依赖库 为了能够在项目中顺利引入并使用秋云UCharts和ECharts,需先安装相应的npm包。打开命令行工具,在项目的根目录下执行如下指令来完成安装操作。 ```bash npm install @qiun/ucharts --save ``` 此过程会自动下载所需的文件到`node_modules`文件夹内,并将其添加至package.json中的dependencies字段里以便后续打包部署时能够识别这些外部资源[^1]。 #### 配置全局样式与脚本 考虑到不同类型的可视化控件可能对于容器尺寸有着特定的要求,因此建议预先定义好承载图表元素的视图结构及其CSS属性。下面给出了一段HTML片段以及对应的样式规则作为参考: ```html <template> <view class="charts-box"> <!-- 图表展示区域 --> <qiun-data-charts type="ring" :chartData="chartData" :echartsApp="true" background="none" :tapLegend="false" :opts="opts"/> </view> </template> <style scoped lang="scss"> .charts-box { width: 100%; height: 375px; } </style> ``` 这里通过设置`.charts-box`类名下的宽度为百分之百而高度固定为375像素的方式确保了内部组件拥有足够的空间来进行渲染工作;同时利用`:echartsApp=true`参数指定了当处于移动端环境之下应该启用ECharts引擎负责图形绘制任务[^2]。 #### 初始化数据源及选项设定 为了让图表可以动态反映出实际业务逻辑所涉及的数据变化情况,还需要准备一份用于传递给子组件实例化过程中使用的JSON对象——即所谓的“配置项”。这部分内容通常包含了但不限于系列名称、坐标轴标签文字描述、颜色主题等一系列自定义风格化的细节说明。 ```javascript <script setup> import { ref } from 'vue'; const chartData = ref({ categories: ['Mon', 'Tue', 'Wed'], series: [ { name: "Series A", data: [3, 4, 5], } ] }); const opts = ref({ title: '', subtitle: '' }); </script> ``` 上述代码展示了如何借助Vue Composition API语法糖创建响应式的变量存储待传入props里的初始值集合。其中categories数组列出了横坐标的刻度标记点位信息;series则记录着每一条折线或者柱状体对应的具体数值分布状况;最后opts用来控制整体外观布局方面的调整[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值