收藏
回答

skyline 渲染 wxCharts 为什么不显示图表?

为什么我引用wxCharts以后skyline不显图表,切换webview就可以显示了

// pages/Charts/Charts.js
const wxCharts = require("../../utils/wxcharts.js")
Page({


  /**
   * 页面的初始数据
   */
  data: {
    chartDatas: {
      money7: [6.400018.715.60],
      day7: ["13日""14日""15日""16日""17日""18日""19日"]
    }
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    new wxCharts({
      canvasId: 'linec', type: 'line',
      categories: this.data.chartDatas.day7,
      animation: true,
      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: {
        // y轴文字颜色,display:true不显示
        fontColor: '#FF8A06',
        // 不显示y轴
        disabled: true
      },
      // 非通用配置
      extra: {
        legendTextColor: '#c427b1',
        lineWidth: 10,
        // 线条形状:curve 圆滑
        lineStyle: 'curve'
      },
      // dataPointShape:false,
      legend: false,
      width: 400, height: 300,
    });
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {


  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {


  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {


  },


  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {


  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {


  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {


  },


  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {


  }
})



.chart{
  height: 600rpx;
  width: 700rpx;
}


<!--pages/Charts/Charts.wxml-->
<view>
  <canvas canvas-id="linec" class="chart"></canvas>
</view>


最后一次编辑于  2023-11-10
回答关注问题邀请回答
收藏

3 个回答

  • 黄思程
    黄思程
    2023-11-13

    应该是 wxcharts 的兼容有问题,wxcharts 的地址可以发一下

    2023-11-13
    有用
    回复 10
    查看更多(5)
  • Junan
    Junan
    04-07

    我给echarts-for-weixin提了个PR,兼容了skyline模式,可以参考下,https://github.com/ecomfe/echarts-for-weixin/pull/937

    如果有人用uniapp,可以试下我封装的插件:https://ext.dcloud.net.cn/plugin?id=15140


    04-07
    有用 1
    回复
  • 不甘平凡的咸鱼
    不甘平凡的咸鱼
    2023-11-15
    // pages/ceshi/ceshi.js
    import * as echarts from '../../ec-canvas/echarts';
    function getOption() {
      return {
        grid: {
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type'category',
          boundaryGap: false,
          data: ['周一''周二''周三''周四''周五''周六''周日'],
          // show: false
        },
        yAxis: {
          x: 'center',
          type'value',
          splitLine: {
            lineStyle: {
              type'dashed'
            }
          }
          // show: false
        },
        series: [{
          name: 'A',
          type'line',
          smooth: true,
          data: [18366530784033]
        }]
      };
    }
    Page({
    
    
      /**
       * 页面的初始数据
       */
      data: {
        ec: {
          onInit: function (canvas, width, height, dpr{
            const barChart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr // new
            });
            canvas.setChart(barChart);
            barChart.setOption(getOption());
    
    
            return barChart;
          }
        }
      }
    })
    
    2023-11-15
    有用
    回复
登录 后发表内容