wxchart 小程序 线条图不显示y轴的网格线 (分割线)

news/2024/10/23 5:42:19/

如下图:项目需求不显示包括x轴的6条灰色分割线。 

分析:

看了一下源码已经写死了是5条分割线,加一条x轴刻度线。没给公开配置方法。

 解决方案:

既然没有配置项目,可以转变思路,把这些线条配置成白色,那么也是等于没有线条。跟背景色一样。使用yAxis:{ gridColor:'#ffffff'}

yAxis: {min:-2.0,disableGrid: true,// y轴网格线的颜色gridColor:'#ffffff',}

效果:

 

 案例效果源码:

//wxss
.chart {width: 700rpx;height: 600rpx;
}//wxml
<view><canvas canvas-id="linec" class="chart"> </canvas>
</view>//js
const wxCharts = require("../../../utils/wxcharts.js")let areaChart;
Page({LoadTu() {areaChart = new wxCharts({canvasId: 'linec', type: 'line',categories: this.data.chartDatas.day7,animation: true,yAxisSplit:2,series: [{name: '洗涤费',// 线条的颜色color: '#FF8A06',data: this.data.chartDatas.money7,format: function (val) {return val.toFixed(1) + '';}}],dataPointShape: true,xAxis: {fontColor: '#7D7D7F',// 不显示x轴 刻度点disableGrid: true,},yAxis: {min:-2.0,disableGrid: true,// y轴网格线的颜色gridColor:'#ffffff',// y轴文字颜色,display:true不显示fontColor: '#FF8A06',// 不显示y轴 刻度文字disabled: true,axisLine:{show:false}},// 非通用配置extra: {legendTextColor: '#c427b1',lineWidth: 10,// 线条形状:curve 圆滑// lineStyle: 'curve'},// dataPointShape:false,legend: false,width: 320, height: 200,});return this;},data: {menus: [],ordermsg: {},swiper_h: 0,chartDatas: {money7: [6.4, 0, 0, 0, 18.71, 5.6, 0],day7: ["13日", "14日", "15日", "16日", "17日", "18日", "19日"]}},onLoad: function (options) {this.LoadTu()}
});


http://www.ppmy.cn/news/972869.html

相关文章

godot引擎c++源码深度解析系列一

许久没有使用c开发过项目了&#xff0c;如果按照此时单位的入职要求&#xff0c;必须拥有项目经验的话&#xff0c;那我就得回到十多年前&#xff0c;大学的时代&#xff0c;哪个时候真好&#xff0c;电脑没有这么普及&#xff0c;手机没有这么智能&#xff0c;网络没有这么发达…

去括号问题(C++处理)

继http://t.csdn.cn/kIcUT后的文章 题目描述 当老师不容易&#xff0c;尤其是当小学的老师更难:现在的小朋友做作业喜欢滥用括号。 虽然不影响计算结果&#xff0c;但不够美观&#xff0c;容易出错&#xff0c;而且可读性差。但又不能一棒子打死&#xff0c;也许他们就是将来的…

使用ChatGPT增强测试技能:让你的生产力提升到另一个层次

hatGPT拥有源源不断的机遇&#xff0c;能够帮助提升测试人员的测试能力, 从复杂的需求评审设计到运用自动化技巧的用例设计&#xff0c;再到web界面和接口测试的边界值检查等等。 需求评审 需求评审&#xff08;Requirements review&#xff09;是测试过程中必不可少的一环。它…

django groupby踩坑

django groupby踩坑 前言坑 ~~参考~~ 前言 django的orm作为简单查询 使用简直是太爽了&#xff0c;所见即所得,但是groupby时候缺有一些坑点 坑 from django.db.models import Count from w.models import www # 在不加order by的时候 会默认按照id分组 print(TaskPort.obje…

RocketMQ教程-(4)-领域模型概述

Apache RocketMQ 是一款典型的分布式架构下的中间件产品&#xff0c;使用异步通信方式和发布订阅的消息传输模型。通信方式和传输模型的具体说明&#xff0c;请参见下文通信方式介绍和消息传输模型介绍。 Apache RocketMQ 产品具备异步通信的优势&#xff0c;系统拓扑简单、上下…

java List使用Map泛型和使用自定义泛型

1 Map 泛型 // 创建一个 List&#xff0c;用于存储多个 Map List<Map<String, Object>> dataList new ArrayList<>(); 1.1打印出来 [{date2023-07-21, title公告}, {date2023-07-21, title公告}, {date2023-07-21, title公告}, {date2023-07-21, title公…

绘出「星辰大海」:华为云Astro轻应用新手指南-第一章

第1章 旅程的开端 发现Astro轻应用地图 第1站&#xff1a;创建账户 首先&#xff0c;你需要在华为云Astro官网注册专属账号。若已有华为账户&#xff0c;可直接登录。 在官网点击「立即使用」&#xff0c;即可跳转至「登录界面」 在「登录界面」点击「注册」&#xff0c;注册…

2023中国费控报销领域最具商业合作价值企业盘点

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 在企业的日常运营中&#xff0c;控制费用是非常重要的一项任务。一个高效且经济稳健的企业&#xff0c;必然需要严格掌控各项支出。其中&#xff0c;报销费控更是企业控制费用的重要手段。 根据灼识咨询发布的白皮书&#x…