146 lines
3.4 KiB
Vue
146 lines
3.4 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%'],
|
||
label: {
|
||
// position: 'inner',
|
||
formatter: '{b} \n {d}% ',
|
||
fontSize: 13,
|
||
color: '#D1D1D1',
|
||
// show: false,
|
||
},
|
||
startAngle: 15,
|
||
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'] :
|
||
['#f7f5f6', '#FFE7C0', '#ADE5EE','#C5CDF9','#e0e3f7', '#AFB7E6', '#F3B1C9' ],
|
||
|
||
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ','#6FEBC3', '#F4B27A',
|
||
// backgroundColor: '#F6F8FC',
|
||
// borderColor: '#8C8D8E',
|
||
// borderWidth: 1,
|
||
// borderRadius: 4,
|
||
|
||
// rich: {
|
||
// a: {
|
||
// color: '#6E7079',
|
||
// lineHeight: 22,
|
||
// align: 'center'
|
||
// },
|
||
// hr: {
|
||
// borderColor: '#8C8D8E',
|
||
// width: '100%',
|
||
// borderWidth: 1,
|
||
// height: 0
|
||
// },
|
||
// b: {
|
||
// color: '#4C5058',
|
||
// fontSize: 14,
|
||
// fontWeight: 'bold',
|
||
// lineHeight: 33
|
||
// },
|
||
// per: {
|
||
// color: '#fff',
|
||
// backgroundColor: '#4C5058',
|
||
// padding: [3, 4],
|
||
// borderRadius: 4
|
||
// }
|
||
// }
|
||
// },
|
||
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: 750rpx;
|
||
height: 526rpx;
|
||
margin-top: 40rpx;
|
||
display:block;
|
||
}
|
||
|
||
</style>
|