在父级页面结构
<carrier-chart ref="carrieChart" :dataPie="dataPie" :totalPie="totalPie" />
import carrierChart from './carrier-chart'
export default {
name: 'dashboard-console',
components: {
carrierChart,
},
}
//data里面的数据
dataPie:[],
totalPie:0,
在父级页面调用子页面方法
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() //承运商类别占比(调用子页面方法)
})
}
})
子页面结构
<template>
<Row :gutter="24">
<Col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
<div ref="carrieChart" v-height="400"></div>
</Col>
</Row>
</template>
子页面的方法
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} <br/>{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
}
]
})
},
子页面全部代码
<template>
<Row :gutter="24">
<Col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
<div ref="carrieChart" v-height="400"></div>
</Col>
</Row>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts';
export default {
props: {
dataPie: {
type: Array,
default: function () {
return []
}
},
totalPie: {
type: Number,
default: 0
}
},
methods: {
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} <br/>{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
}
]
})
},
handleResize() {
this.carrieChart.resize()
}
},
mounted() {
this.handleSetCarrierChart()
},
beforeDestroy() {
if (this.carrieChart) {
this.carrieChart.dispose()
this.carrieChart = null
}
}
}
</script>
<style lang="less">
.dashboard-console-visit {
ul {
li {
list-style-type: none;
margin-top: 12px;
}
}
}
</style>
网友评论