赞
踩
一开始按网上的配置饼图 ,只显示了一半
源码:
- //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
-
- //无
![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)
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();
- }
- });
![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)
new wxCharts这里宽高设置是饼图的饼的大小。真正的数据图形的大小。
wxss
- .cav{
- width: 100%;
- height: 540px;
- background-color: antiquewhite;
- }
那这些把画布放大,那么饼就显示完全了。
一开始折腾了很久,是微信开发者工具模拟器更新有问题,要么更新不,要么模拟器卡死掉。必须得重启开发者工具。
重启,重启
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。