141 lines
3.5 KiB
Vue
141 lines
3.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', 'currentProvinceCode'],
|
||
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: ['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]
|
||
]
|
||
}
|
||
],
|
||
grid: {
|
||
left: '5%',
|
||
right: '25%', // 为右侧图例留出足够空间
|
||
top: '10%',
|
||
bottom: '10%',
|
||
containLabel: false
|
||
},
|
||
legend: this.currentProvinceCode === '530000' ? {
|
||
show: true,
|
||
orient: 'vertical',
|
||
top: 'center',
|
||
right: 10,
|
||
} : {
|
||
show: true,
|
||
orient: 'vertical',
|
||
top: 20,
|
||
right: 10,
|
||
width: 100, // 图例宽度（必需，否则滚动不生效）
|
||
height: 200, // 图例容器高度（像素，不能超过canvas高度263px）
|
||
type: 'scroll', // 启用滚动类型
|
||
pageButtonPosition: 'end', // 翻页按钮位置在底部
|
||
pageIconSize: 10, // 翻页按钮大小
|
||
pageIconColor: '#666', // 翻页按钮颜色
|
||
pageIconInactiveColor: '#ccc', // 翻页按钮不激活颜色
|
||
itemGap: 6, // 图例项之间的间距（减小以容纳更多项）
|
||
itemWidth: 18, // 图例标记的宽度
|
||
itemHeight: 10, // 图例标记的高度
|
||
textStyle: {
|
||
fontSize: 10, // 图例文字大小
|
||
lineHeight: 14 // 行高
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
},
|
||
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>
|