效果:
6619704-7d487cd345ea687e.png
<script>
export default {
name: 'Index',
data () {
return {
option5: {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '飞猫盘VIP收入',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '53%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '28',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: []
}
]
},
}
},
}
</script>
// 随机生成颜色
handleColors () {
let color = ''
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
color = `rgb(${r},${g},${b})`
return color// 所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
},
datalist 为接口返回的数据列表
图片.png
let colorArr = []
datalist.forEach((item, index) => {
colorArr[index] = this.handleColors()
})
//赋值给图片的图例颜色数组
this.option5.color = colorArr
网友评论