|
|
|
@ -58,7 +58,19 @@ |
|
|
|
></screen-echarts-frame> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"></el-col> |
|
|
|
<el-col :span="12" style="display:flex;align-items: center;"> |
|
|
|
|
|
|
|
<div class="legend"> |
|
|
|
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> |
|
|
|
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> |
|
|
|
<div class="content"> |
|
|
|
<div class="name">{{ item.name }}</div> |
|
|
|
<div class="num">{{ item.value }}</div> |
|
|
|
<div class="unit" :style="{ color: color[index] }">{{ item.value / 100 }}%</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
@ -173,7 +185,10 @@ export default { |
|
|
|
pieInitState: false, |
|
|
|
pieInitState2: false, |
|
|
|
pieOption: [], |
|
|
|
pieOption2: [] |
|
|
|
pieOption2: [], |
|
|
|
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], |
|
|
|
chartData: [], |
|
|
|
pieData: [] |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -291,14 +306,10 @@ export default { |
|
|
|
// let data = [...this.pieData]; |
|
|
|
// console.log('data', data); |
|
|
|
let chartData = { |
|
|
|
name: ['1', '2', '3', '4'], |
|
|
|
data: [ |
|
|
|
{ value: 23, id: '22', level: 'ddd', name: 'name' }, |
|
|
|
{ value: 23, id: '22', level: 'ddd', name: 'name' }, |
|
|
|
{ value: 23, id: '22', level: 'ddd', name: 'name' }, |
|
|
|
{ value: 23, id: '22', level: 'ddd', name: 'name' } |
|
|
|
] |
|
|
|
name: ['反骨', '反骨2', '反骨3', '反骨4'], |
|
|
|
data: [{ value: 62, name: '反骨' }, { value: 44, name: '反骨2' }, { value: 123, name: '反骨3' }, { value: 232, name: '反骨4' }] |
|
|
|
}; |
|
|
|
this.chartData = chartData; |
|
|
|
// chartData.name = data.map(item => item.agencyName); |
|
|
|
// chartData.data = data.map(item => { |
|
|
|
// return { value: item.count, id: item.agencyId, level: item.agencyLevel, name: item.agencyName }; |
|
|
|
@ -312,12 +323,7 @@ export default { |
|
|
|
// console.log('data', data); |
|
|
|
let chartData = { |
|
|
|
name: ['1', '2', '3', '4'], |
|
|
|
data: [ |
|
|
|
{ value: 23, id: '22', level: 'ddd', name: 'name' }, |
|
|
|
{ value: 23, id: '22', level: 'ddd', name: 'name' }, |
|
|
|
{ value: 23, id: '22', level: 'ddd', name: 'name' }, |
|
|
|
{ value: 23, id: '22', level: 'ddd', name: 'name' } |
|
|
|
] |
|
|
|
data: [{ value: 62, name: '1' }, { value: 243, name: '2' }] |
|
|
|
}; |
|
|
|
// chartData.name = data.map(item => item.agencyName); |
|
|
|
// chartData.data = data.map(item => { |
|
|
|
@ -331,35 +337,7 @@ export default { |
|
|
|
this.$refs.pieChart.clear(); |
|
|
|
// 获取pieChart配置 |
|
|
|
this.pieOption = { |
|
|
|
// legend: { |
|
|
|
// itemHeight: 14, |
|
|
|
// itemWidth: 14, |
|
|
|
// icon: 'rect', |
|
|
|
// orient: 'vertical', |
|
|
|
// top: 'center', |
|
|
|
// right: '5%', |
|
|
|
// textStyle: { |
|
|
|
// align: 'left', |
|
|
|
// color: '#', |
|
|
|
// verticalAlign: 'middle', |
|
|
|
// rich: { |
|
|
|
// name: { |
|
|
|
// width: 80, |
|
|
|
// fontSize: 16 |
|
|
|
// }, |
|
|
|
// value: { width: 20, align: 'right', fontFamily: 'Medium', fontSize: 16 }, |
|
|
|
// rate: { width: 10, align: 'right', fontSize: 16 } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// // data: datas, |
|
|
|
// formatter: name => { |
|
|
|
// // if (datas.length) { |
|
|
|
// // const item = datas.filter(item => item.name === name)[0]; |
|
|
|
// // return `{name|${name}}{value| ${item.value}} {rate| 宗}`; |
|
|
|
// // } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#FEB349', '#FE6252'], |
|
|
|
color: this.color, |
|
|
|
title: { |
|
|
|
text: '12345', |
|
|
|
subtext: '房屋总数(分)', |
|
|
|
@ -416,24 +394,18 @@ export default { |
|
|
|
tooltip: { |
|
|
|
show: true |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ value: 1048, name: 'Search Engine' }, |
|
|
|
{ value: 735, name: 'Direct' }, |
|
|
|
{ value: 580, name: 'Email' }, |
|
|
|
{ value: 484, name: 'Union Ads' }, |
|
|
|
{ value: 300, name: 'Video Ads' } |
|
|
|
] |
|
|
|
data: chartData.data |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
this.$refs.pieChart.setOption(this.pieOption); |
|
|
|
}, |
|
|
|
async iniPieChart2(chartData) { |
|
|
|
console.log('dddddddddddd'); |
|
|
|
this.$refs.pieChart2.clear(); |
|
|
|
// 获取pieChart配置 |
|
|
|
|
|
|
|
this.pieOption2 = { |
|
|
|
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#FEB349', '#FE6252'], |
|
|
|
color: this.color, |
|
|
|
title: { |
|
|
|
text: '12345', |
|
|
|
subtext: '房屋总数(分)', |
|
|
|
@ -463,13 +435,7 @@ export default { |
|
|
|
show: true |
|
|
|
}, |
|
|
|
z: 9999, |
|
|
|
data: [ |
|
|
|
{ value: 1048, name: 'Search Engine' }, |
|
|
|
{ value: 735, name: 'Direct' }, |
|
|
|
{ value: 580, name: 'Email' }, |
|
|
|
{ value: 484, name: 'Union Ads' }, |
|
|
|
{ value: 300, name: 'Video Ads' } |
|
|
|
] |
|
|
|
data: chartData.data |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
@ -590,13 +556,12 @@ export default { |
|
|
|
this.formData.orgId = obj.agencyId; |
|
|
|
this.formData.level = obj.level; |
|
|
|
}, |
|
|
|
deepTree(arr, child) { |
|
|
|
if (Array.isArray(arr) && arr.length > 0) { |
|
|
|
deepTree(arr) { |
|
|
|
if (Array.isArray(arr)) { |
|
|
|
return arr.map(item => { |
|
|
|
// if (child === 'subAgencyList') item.value = item.orgType + '-' + item.orgId |
|
|
|
return { |
|
|
|
...item, |
|
|
|
[child]: (item[child] && item[child].length > 0 && this.deepTree(item[child], child)) || null |
|
|
|
subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null |
|
|
|
}; |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -609,6 +574,37 @@ export default { |
|
|
|
@import '@/assets/scss/buttonstyle.scss'; |
|
|
|
@import '@/assets/scss/modules/management/list-main.scss'; |
|
|
|
@import '@/assets/scss/modules/shequzhili/event-info.scss'; |
|
|
|
.legend { |
|
|
|
display: flex;flex-flow:row wrap; |
|
|
|
.legend-row { |
|
|
|
width: 33.3%; |
|
|
|
display: flex; |
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
|
|
.kuai { |
|
|
|
width: 12px; |
|
|
|
height: 12px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
.content { |
|
|
|
.name { |
|
|
|
font-size: 14px; |
|
|
|
color: #999; |
|
|
|
|
|
|
|
} |
|
|
|
.num { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
.unit{ |
|
|
|
font-size: 16px; |
|
|
|
display: inline-block; |
|
|
|
margin-left: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.btnSearch { |
|
|
|
width: 100px; |
|
|
|
height: 36px; |
|
|
|
|