• 微信小程序 uCharts的使用方法

    一、背景

    微信小程序项目需要渲染一个柱状图，使用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文件在项目中使用

    2.  
    3. <script>
    4. import uCharts from '../../node_modules/@qiun/ucharts/u-charts'
    5. var uChartsInstance = {}
    6. export default {
    7.   data() {
    8.     return {
    9.       cWidth: 750,
    10.       cHeight: 500
    11.     }
    12.   },
    13.   onReady() {
    14.     //这里的 750 对应 css .charts 的 width
    15.     this.cWidth = uni.upx2px(750)
    16.     //这里的 500 对应 css .charts 的 height
    17.     this.cHeight = uni.upx2px(500)
    18.     this.getServerData()
    19.   },
    20.   methods: {
    21.     getServerData() {
    22.       //模拟从服务器获取数据时的延时
    23.       setTimeout(() => {
    24.         let res = {
    25.           categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
    26.           series: [
    27.             {
    28.               name: '目标值',
    29.               data: [35, 36, 31, 33, 13, 34]
    30.             },
    31.             {
    32.               name: '完成量',
    33.               data: [18, 27, 21, 24, 6, 28]
    34.             }
    35.           ]
    36.         }
    37.         this.drawCharts('myid', res)
    38.       }, 500)
    39.     },
    40.     drawCharts(id, data) {
    41.       const ctx = uni.createCanvasContext(id, this)
    42.       uChartsInstance[id] = new uCharts({
    43.         type: 'column',
    44.         context: ctx,
    45.         width: this.cWidth,
    46.         height: this.cHeight,
    47.         categories: data.categories,
    48.         series: data.series,
    49.         xAxis: {
    50.           disableGrid: true
    51.         },
    52.         yAxis: {
    53.           data: [{ min: 0 }]
    54.         },
    55.         extra: {
    56.           column: {
    57.             type: 'group'
    58.           }
    59.         }
    60.       })
    61.     },
    62.     tap(e) {
    63.       uChartsInstance[e.target.id].touchLegend(e)
    64.       uChartsInstance[e.target.id].showToolTip(e)
    65.     }
    66.   }
    67. }
    68. script>
    69.  
    70. <style scoped>
    71. .charts {
    72.   width: 750rpx;
    73.   height: 500rpx;
    74. }
    75. style>

    3.2、组件方式

    第一步：使用 HBuilderX 导入插件

    uniapp插件地址指引👉：秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场 

    第二步：在需要使用图表的地方引入组件

    2.  
    3. <script>
    4. export default {
    5.   data() {
    6.     return {
    7.       chartData: {}
    8.     }
    9.   },
    10.   onReady() {
    11.     this.getServerData()
    12.   },
    13.   methods: {
    14.     getServerData() {
    15.       //模拟从服务器获取数据时的延时
    16.       setTimeout(() => {
    17.         let res = {
    18.           categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
    19.           series: [
    20.             {
    21.               name: '目标值',
    22.               data: [35, 36, 31, 33, 13, 34]
    23.             },
    24.             {
    25.               name: '完成量',
    26.               data: [18, 27, 21, 24, 6, 28]
    27.             }
    28.           ]
    29.         }
    30.         this.chartData = JSON.parse(JSON.stringify(res))
    31.       }, 500)
    32.     }
    33.   }
    34. }
    35. script>
    36.  
    37. <style scoped>
    38. .charts-box {
    39.   width: 100%;
    40.   height: 300px;
    41. }
    42. 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)+’%’}

    1. //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
    2.   "formatter":{
    3.     "yAxisDemo1":function(val){return val+'元'},
    4.     "yAxisDemoMix":function(val){return val.toFixed(0)+'%'}, //→新加的代码，配置百分比的
    5.     "xAxisDemo1":function(val){return val+'年'},
    6.     "xAxisDemo2":function(val){return formatDateTime(val,'h:m')},
    7.     "seriesDemo1":function(val){return val+'元'},
    8.     "tooltipDemo1":function(item, category, index, opts){
    9.       if(index==0){
    10.       	return '随便用'+item.data+'年'
    11.       }else{
    12.       	return '其他我没改'+item.data+'天'
    13.       }
    14.     },
    15.     "pieDemo":function(val, index, series){
    16.       if(index !== undefined){
    17.         return series[index].name+'：'+series[index].data+'元'
    18.       }
    19. 				},
    20. 				"xAxisLineFeed":function(val){
    21. 				 	return val.split("-").join("\n");
    22. 				},
    23.   },

    ③组件中使用：

    series数组中中加上----->format:'yAxisDemoMix'

    1.  class="charts">
    2.     <qiun-data-charts 
    3.      type="bar"
    4.      :opts="opts"
    5.      :chartData="chartData"
    6.      />
    7.  
    1.    getServerData(billTypeStringArray,receiveRatioArray) {
    2.       //模拟从服务器获取数据时的延时
    3.       setTimeout(() => {
    4.         //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    5.         let res = {
    6.             categories:[],
    7.             series: [
    8.               {
    9.                 name: "收缴率",
    10.                 data:[],
    11.                 format:'yAxisDemoMix'//格式化使用
    12.               }
    13.             ]
    14.           };
    15.         this.chartData = JSON.parse(JSON.stringify(res));
    16.       }, 500);
    17.     },

    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]，具体调整值可根据需求来定，调整顺序可根据官网的说明

    1.   opts: {
    2.         color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
    3.         padding: [15,55,0,5],//修改后的值
    4.         enableScroll: false,
    5.         legend: {},
    6.         xAxis: {}
    7.         }

    4.3、解决canvas层级过高，覆盖其他标签问题

    4.3.1、问题描述

    下拉框是固定在顶部的，当下面的图表向上滑动时，需求是文字和图表被下拉框隐藏，在微信开发者工具中调试是正常的，在真机调试的时候文字内容会默认隐藏掉，但canvas图表会遮盖下拉框，主要是canvas层级过高的原因导致的

    4.3.2、将canvas图表更换成图片 

    使用：uni.canvasToTempFilePath({})

    具体代码如下

    1. <view >
    2.   <canvas canvas-id="progress" v-if="!canvasSrc" id="progress" disable-scroll="true"
    3.         :style="{ width: cWidth + 'px', height: cHeight + 'px' }">
    4.  </canvas>
    5. <image :src="canvasSrc" v-if="canvasSrc" :style="{ width: cWidth + 'px', height: cHeight + 'px' }"></image>
    6. </view>
    7.  
    8. export default {
    9. data() {
    10. 	 return {
    11. 		canvasSrc: '',
    12. 		}
    13. 	}，
    14. onMounted(){
    15.  setTimeout(() => {
    16.         let self = this;//这里一定要转换一下，涉及到this指向问题
    17.         uni.canvasToTempFilePath({
    18.           x: 0,
    19.           y: 0,
    20.           canvasId:'progress',
    21.           success:function(res){
    22.             self.canvasSrc = res.tempFilePath
    23.             console.log('rescanvas',res);
    24.             console.log('this.canvasSrc',this.canvasSrc);
    25.         
    26.           }
    27.         })
    28.       }, 1000);
    29.  
    30. }
    31. }

     备注：在延时器内一定要转换this，涉及到this指向问题，我刚开始没转，花了很长时间才找到问题，切记！！！

    4.3.3、利用cover-view

    cover-view | uni-app官网

    最后，👏👏 😀😀😀 👍👍 

  • 相关阅读:
    计算机毕业设计之疫情防疫信息化管理系统
    学习笔记（1）元素，列表，表格，表单，
    信息学奥赛一本通：1130：找第一个只出现一次的字符
    事件循环
    vue3知识点：Suspense组件
    利用图解法求卷积在某一个点处的值
    java后端返回给前端不为空的属性
    最新面试必问：怎么写一个又好又快的日志库
    DGUS新升级：全面支持数字视频播放功能
    黑马-Jenkins篇
  • 原文地址：https://blog.csdn.net/weixin_71403100/article/details/134219021