uniapp 绘制环形图
效果图：
vue页面
<template>
<view>
<canvas style="width: 350px; height: 300px;" canvas-id="homeownerCanvas" class="homeowner-canvas_charts"></canvas>
</view>
</template>
<script>
// 引入外部 js
import canvas from '@/static/canvas.js'
export default {
data() {
return {
}
},
onReady() {
let data = [{
"money": 50 + '万',
"value": 0.5,
"color": "#afb4db",
"title": "口红"
},
{
"money": 20 + '万',
"value": 0.2,
"color": "#ffce7b",
"title": "眼影"
},
{
"money": 10 + '万',
"value": 0.1,
"color": "#f8aba6",
"title": "粉底"
},
{
"money": 20 + '万',
"value": 0.2,
"color": "#afdfe4",
"title": "眉笔"
}
];
// 调用外部方法并传入参数
canvas.canvasGraph('homeownerCanvas', data, 100)
},
methods: {
}
}
</script>
<style>
</style>
图表封装 canvas.js
// 图表封装
export default {
canvasGraph(canvasID, data, summation) {
function PieChart(ctx, radius) {
//定义起始角度
let tempAngle = 0;
//定圆心位置
let x0 = 182, y0 = 150; //伸出长度
let outLine = 18;
PieChart.prototype.init = function(data) {
this.drawPie(data);
};
// 绘画扇形 及中心圆
PieChart.prototype.drawPie = function(data) {
for (let i = 0; i < data.length; i++) {
// 开始一个新路径
ctx.beginPath();
// 移动到中心点
ctx.moveTo(x0, y0);
//计算当前扇形角度 所占比例*360
let angle = data[i].value * 360;
//当前扇形起始绘制弧度 360 = 2π 等于6.28
let startAngle = tempAngle * Math.PI / 180;
//当前扇形借结束绘制弧度
let endAngle = (tempAngle + angle) * Math.PI / 180;
//绘制扇形 x y中心 半径 开始弧度 结束弧度
ctx.arc(x0, y0, radius, startAngle, endAngle);
//填充扇形
ctx.fillStyle = data[i].color;
// 填充
ctx.fill();
// 调用添加标题解释方法
this.drawTitle(startAngle, angle, data[i].color, data[i].title + data[i].money)
//当前扇形结束绘制角度，即下一个扇形开始绘制角度
tempAngle += angle;
}
// 开始一个新路径
ctx.beginPath();
// 开始画圆
ctx.arc(x0, y0, 65, 0, 2 * Math.PI)
// 填充颜色 白色
ctx.setFillStyle('white')
// 调用绘制中心圆文字方法
this.drawCenterTitle()
}
// 伸出线条方法
PieChart.prototype.drawTitle = function(startAngle, angle, color, title) {
// 伸出去的长度 斜边长度 等于半径加上定义好的长度
let out = radius;
// 当前弧度的二分之一
let du = startAngle + (angle / 2) * Math.PI / 180;
// 计算伸出的点x坐标
let outX = x0 + out * Math.cos(du);
// 计算伸出的点y坐标
let outY = y0 + out * Math.sin(du);
// 开始一个新路径
ctx.beginPath();
// 移动到中心点
ctx.moveTo(x0, y0);
// 画出点到伸出点的一条线
ctx.lineTo(outX, outY);
// 线条颜色
ctx.strokeStyle = color;
//设置标题
ctx.font = 'bold 14px Microsoft Yahei';
// 计算出标题文字宽度
let textWidth = ctx.measureText(title).width;
// 计算标题样式
ctx.textBaseline = "bottom";
// 象限判断
let optionArr = [{
quadrant: outX >= x0 && outY <= y0,
symbol: ['+', '-', 'left']
},
{
quadrant: outX < x0 && outY <= y0,
symbol: ['-', '-', 'right']
},
{
quadrant: outX < x0 && outY > y0,
symbol: ['-', '+', 'right']
},
{
quadrant: outX >= x0 && outY > y0,
symbol: ['+', '+', 'left']
}
]
// 渲染的配置项
let {symbol} = optionArr.find(el => el.quadrant && el.symbol)
// 斜线起始点
let slashState = eval(outX + symbol[0] + outLine)
// 横线起始点
let lineState = eval(outX + symbol[0] + textWidth + symbol[0] + outLine)
// 终点
let lineEnd = eval(outY + symbol[1] + outLine)
// 标题文字样式
ctx.textAlign = symbol[2];
// 画出伸出的斜线
ctx.lineTo(slashState, lineEnd);
// 接上斜线画出标题下面的直线
ctx.lineTo(lineState, lineEnd);
// 填充标题
ctx.fillText(title, slashState, lineEnd);
// 填充
ctx.stroke();
}
// 绘制中心文字
PieChart.prototype.drawCenterTitle = function() {
// 填充
ctx.fill();
// 文字大小
ctx.setFontSize(24)
// 文字颜色
ctx.fillStyle = "#333333"
// 文字位置
ctx.setTextAlign('center')
// 插入文字
ctx.fillText(`${summation}万`, x0, y0 + 5)
// 文字大小
ctx.setFontSize(14)
// 合计字体样式
ctx.font = '14px Microsoft Yahei';
// 文字颜色
ctx.fillStyle = "#999999"
// 插入文字
ctx.fillText('合计(元)', x0, y0 + 30)
// 开始画图
ctx.draw()
}
}
var ctx = uni.createCanvasContext(canvasID)
var PieChart = new PieChart(ctx, 90)
PieChart.init(data)
}
}
代码出处：https://www.cnblogs.com/gongliying/p/11461508.html#top
使用 v-for 动态渲染 canvas 的时候要注意，先等待canvas组件渲染完成，再调用方法进行绘画，否则只有空白页面。
<template>
<view>
<block v-for="(item,index) in dataList" :key="index">
<view style="margin: 50rpx;">{{item.subjectContent}}</view>
<canvas :canvas-id="'id'+index" class="homeowner-canvas_charts" style="width: 350px; height: 300px;" ></canvas>
</block>
</view>
</template>
<script>
// 引入外部 js
import canvas from '@/static/canvas.js'
export default {
data() {
return {
baseUrl: '',
dataList: []
}
},
onReady() {
// 获取全局变量 baseUrl
this.baseUrl = getApp().globalData.baseUrl;
// 调用方法
this.getData()
},
methods: {
//从后端获取数据
getData() {
uni.request({
url: this.baseUrl + 'queryByGroup',
method: "GET",
data: {},
success: (res) => {
//console.log(res)
let arr = res.data
this.dataList = arr
uni.showToast({
title: '数据加载中...', //显示的文字
duration: 1000, //显示多少时间，默认1500毫秒
icon: "loading" //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
})
// 延迟1秒等待canvas组件渲染完成，再调用方法绘画，否则绘画不成功
setTimeout(function(){
for (let x in arr) {
// 调用外部方法并传入参数：canvas-id，数组，总数量
canvas.canvasGraph('id'+x, arr[x].list, arr[x].list[0].total)
}
},1000)
},
fail: (err) => {
uni.showToast({
title: "网络请求失败!",
icon: 'none',
duration: 2000
})
}
})
}
}
}
</script>
<style>
</style>
效果图
后端返回的数据格式
