<template>
<div></div>
</template>
<script>
import * as d3 from 'd3';
export default {
mounted() {
let dataList = [30, 10, 43, 55, 13];
// 将源数据转换为可以生成饼图的数据(有起始角度(startAngle)和终止角度(endAngle))
let piedata = d3.pie()(dataList);
// 画布的参数
let mapWidth = 300;
let mapHeight = 300;
let mapPadding = 20
// 定义画布—— 宽 300 高 300 外边距 10px
let svgMap = d3.select("div").append('svg').attr("width", mapWidth).attr("height", mapHeight).style("margin", "10px")
//定义弧形生成器
let innerRadius = 0;//内半径,为0则中间没有空白
let outerRadius = mapWidth / 2 - mapPadding; //外半径
let arc_generator = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
// 创建分组
let groups = svgMap.selectAll("g")
.data(piedata)
.enter()
// 添加分组
.append("g")
.attr("transform", "translate(" + (mapWidth / 2) + "," + (mapHeight / 2) + ")")
// 绘制饼图——添加弧形路径
groups.append("path")
// 给路径填充不同的颜色
.attr("fill", function (d, i) {
//定义颜色比例尺,让不同的扇形呈现不同的颜色
let colorScale = d3.scaleOrdinal()
.domain(d3.range(piedata.length))
.range(d3.schemeCategory10);
return colorScale(i);
})
// 根据饼图数据,绘制弧形路径
.attr("d", function (d) {
return arc_generator(d); //调用弧生成器,得到路径值
})
// 添加文字
groups.append("text")
.attr("transform", function (d) {//位置设在中心处
return "translate(" + arc_generator.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function (d) {
return d.data;
})
},
}
</script>
<style scoped>
</style>
vue + d3.js(v6) 绘制【饼图】
猜你喜欢
转载自blog.csdn.net/weixin_41192489/article/details/112983261
今日推荐
周排行