You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
4.6 KiB
177 lines
4.6 KiB
<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: '300px' |
|
}, |
|
deptLg:{ |
|
type: Array, |
|
default: [] |
|
}, |
|
deptData:{ |
|
type: Array, |
|
default: [] |
|
}, |
|
otTitle: { |
|
type: String, |
|
default: '' |
|
}, |
|
|
|
|
|
}, |
|
data() { |
|
return { |
|
chart: null, |
|
data:[] |
|
} |
|
}, |
|
watch: { |
|
deptData (newV, oldV) { |
|
this.initChart() |
|
} |
|
}, |
|
mounted() { |
|
this.$nextTick(() => { |
|
this.initChart() |
|
}) |
|
}, |
|
beforeDestroy() { |
|
if (!this.chart) { |
|
return |
|
} |
|
this.chart.dispose(); |
|
this.chart = null |
|
}, |
|
methods: { |
|
initChart() { |
|
// this.data=[] |
|
// this.deptData.forEach(item=>{ |
|
// let obj=item.name; |
|
// let item2={} |
|
// item2.name=obj.value; |
|
// item2.value=item.value; |
|
// this.data.push(item2) |
|
// }) |
|
this.chart = echarts.init(this.$el, 'macarons'); |
|
if(!this.deptData.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; |
|
this.chart.setOption({ |
|
|
|
|
|
title: { |
|
text: this.otTitle+"联系部门分布", |
|
x:'center', |
|
y: 'bottom', |
|
left: "1%", |
|
top: "1%", |
|
textStyle: { |
|
fontSize: 24, |
|
fontFamily: "Arial", |
|
lineHeight: 30, |
|
color: "rgb(43,97,159)", |
|
fontWeight:"bold" |
|
}, |
|
}, |
|
|
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
}, |
|
// legend: { |
|
// left: 'center', |
|
// bottom: '10', |
|
// data:this.deptLg, |
|
// // data: ['院士建议', '咨询研究报告', '中央交办', '部委委托', '地方委托','主动报送', '申请', '委托', '交办', '合作'] |
|
// }, |
|
series: [ |
|
{ |
|
name: '项目分布', |
|
type: 'pie', |
|
roseType: 'radius', |
|
radius: [15, 95], |
|
center: ['50%', '55%'], |
|
data:this.deptData, |
|
// 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: '合作' } |
|
// ], |
|
animationEasing: 'cubicInOut', |
|
animationDuration: 2600 |
|
} |
|
] |
|
}); |
|
|
|
// this.chart.on("click",function (params) { |
|
// // alert(params.name) |
|
// 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) |
|
// }); |
|
} |
|
} |
|
} |
|
</script>
|
|
|