在父级页面结构
在父级页面调用子页面方法
countGroupBylogisticsNamePie(pieCurrentCustomerId,countUnit){
let params={
countUnit:countUnit,
customerId:pieCurrentCustomerId
}
countGroupBylogisticsName(params).then((res)=>{
if (res.status !== 200) {
this.$Notice.error({
title: this.$t('public.title.failTitle'),
desc: res.message
})
} else {
this.dataPie=res.data.logisticsVOList.map(item=>{
let newJson= {}
newJson.name= item.logisticsName;
newJson.value= item.count;
return newJson
})
this.totalPie=res.data.totalCount
this.$nextTick(()=>{
this.$refs.carrieChart.handleSetCarrierChart() //承运商类别占比(调用子页面方法)
})
}
})
子页面结构
子页面的方法
handleSetCarrierChart() {
let datas=this.dataPie //获取数据
this.carrieChart = echarts.init(this.$refs.carrieChart)
this.carrieChart.setOption({
title: {
zlevel: 0,
text: this.totalPie>0?['{name|总单数}', '{value|' + this.totalPie + '}'].join('\n'):[],
top: '40%',
left: '30%',
textAlign: 'center',
textStyle: {
rich: {
value: {
color: '#303133',
fontSize: 24,
lineHeight: 24,
},
name: {
color: '#909399',
fontSize: 14,
lineHeight: 35,
},
},
},
},
tooltip: {// 悬停指示
trigger: 'item',
formatter: '{a}
{b}: {c}',
},
color: ['#8F61DD', '#599EF8', '#67C8CA', '#72C87C', '#F5D458','#E16C7D','#D16B10','#E56F74','#CAEFC7'],
legend: {
selectedMode: false, // 取消图例上的点击事件
type: "scroll",
orient: 'vertical', //垂直方向滚动
icon: "circle",
orient: "vertical",
left: "55%",
top: "25%",
bottom:"15%",
align: "left",
itemGap: 4,
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
symbolKeepAspect: false,
textStyle: {
rich: {
name: {
verticalAlign: "right",
align: "left",
width: 180,
height:30,
fontSize: 14,
},
value: {
align: "left",
width: 50,
fontSize: 14,
},
count: {
align: "left",
width: 20,
fontSize: 14,
},
upRate: {
align: "left",
fontSize: 14,
color: "#54bef9",
},
downRate: {
align: "left",
fontSize: 14,
color: "#54bef9",
},
},
},
data: datas.map((item) => item.name),
formatter: function (name) {
var total = 0;
var tarValue;
for (var i = 0; i < datas.length; i++) {
total += datas[i].value;
if (name == datas[i].name) {
tarValue = datas[i].value;
}
}
var p = Math.round((tarValue / total) * 100);
return ('{name| ' + name + ' -- ' + p +'%'+'} ' +'{value| ' +tarValue +'}')
},
},
series: [
{
name: "单量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: ["45%", "70%"],
center: ["30%", "50%"],
// 相当于权重
zlevel:1,
itemStyle: {
// 此配置
normal: {
borderWidth: 4,
borderColor: '#ffffff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
label: {
normal: {
padding: [20, 20, 20, 20],
backgroundColor: '#fff',
show: false,
position: 'center',
formatter: ['{name|{b}}', '{value|{c}}'].join('\n'),
rich: {
value: {
color: '#303133',
fontSize: 24,
lineHeight: 24,
},
name: {
color: '#909399',
fontSize: 14,
lineHeight: 35,
},
},
},
emphasis: {
show: true,
textStyle: {
fontSize: '16',
fontWeight: 'bold',
},
},
},
labelLine: {
normal: {
show: false,
},
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
data: datas
}
]
})
},
子页面全部代码