116 lines
2.3 KiB
Vue
116 lines
2.3 KiB
Vue
<template>
|
|
<uni-ec-canvas
|
|
class="uni-ec-canvas"
|
|
id="revenuecharts"
|
|
ref="revenuecharts"
|
|
canvas-id="revenuecharts"
|
|
:ec="ec"
|
|
@inited="inited"
|
|
></uni-ec-canvas>
|
|
</template>
|
|
|
|
<script>
|
|
import uniEcCanvas from './uni-ec-canvas/uni-ec-canvas.vue';
|
|
export default {
|
|
props:['data'],
|
|
components:{
|
|
uniEcCanvas
|
|
},
|
|
computed:{
|
|
ec(){
|
|
if(this.data){
|
|
return {
|
|
option:{
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: '业态',
|
|
type: 'pie',
|
|
selectedMode: 'single',
|
|
radius: [0, '32%'],
|
|
center: ['50%','50%'],
|
|
startAngle: 40,
|
|
label: {
|
|
// position: 'inner',
|
|
formatter: '{b} \n {d}% ',
|
|
fontSize: 13,
|
|
color: '#D1D1D1',
|
|
// show: false,
|
|
},
|
|
startAngle: 115,
|
|
labelLine: {
|
|
// show: false,
|
|
length: 62,
|
|
length2: 12,
|
|
smooth: true,
|
|
lineStyle:{
|
|
color: '#D1D1D1'
|
|
},
|
|
|
|
},
|
|
data: [
|
|
...this.data[0]
|
|
],
|
|
color:['#FEA427','#7786E3','#75B7AD','#9BC9F8','#FFAC37',]
|
|
},
|
|
{
|
|
name: '业态',
|
|
type: 'pie',
|
|
radius: ['48%', '72%'],
|
|
center: ['50%','50%'],
|
|
labelLine: {
|
|
length: 30,
|
|
},
|
|
label: {
|
|
show:false,
|
|
},
|
|
|
|
color: this.data[1].length> 7 ? ['#FFC3CD','#F4A4B2','#FE6582','#FFE7C0','#FEDA9D','#FEC057','#F9C8A0','#FAB176','#ffa25b','#E1C9F7','#CDA6F1',
|
|
'#E0E2F6','#C5CDF9','#9AA6EF','#D8ECEA','#8FE5B2','#70D599','#ADE5EE'] :
|
|
['#70D599', '#FFE7C0', '#ADE5EE','#C5CDF9','#e0e3f7', '#AFB7E6', '#F3B1C9' ],
|
|
|
|
data: [
|
|
...this.data[1]
|
|
]
|
|
}
|
|
]
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
inited(chart){
|
|
let _this =this
|
|
// console.log('图表初始化完毕')
|
|
// console.log('chart实例', this.ec)
|
|
|
|
chart.on('click',function(params){
|
|
if(params.componentIndex==0){
|
|
_this.$emit('selectCate',params.dataIndex+1)
|
|
}
|
|
// console.log(params)
|
|
})
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* page {
|
|
background-color: #fff;
|
|
} */
|
|
.uni-ec-canvas{
|
|
width: 690rpx;
|
|
height: 526rpx;
|
|
margin-top: 40rpx;
|
|
display:block;
|
|
}
|
|
|
|
</style>
|