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()
  }
});
相关推荐
Flynt35 分钟前
我把热榜那篇"禁用 axios"逐条实测了一遍:结论大体对,坑在它没讲的地方
前端·javascript·axios
Csvn1 小时前
bundle优化
前端
北冥有鱼2 小时前
发版后动态路由点击报 `Failed to fetch dynamically imported module`」问题上的完整排查与修复过程
前端·vue.js
静默回滚2 小时前
视频压到 25 MB 以内,码率要算、音轨要扣、余量要留
前端
用户37203749260182 小时前
把 10MB 中文语义模型塞进浏览器:STSB 做到教师模型的 93%,但线上 top1 只有 42%
前端
光锥智能2 小时前
海康机器人举行2026移动机器人新品发布会:箱式存拣升级,「明智」系列发布
java·前端·机器人
计算机魔术师2 小时前
Anthropic 上市文件最吓人的一幕,不是亏损 807 亿
前端
alsmile2 小时前
AI友好的可视化图形引擎自我革命:Meta2d.js 2.0 历时一年全新重写,性能与多人协作全面升级
前端·开源·数据可视化
行思理2 小时前
Nginx 跨站请求(CORS)配置完全指南:从原理到生产实践
java·前端·nginx
粥里有勺糖2 小时前
视野修炼-技术周刊第137期 | 编程已经面目全非
前端·github·ai编程