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

如下图:项目需求不显示包括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()
  }
});
相关推荐
yqcoder1 小时前
Vue 的心脏:深度解析 Vue 2 vs Vue 3 响应式机制
前端·javascript·vue.js
东方小月1 小时前
Claude Code Skill 完全指南:一个 markdown 文件,就是一个专家分身
前端·后端
DianSan_ERP2 小时前
抖店订单接口中消费者信息加密解密机制与安全履约全解析
前端·网络·数据库·后端·安全·团队开发·运维开发
PBitW2 小时前
一个skill,让项目管理和写绩效变得简单!
前端·trae
Dxy12393102162 小时前
CSS中的filter属性详解
前端·css
Vincent_czr2 小时前
iOS中常常遇到后端返回JSON出现null值问题
前端
问心无愧05132 小时前
ctf show web入门90
前端·笔记
yingyima2 小时前
午夜惊魂:用 Shell 脚本和 Hey Cron 解决服务器定时报警
前端
青山Coding3 小时前
Cesium应用(五):通视分析,解锁三维场景的”无遮挡“视野
前端·cesium
JavaAgent架构师3 小时前
前端AI工程化(三):异步编程与并发控制
前端·人工智能