如下图:项目需求不显示包括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()}
});