小鱼儿心语：不要那么敏感，也不要那么心软，太敏感和太心软的人，肯定过得不快乐，别人随便的一句话，你都要胡思乱想一整天。敏感和心软都因为太在乎别人，活不出自我，太过考虑别人的感受，注定自己不好受。
这两天做可视化页面，有这样儿一个需求，其实很简单，先上图：
围绕中心点布局.png
需要注意：复制下来可能会有接口请求报错，请根据实际情况而定
页面展示代码：
产量分布
// pointImg是中心的背景图片
总产量
{{ centerName }}
吨
-
{{ item.name }}
js代码：
export default {
data() {
return {
circles: [
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(30deg) translateY(180px)',
},
// 图片旋转--文字也会跟着旋转，，所以需要把文字向相反的方向转回来
font: {
transform: 'rotate(-30deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(60deg) translateY(180px)',
},
font: {
transform: 'rotate(-60deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(90deg) translateY(180px)',
},
font: {
transform: 'rotate(-90deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(120deg) translateY(180px)',
},
font: {
transform: 'rotate(-120deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(150deg) translateY(180px)',
},
font: {
transform: 'rotate(-150deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(180deg) translateY(180px)',
},
font: {
transform: 'rotate(-180deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(210deg) translateY(180px)',
},
font: {
transform: 'rotate(-210deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(240deg) translateY(180px)',
},
font: {
transform: 'rotate(-240deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(270deg) translateY(180px)',
},
font: {
transform: 'rotate(-270deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(300deg) translateY(180px)',
},
font: {
transform: 'rotate(-300deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(330deg) translateY(180px)',
},
font: {
transform: 'rotate(-330deg)',
display: 'block',
},
},
{
name: '',
circleImg: {
backgroundImage: 'url(' + require('@/assets/img/yield.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
transform: 'rotateZ(360deg) translateY(180px)',
},
font: {
transform: 'rotate(-360deg)',
display: 'block',
},
},
],
centerName: '', //中心总产量数据
pointImg: { //中心展示的背景图片
backgroundImage: 'url(' + require('@/assets/img/yieldcenter.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
},
}
}，
mounted：{
// 产量分布----请求接口获取相关产量数据，根据实际情况而定
this.$http.post('/product/cs/mine', this.query).then((res) => {
res = res.data
this.centerName = res.data.csMine[res.data.csMine.length - 1].split(':')[1].split('吨')[0]
res.data.csMine.forEach((e, index) => {
if (this.circles[index]) {
this.circles[index].name = res.data.csMine[index]
}
})
this.circles.forEach((item) => {
item.name = item.name.replace('有限公司', '')
})
})
}
}
css代码：