116 lines
2.5 KiB
Vue
116 lines
2.5 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) {
|
|
console.log('传入的data', this.data);
|
|
|
|
return {
|
|
option: {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: '业态',
|
|
type: 'pie',
|
|
selectedMode: 'single',
|
|
radius: [0, '32%'],
|
|
center: ['40%', '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: ['40%', '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]
|
|
]
|
|
}
|
|
],
|
|
legend: {
|
|
show: true,
|
|
orient: 'vertical', // vertical | horizontal
|
|
right: 25, // left | center | right | 数值
|
|
bottom: 'center'
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
},
|
|
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>
|