饼图和柱状图：
<view class="chartView" style="margin-left: 50%;" v-show="">
<view style="text-align: center;font-size: 7px;">饼图</view>
<canvas canvas-id="canvasPie" id="canvasPie" class="charts"
:style="{'width':cWidth/1.5+'px','height':cHeight/1.8+'px','margin-left':-cWidth3*(pixelRatio-1)/4.5+'px'}"
disable-scroll=true @touchstart="touchMix" @touchmove="moveMix" @touchend="touchEndMix"></canvas>
</view>
</view>
showPie(canvasId, chartData) {
request.warnData({}).then((res) => {
canvasObj[canvasId] = new uCharts({
$this: _self,
canvasId: canvasId,
type: 'pie',
fontSize: 3,
legend: {
show: false,
},
background: '#FFFFFF',
pixelRatio: _self.pixelRatio,
series: [{
"name": "0",
"data": 50
}, {
"name": "1",
"data": 30
}, {
"name": "2",
"data": 20
}, {
"name": "3",
"data": 18
}, {
"name": "4",
"data": 18
}, {
"name": "5",
"data": 8
}],
animation: true,
width: _self.cWidth * _self.pixelRatio / 3.1,
height: _self.cHeight * _self.pixelRatio / 3,
dataLabel: true,
extra: {
pie: {
lableWidth: 5
},
},
});
});
},
showCloumn(canvasId, chartData) {
request.warnData({}).then((res) => {
res.data.data.xName.forEach((item, index) => {
res.data.data.xName[index] = item.substr(5) console.log(item)
});
console.log(res.data.data) canvasObj[canvasId] = new uCharts({
$this: _self,
canvasId: canvasId,
type: 'column',
fontSize: 4,
padding: [5, 5, 145, 15],
legend: {
show: false,
padding: 5,
lineHeight: 11,
margin: 5,
},
dataLabel: true,
dataPointShape: true,
background: '#FFFFFF',
pixelRatio: _self.pixelRatio,
categories: res.data.data.xName,
series: [{
"name": "1",
"data": [0, 1, 0, 0, 0, 0, 0],
"type": "area",
"color": '#aa00ff'
}],
animation: false,
xAxis: {
disableGrid: true,
type: 'grid',
labelCount: '7',
itemCount: '8',
scrollShow: true,
scrollAlign: 'left',
scrollShow: true,
boundaryGap: 'justify',
axisLine: true,
calibration: true,
},
yAxis: {
gridType: 'dash',
gridColor: '#CCCCCC',
dashLength: 4,
splitNumber: 5,
min: 0,
max: this.max,
format: (val) => {
return val.toFixed(0)
}, //如不写此方法，Y轴刻度默认保留两位小数 },
extra: {
lineStyle: 'straight'
},
width: _self.cWidth / 1.8,
height: _self.cHeight * _self.pixelRatio / 1.12,
dataLabel: true,
dataPointShape: true,
extra: {
lineStyle: 'straight'
},
});
});
},
touchPie(e) {
canvaPie.showToolTip(e, {
format: function(item) {
return item.name + ':' + item.data
}
});
},
