网站系统性能定义,宁波网页制作,义乌市住房和城乡建设局网站,seo公司网站推广一、背景
微信小程序项目需要渲染一个柱状图#xff0c;使用uCharts组件完成
uCharts官网指引#x1f449;#xff1a;uCharts官网 - 秋云uCharts跨平台图表库
二、实现效果 三、具体使用
进入官网查看指南#xff0c;有两种方式进行使用#xff1a;分别是原生方式与组…一、背景
微信小程序项目需要渲染一个柱状图使用uCharts组件完成
uCharts官网指引uCharts官网 - 秋云uCharts跨平台图表库
二、实现效果 三、具体使用
进入官网查看指南有两种方式进行使用分别是原生方式与组件方式
3.1、原生方式
第一步获取u-charts.js 获取方式一通过码云 uCharts 项目开源地址获取 u-charts.js https://gitee.com/uCharts/uCharts 获取方式二通过 npm 命令 npm i qiun/ucharts 安装 安装成功后使用 import 或 require 进行引用 备注我使用的是第二种方式npm下载后再通过import使用的
第二步引入u-charts.js文件在项目中使用 templateviewcanvas canvas-idmyid idmyid classcharts taptap //view
/templatescript
import uCharts from ../../node_modules/qiun/ucharts/u-charts
var uChartsInstance {}
export default {data() {return {cWidth: 750,cHeight: 500}},onReady() {//这里的 750 对应 css .charts 的 widththis.cWidth uni.upx2px(750)//这里的 500 对应 css .charts 的 heightthis.cHeight uni.upx2px(500)this.getServerData()},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() {let res {categories: [2016, 2017, 2018, 2019, 2020, 2021],series: [{name: 目标值,data: [35, 36, 31, 33, 13, 34]},{name: 完成量,data: [18, 27, 21, 24, 6, 28]}]}this.drawCharts(myid, res)}, 500)},drawCharts(id, data) {const ctx uni.createCanvasContext(id, this)uChartsInstance[id] new uCharts({type: column,context: ctx,width: this.cWidth,height: this.cHeight,categories: data.categories,series: data.series,xAxis: {disableGrid: true},yAxis: {data: [{ min: 0 }]},extra: {column: {type: group}}})},tap(e) {uChartsInstance[e.target.id].touchLegend(e)uChartsInstance[e.target.id].showToolTip(e)}}
}
/scriptstyle scoped
.charts {width: 750rpx;height: 500rpx;
}
/style3.2、组件方式
第一步使用 HBuilderX 导入插件
uniapp插件地址指引秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场
第二步在需要使用图表的地方引入组件
templateview classcharts-boxqiun-data-charts typecolumn :chartDatachartData //view
/templatescript
export default {data() {return {chartData: {}}},onReady() {this.getServerData()},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() {let res {categories: [2016, 2017, 2018, 2019, 2020, 2021],series: [{name: 目标值,data: [35, 36, 31, 33, 13, 34]},{name: 完成量,data: [18, 27, 21, 24, 6, 28]}]}this.chartData JSON.parse(JSON.stringify(res))}, 500)}}
}
/scriptstyle scoped
.charts-box {width: 100%;height: 300px;
}
/style备注需要给元素设置宽高否则图表无法显示
四、项目中bug补充
4.1、bug描述
在微信小程序中使用uCharts做柱状图进入页面后滑动图表此时图表在可视区域被遮挡了显示不全点击下方的切换按钮图表会上移脱离原本位置后面再切回到第一个按钮会回归到正常位置
图片1是切换按钮后图表上移(PS:错误版本需改成图片2的效果)
图片2是正常情况下切换按钮图表位置不动(PS:这版是已经修改成功的状态) 4.2、问题分析
查看代码发现在组件挂载时已经获取了按钮1下的接口数据(每个按钮下会展示数据列表)在切换按钮时并对按钮2和按钮3都发起了请求所以在切换按钮2和按钮3时又触发重绘。
为什么点按钮1时图表不会上移是因为第一次进入页面组件挂载已经获取了按钮1的数据所以在切换回按钮1时不会重新发请求触发重绘
理解了这个问题之后我便将每个按钮的请求都放在组件挂载时获取切换按钮只是重新赋值index值
