一、背景
微信小程序项目需要渲染一个柱状图，使用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文件在项目中使用
<template>
<view>
<canvas canvas-id="myid" id="myid" class="charts" @tap="tap" />
</view>
</template>
<script>
import uCharts from '../../node_modules/@qiun/ucharts/u-charts'
var uChartsInstance = {}
export default {
data() {
return {
cWidth: 750,
cHeight: 500
}
},
onReady() {
//这里的 750 对应 css .charts 的 width
this.cWidth = uni.upx2px(750)
//这里的 500 对应 css .charts 的 height
this.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)
}
}
}
</script>
<style scoped>
.charts {
width: 750rpx;
height: 500rpx;
}
</style>
3.2、组件方式
第一步：使用 HBuilderX 导入插件
uniapp插件地址指引👉：秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场
第二步：在需要使用图表的地方引入组件
<template>
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
</template>
<script>
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)
}
}
}
</script>
<style scoped>
.charts-box {
width: 100%;
height: 300px;
}
</style>
备注：需要给元素设置宽高，否则图表无法显示
四、项目中bug补充
4.1、图表被遮挡时，切换按钮图表会上移
4.1.1、bug描述
在微信小程序中使用uCharts做柱状图，进入页面后滑动图表，此时图表在可视区域被遮挡了显示不全，点击下方的切换按钮，图表会上移，脱离原本位置，后面再切回到第一个按钮会回归到正常位置
图片1是切换按钮后图表上移(PS:错误版本，需改成图片2的效果)
图片2是正常情况下切换按钮图表位置不动(PS:这版是已经修改成功的状态)
4.1.2、问题分析
查看代码发现，在组件挂载时已经获取了按钮1下的接口数据(每个按钮下会展示数据列表)，在切换按钮时，并对按钮2和按钮3都发起了请求，所以在切换按钮2和按钮3时又触发重绘。
为什么点按钮1时图表不会上移？是因为第一次进入页面组件挂载已经获取了按钮1的数据，所以在切换回按钮1时不会重新发请求触发重绘
理解了这个问题之后，我便将每个按钮的请求都放在组件挂载时获取，切换按钮只是重新赋值index值
4.2、图表数据百分比显示
4.2.1、需求描述
希望使用条形图展示收缴率，收缴率是以百分比形式展示的，因接口返回的是数值，如[20,0.8,55,90.97,7]，需要转换下以百分比形式，如下效果：
4.2.2、具体步骤
ucharts的过滤方式为format，小程序中使用format，但是不支持传递function函数，可以传递字符串，需要手动改下ucharts文档
①文档路径：uni_modules/qiun-data-charts/js-sdk/u-charts/config-ucharts
②在config-ucharts文件中找到formatter配置
百分比修改为"yAxisDemoMix":function(val){return val.toFixed(0)+’%’}
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
"formatter":{
"yAxisDemo1":function(val){return val+'元'},
"yAxisDemoMix":function(val){return val.toFixed(0)+'%'}, //→新加的代码，配置百分比的
"xAxisDemo1":function(val){return val+'年'},
"xAxisDemo2":function(val){return formatDateTime(val,'h:m')},
"seriesDemo1":function(val){return val+'元'},
"tooltipDemo1":function(item, category, index, opts){
if(index==0){
return '随便用'+item.data+'年'
}else{
return '其他我没改'+item.data+'天'
}
},
"pieDemo":function(val, index, series){
if(index !== undefined){
return series[index].name+'：'+series[index].data+'元'
}
},
"xAxisLineFeed":function(val){
return val.split("-").join("\n");
},
},③组件中使用：
series数组中中加上----->format:'yAxisDemoMix'
<view class="charts">
<qiun-data-charts
type="bar"
:opts="opts"
:chartData="chartData"
/>
</view> getServerData(billTypeStringArray,receiveRatioArray) {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories:[],
series: [
{
name: "收缴率",
data:[],
format:'yAxisDemoMix'//格式化使用
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
},4.2.3、bug展现：收缴率在99.99%的时候数据展示不全
①问题描述
因x轴线不够，导致收缴率是99.99%的时候展示不全，%号没有展示出来；原思路是给X轴push几条空数据，让X轴线拉长，这样即使在99.99%的时候也能在x轴线内展示；
但是！！！因数据是从接口获取的，X轴和Y轴数据是一一对应的，如果push X轴会改变展示的数据值，所以考虑另外一种方法，修改padding值
②解决办法：修改padding值
原padding值是从官网示例文档直接复制过来的，文档padding是：[15,30,0,5]，更改为：padding: [15,55,0,5]，具体调整值可根据需求来定，调整顺序可根据官网的说明
opts: {
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,55,0,5],//修改后的值
enableScroll: false,
legend: {},
xAxis: {}
}
4.3、解决canvas层级过高，覆盖其他标签问题
4.3.1、问题描述
下拉框是固定在顶部的，当下面的图表向上滑动时，需求是文字和图表被下拉框隐藏，在微信开发者工具中调试是正常的，在真机调试的时候文字内容会默认隐藏掉，但canvas图表会遮盖下拉框，主要是canvas层级过高的原因导致的
4.3.2、将canvas图表更换成图片
使用：uni.canvasToTempFilePath({})具体代码如下
<view >
<canvas canvas-id="progress" v-if="!canvasSrc" id="progress" disable-scroll="true"
:style="{ width: cWidth + 'px', height: cHeight + 'px' }">
</canvas>
<image :src="canvasSrc" v-if="canvasSrc" :style="{ width: cWidth + 'px', height: cHeight + 'px' }"></image>
</view>
export default {
data() {
return {
canvasSrc: '',
}
}，
onMounted(){
setTimeout(() => {
let self = this;//这里一定要转换一下，涉及到this指向问题
uni.canvasToTempFilePath({
x: 0,
y: 0,
canvasId:'progress',
success:function(res){
self.canvasSrc = res.tempFilePath
console.log('rescanvas',res);
console.log('this.canvasSrc',this.canvasSrc);
}
})
}, 1000);
}
}备注：在延时器内一定要转换this，涉及到this指向问题，我刚开始没转，花了很长时间才找到问题，切记！！！
4.3.3、利用cover-view
cover-view | uni-app官网文章来源：https://www.toymoban.com/news/detail-745126.html
最后，👏👏 😀😀😀 👍👍 文章来源地址https://www.toymoban.com/news/detail-745126.html
到了这里，关于微信小程序 uCharts的使用方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
