赋值写在接口数据加载里面,避免数据加载不同步
获取接口,传参
页面数据数组:showPage:[]
legend格式化:
// 回调函数 实现标志图形字体后边加上百分比
formatter: function(name) {
let total = 0
let tarValue = 0
for (let i = 0; i < dt.length; i++) {
total += dt[i].value
if (dt[i].name === name) {
tarValue = dt[i].value
}
}
const p = (tarValue / total) * 100
return name + ' ' + tarValue + '人'
// return name + ' ' + tarValue + '人' + ' ' + p.toFixed(2) + '%'
}
获取数据,初始化图表
// 获取数据
getData() {
chartCount(this.queryParams).then(res => {
this.seriesData = res.data.organization
this.seriesData && this.seriesData.forEach((item, index) => {
if (item.typeName === '协作队伍') {
this.seriesData.splice(index, 1)
}
})
this.seriesData && this.seriesData.forEach((item, index) => {
this.seriesData[index] = JSON.parse(
JSON.stringify(item)
.replace(/statisCount/gi, 'value')
.replace(/typeName/gi, 'name')
)
})
if (this.seriesData.length > this.pageSize) {
this.pageCount = Math.ceil(this.seriesData.length / this.pageSize)
const list = (this.currentPage - 1) * this.pageSize
this.showPage = this.seriesData.slice(list, list + this.pageSize)
}else {
this.pageCount = 1
this.showPage = this.seriesData
}
//初始图表,传入参数
this.getOptions(this.showPage)
})
},
图标方法,传参,格式化legend
getOptions(dt) {
this.labourOption = {
// color:['#EB9AFF','#25A54F','#2CC6EA','#0263FF','#FB6E52','#8256E8','#FF7E00','#FFC655'],
tooltip: {
trigger: 'item',
formatter: '{b}: <br> {c}人 ({d}%)'// 模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。
},
legend: {
orient: 'vertical',
top: 5,
left: 15,
icon: 'rect',
itemWidth: 8,
itemHeight: 8,
// padding: [5, 0, 0, 0],
itemGap: 20,
textStyle: {
fontSize: 10,
color: '#ffffff',
rich: {
//这里定义a的样式
a: {
width: 100
}
}
},
// 回调函数 实现标志图形字体后边加上百分比
formatter: function(name) {
let total = 0
let tarValue = 0
for (let i = 0; i < dt.length; i++) {
total += dt[i].value
if (dt[i].name === name) {
tarValue = dt[i].value
}
}
const p = (tarValue / total) * 100
return name + ' ' + tarValue + '人'
// return name + ' ' + tarValue + '人' + ' ' + p.toFixed(2) + '%'
}
// data: []
},
series: [
{
/* top: -50,
right:-200,*/
type: 'pie',
radius: ['45%', '70%'],
// center: ['', ''],第一个值调整左右,第二个值调整上下
center: ['75%', '45%'],
avoidLabelOverlap: false,
itemStyle: { // 图形样式
normal: { // normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
label: {
show: true,
position: 'inner',
formatter: '{d}%',
distance: 0.7, // 这项是标识距离中心点的距离
textStyle: {
align: 'center',
baseline: 'middle',
fontFamily: '微软雅黑',
fontSize: '14px',
fontWeight: 'bold'
}
},
/* label: {
color: '#ffffff',
show : true,
formatter: '{b}: {c}%\n',
padding: [0, -57]
},*/
labelLine: {
show: false,
length: 10,
length2: 80,
lineStyle: {
color: '#ffffff'
}
}
/* label : { //饼图图形上的文本标签
show : true , //平常不显示
fontSize: '14px',
fontWeight: 'bold'
},
labelLine : { //标签的视觉引导线样式
show : false //平常不显示
}*/
}
/* emphasis : { //normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
label : { //饼图图形上的文本标签
show : true,
position : 'center',
textStyle : {
fontSize : '10',
fontWeight : 'bold'
}
}
}*/
},
data: dt
}
],
color: this.colorData
}
},