当前位置:   article > 正文

wx-charts 小程序 饼图 pie显示不全问题_wxcharts pie

wxcharts pie

问题:

一开始按网上的配置饼图 ,只显示了一半

源码: 

  1. //js
  2. import wxCharts from '../../utils/wxcharts-min.js'
  3. let chart = new wxCharts({
  4. animation: true,
  5. canvasId: 'pieCanvas',
  6. type: 'pie',
  7. series: [{
  8. name: '成交量1',
  9. data: 15,
  10. }, {
  11. name: '成交量2',
  12. data: 35,
  13. }, {
  14. name: '成交量3',
  15. data: 78,
  16. }],
  17. width: 300,
  18. height: 300,
  19. })
  20. //wxml
  21. <canvas canvas-id="pieCanvas" disable-scroll="true" class="pieCanvas" style="width:300px; height:300px;"></canvas>
  22. //wxss
  23. //

解决:

 wxml

  1. <view class="outer">
  2. <canvas canvas-id="piecav" disable-scroll="true" class="cav"></canvas>
  3. </view>

cav是设置画布的大小的。 被遮挡的原因就是一开始使用了默认的大小:300px * 150 px

js

  1. import wxCharts from '../../utils/wxcharts-min.js'
  2. Page({
  3. data: {},
  4. initChart() {
  5. let windowWidth = 375;
  6. try {
  7. let res = wx.getSystemInfoSync();
  8. windowWidth = res.windowWidth;
  9. } catch (e) {}
  10. new wxCharts({
  11. animation: true,
  12. canvasId: 'piecav',
  13. type: "pie",
  14. series: [
  15. {name: "在途中", data: 81},
  16. {name: "在公司", data: 101},
  17. {name: "在洗涤厂", data: 99},
  18. ],
  19. width: 300, //px ,宽高必须要设置
  20. height: 300,
  21. dataLabel:true
  22. })
  23. },
  24. onLoad: function (options) {
  25. this.initChart();
  26. }
  27. });

new wxCharts这里宽高设置是饼图的饼的大小。真正的数据图形的大小。 

 wxss

  1. .cav{
  2. width: 100%;
  3. height: 540px;
  4. background-color: antiquewhite;
  5. }

那这些把画布放大,那么饼就显示完全了。

     一开始折腾了很久,是微信开发者工具模拟器更新有问题,要么更新不,要么模拟器卡死掉。必须得重启开发者工具。 

重启,重启

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/526502
推荐阅读
相关标签
  

闽ICP备14008679号