|
|
|
|
<template>
|
|
|
|
|
<div :class="className" :style="{height:height,width:width}" />
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import echarts from 'echarts'
|
|
|
|
|
require('echarts/theme/macarons'); // echarts theme
|
|
|
|
|
import resize from './mixins/resize'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
mixins: [resize],
|
|
|
|
|
props: {
|
|
|
|
|
className: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: 'chart'
|
|
|
|
|
},
|
|
|
|
|
width: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '100%'
|
|
|
|
|
},
|
|
|
|
|
height: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '330px'
|
|
|
|
|
},
|
|
|
|
|
pieLegend:{
|
|
|
|
|
type: Array,
|
|
|
|
|
default: []
|
|
|
|
|
},
|
|
|
|
|
pieData:{
|
|
|
|
|
type: Array,
|
|
|
|
|
default: []
|
|
|
|
|
},
|
|
|
|
|
otTitle: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: ''
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
chart: null,
|
|
|
|
|
data: [
|
|
|
|
|
// { value: 320, name: '院士建议' },
|
|
|
|
|
// { value: 240, name: '咨询研究报告' },
|
|
|
|
|
// { value: 149, name: '中央交办' },
|
|
|
|
|
// { value: 100, name: '部委委托' },
|
|
|
|
|
// { value: 59, name: '地方委托' },
|
|
|
|
|
// { value: 123, name: '主动报送' },
|
|
|
|
|
// { value: 220, name: '申请' },
|
|
|
|
|
// { value: 56, name: '委托' },
|
|
|
|
|
// { value: 67, name: '交办' },
|
|
|
|
|
// { value: 78, name: '合作' }
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
pieData (newV, oldV) {
|
|
|
|
|
this.initChart()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.initChart()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
if (!this.chart) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.chart.dispose();
|
|
|
|
|
this.chart = null
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
initChart() {
|
|
|
|
|
|
|
|
|
|
this.chart = echarts.init(this.$el, 'macarons');
|
|
|
|
|
if(!this.pieData.length){
|
|
|
|
|
var html =
|
|
|
|
|
'<div style="text-align:center;"><div style="line-height:260px;color:#868686; font-size: 26px;">暂无数据</div>' +
|
|
|
|
|
'<h3 style="color: #74bcff; font-size: 18px;">'+this.otTitle+'联系部门分布</h3></div>';
|
|
|
|
|
this.$el.innerHTML = html;
|
|
|
|
|
this.$el.removeAttribute('_echarts_instance_')
|
|
|
|
|
}
|
|
|
|
|
const _this = this;
|
|
|
|
|
|
|
|
|
|
// console.log(this.pieData);
|
|
|
|
|
// this.data=[]
|
|
|
|
|
// this.pieData.forEach(item=>{
|
|
|
|
|
// let obj=item.name;
|
|
|
|
|
// let item2={}
|
|
|
|
|
// item2.name=obj.value;
|
|
|
|
|
// item2.value=item.value;
|
|
|
|
|
// this.data.push(item2)
|
|
|
|
|
// })
|
|
|
|
|
this.setStyle()
|
|
|
|
|
this.chart.setOption({
|
|
|
|
|
title: {
|
|
|
|
|
text: this.otTitle+"联系部门分布",
|
|
|
|
|
x:'center',
|
|
|
|
|
y: 'bottom',
|
|
|
|
|
left: "1%",
|
|
|
|
|
top: "1%",
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 22,
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
lineHeight: 30,
|
|
|
|
|
color: "#116bcc",
|
|
|
|
|
fontWeight:"bold"
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
top:90,
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize:'18',
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: -20,
|
|
|
|
|
// right: -20,
|
|
|
|
|
bottom: 50,
|
|
|
|
|
top: 150,
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
// legend: {
|
|
|
|
|
// left: 'center',
|
|
|
|
|
// bottom: '10',
|
|
|
|
|
// data:this.pieLegend,
|
|
|
|
|
// // data: ['院士建议', '咨询研究报告', '中央交办', '部委委托', '地方委托','主动报送', '申请', '委托', '交办', '合作']
|
|
|
|
|
// },
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
name: '项目分布',
|
|
|
|
|
type: 'pie',
|
|
|
|
|
// roseType: 'radius',
|
|
|
|
|
// radius: '55%',
|
|
|
|
|
radius: ['30%', '50%'], //饼形图改成中空的
|
|
|
|
|
center: ['55%', '48%'],
|
|
|
|
|
data:this.pieData,
|
|
|
|
|
// top: "50%"
|
|
|
|
|
labelLine: { //饼形图引导线颜色
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#ccc'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
formatter: function (param) {
|
|
|
|
|
let text = param.data.name;
|
|
|
|
|
if (text.length < 6) {
|
|
|
|
|
// return '{name|{b}}\n{value|{d}%( {c})}'
|
|
|
|
|
return text
|
|
|
|
|
} else {
|
|
|
|
|
return text.substring(0, 6) + '...'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
// // backgroundColor: "rgba(255, 255, 255, 1)",
|
|
|
|
|
//
|
|
|
|
|
// },
|
|
|
|
|
// animationEasing: 'cubicInOut',
|
|
|
|
|
// animationDuration: 2600,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.chart.on("click",function (params) {
|
|
|
|
|
const deptName = params.name;
|
|
|
|
|
let departmentId = "";
|
|
|
|
|
if(deptName){
|
|
|
|
|
switch (deptName) {
|
|
|
|
|
case "机械与运载工程学部":
|
|
|
|
|
departmentId = "25";
|
|
|
|
|
break;
|
|
|
|
|
case "信息与电子工程学部":
|
|
|
|
|
departmentId = "26";
|
|
|
|
|
break;
|
|
|
|
|
case "化工、冶金与材料工程学部":
|
|
|
|
|
departmentId = "27";
|
|
|
|
|
break;
|
|
|
|
|
case "能源与矿业工程学部":
|
|
|
|
|
departmentId = "28";
|
|
|
|
|
break;
|
|
|
|
|
case "土木、水利与建筑工程学部":
|
|
|
|
|
departmentId = "29";
|
|
|
|
|
break;
|
|
|
|
|
case "环境与轻纺工程学部":
|
|
|
|
|
departmentId = "30";
|
|
|
|
|
break;
|
|
|
|
|
case "农业学部":
|
|
|
|
|
departmentId = "31";
|
|
|
|
|
break;
|
|
|
|
|
case "医药卫生学部":
|
|
|
|
|
departmentId = "32";
|
|
|
|
|
break;
|
|
|
|
|
case "工程管理学部":
|
|
|
|
|
departmentId = "33";
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_this.$emit('deptToPage', departmentId)
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
setStyle(){
|
|
|
|
|
// for (var i=0;i<this.pieData.length;i++){
|
|
|
|
|
// let itemStyle = "";
|
|
|
|
|
// switch (i) {
|
|
|
|
|
// case 0:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
// //这里是重点
|
|
|
|
|
// color: 'rgb(90,131,255)'
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// case 1:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
//
|
|
|
|
|
// color: 'rgb(89,98,255)'
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// case 2:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
// //这里是重点
|
|
|
|
|
// color: 'rgb(44,56,254)'
|
|
|
|
|
//
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// case 3:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
// //这里是重点
|
|
|
|
|
// color: 'rgb(0,0,255)'
|
|
|
|
|
//
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// case 4:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
// //这里是重点
|
|
|
|
|
// color: 'rgb(0,0,128)'
|
|
|
|
|
//
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// case 5:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
// //这里是重点
|
|
|
|
|
// color: 'rgb(255,199,0)'
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// case 6:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
// //这里是重点
|
|
|
|
|
// color: '#ffa200'
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// case 7:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
// //这里是重点
|
|
|
|
|
// color: '#ffa200'
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// case 8:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
// //这里是重点
|
|
|
|
|
// color: 'rgb(248,98,47)'
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// case 9:
|
|
|
|
|
// itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
|
// //这里是重点
|
|
|
|
|
// color: 'rgb(210,219,244)'
|
|
|
|
|
//
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// };
|
|
|
|
|
// break;
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// this.pieData[i].itemStyle=itemStyle;
|
|
|
|
|
// this.pieData[i].label={color:"#000"}
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
this.pieData.forEach(item=>{
|
|
|
|
|
const deptName = item.name;
|
|
|
|
|
let itemStyle = "";
|
|
|
|
|
if(deptName){
|
|
|
|
|
switch (deptName) {
|
|
|
|
|
case "机械与运载工程学部":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: 'rgb(89,98,255)'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
case "信息与电子工程学部":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: 'rgb(44,56,254)'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
case "化工、冶金与材料工程学部":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: 'rgb(255,199,0)'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
case "能源与矿业工程学部":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: 'rgb(248,98,47)'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
case "土木、水利与建筑工程学部":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: 'rgb(210,219,244)'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
case "环境与轻纺工程学部":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: 'rgb(0,0,128)'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
case "农业学部":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: '#ffa200'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
case "医药卫生学部":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: 'rgb(0,0,255)'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
case "工程管理学部":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: '#ffa200'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
case "中国工程院战略咨询中心":
|
|
|
|
|
itemStyle = {
|
|
|
|
|
normal: {
|
|
|
|
|
//这里是重点
|
|
|
|
|
color: 'rgb(90,131,255)'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
item.itemStyle=itemStyle;
|
|
|
|
|
item.label={color:"#000"}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
