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

问题:

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

源码: 

//js
import wxCharts from '../../utils/wxcharts-min.js'

let chart = new wxCharts({
    animation: true,
    canvasId: 'pieCanvas',
    type: 'pie',
    series: [{
        name: '成交量1',
        data: 15,
    }, {
        name: '成交量2',
        data: 35,
    }, {
        name: '成交量3',
        data: 78,
    }],
    width: 300,
    height: 300,
})



//wxml
<canvas canvas-id="pieCanvas" disable-scroll="true" class="pieCanvas" style="width:300px; height:300px;"></canvas>

//wxss

//无

解决:

 wxml

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

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

js

import wxCharts from '../../utils/wxcharts-min.js'

Page({
    data: {},
    initChart() {
        let windowWidth = 375;
        try {
            let res = wx.getSystemInfoSync();
            windowWidth = res.windowWidth;
        } catch (e) {}
        new wxCharts({
            animation: true,
            canvasId: 'piecav',
            type: "pie",
            series: [
                {name: "在途中", data: 81},
                {name: "在公司", data: 101},
                {name: "在洗涤厂", data: 99},
            ],
            width: 300, //px ,宽高必须要设置
            height: 300,
            dataLabel:true
        })
    },
    onLoad: function (options) {
        this.initChart();
    }
});

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

 wxss

.cav{
    width: 100%;
    height: 540px;
    background-color: antiquewhite;
}

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

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

重启,重启

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: wx-charts是一款基于小程序开发的图表插件,它提供了丰富的图表样式和丰富的交互功能。通过阅读官方文档,我们可以深入了解这个插件的使用方法和相关API。 文档的结构清晰,以快速入门、基本配置、图表类型、图表属性、事件和回调等部分来组织内容。在快速入门部分,它提供了安装和使用wx-charts的基本步骤,方便开发者快速上手。 在基本配置部分,文档介绍了如何对图表进行基本配置,如设置图表的大小、颜色、背景等属性。它还介绍了如何使用数据来渲染图表,并通过示例代码展示了不同类型的图表的使用方法。 在图表类型部分,文档列举了各种图表类型,如折线图、柱状图、饼图等,每种图表类型都有详细的说明和示例代码,帮助开发者了解每种图表的特点和用途。 在图表属性部分,文档介绍了图表的各种属性和方法,如是否显示图例、是否显示标签、是否显示数值等。它还提供了一些常用的属性配置示例,帮助开发者根据自己的需求进行图表样式的定制。 此外,文档还介绍了图表的事件和回调函数,包括图表的点击事件、触摸事件等,开发者可以根据这些事件来实现一些交互功能,如点击图表某个数据点显示详细信息等。 总的来说,wx-charts官方文档提供了详细的使用方法和API说明,帮助开发者快速了解和使用这个图表插件。它的示例代码丰富,结构清晰,适合开发者学习和参考。通过阅读官方文档,开发者可以轻松使用wx-charts插件开发出各种图表功能丰富的小程序。 ### 回答2: 小程序wx-charts官方文档是一个指南,用于帮助开发人员了解如何在微信小程序中使用wx-charts这个图表库。该文档提供了详细的使用说明和示例代码,帮助开发人员快速上手。 文档首先介绍了wx-charts的基本概念和特点,包括它提供的各种图表类型和功能。然后,文档详细说明了如何引入wx-charts库以及相关的依赖项。开发人员可以按照文档中提供的步骤,下载安装wx-charts,并在小程序中进行配置。 随后,文档逐一介绍了每种图表类型的使用方法,包括折线图、柱状图、饼图等。每个图表类型都有相应的代码示例和参数说明,开发人员可以根据自己的需求进行定制。文档还提供了一些常见问题和解决方案,以帮助开发人员在使用过程中遇到困难时进行排查和解决。 此外,官方文档还介绍了一些高级功能和扩展,例如如何处理图表的交互事件以及如何自定义样式和主题。这些功能可以帮助开发人员根据自己的需求和设计要求,进一步优化和定制图表。 总而言之,小程序wx-charts官方文档提供了全面而详细的说明,帮助开发人员轻松上手并灵活使用这个图表库。它是一个宝贵的参考资源,为开发人员提供了极大的便利和效率。 ### 回答3: wx-charts是一款基于微信小程序平台的图表插件,它提供了丰富多样的图表类型和可定制的选项,使得开发者可以方便地在小程序中创建各种图表展示。 wx-charts官方文档详细介绍了插件的安装和使用方法。文档中首先介绍了如何通过npm安装wx-charts,并在小程序的app.json文件中进行配置。接着,文档详细介绍了插件提供的各种图表类型,包括折线图、柱状图、饼图、雷达图等等,并提供了每种图表类型的使用示例和参数说明。 在文档的使用教程部分,官方提供了一步一步的操作指引,帮助开发者快速上手。例如,文档详细介绍了如何创建一个折线图,包括如何引入wx-charts插件、在页面wxml中添加图表的Canvas容器、在页面js文件中初始化图表实例和设置图表的数据和样式等等。这些教程都以简洁明了的代码示例作为辅助,让开发者能够更好地理解和学习。 此外,官方文档还介绍了wx-charts插件的一些高级用法和特性,例如如何通过修改源码来自定义图表的样式、如何在图表中添加动画效果等等。这些高级用法可以帮助开发者更加灵活和自由地使用插件,满足不同的需求。 总的来说,wx-charts官方文档提供了全面、详细的插件介绍和使用指南,对于想要在微信小程序中使用图表展示的开发者来说,是一个非常有价值的参考资料。无论是初学者还是有一定经验的开发者,都可以通过阅读官方文档来学习和掌握wx-charts插件的使用方法和技巧。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值