问题:
一开始按网上的配置饼图 ,只显示了一半
源码:
//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;
}
那这些把画布放大,那么饼就显示完全了。
一开始折腾了很久,是微信开发者工具模拟器更新有问题,要么更新不,要么模拟器卡死掉。必须得重启开发者工具。
重启,重启