<!--suppress ALL --> <template> <div id="age-pie" class="container"> <ve-ring :style='{"height": height,"width": width}' :width='width' :height='height' :judge-width="true" :data="chartData" :extend="extend" :settings="chartSettings" /> </div> </template> <script> import {white} from "chalk"; import { getAgeStatistics } from '@/api/ywts/shms/sq' export default { name: 'AgePie', data() { return { height: '0', width: '0', total: '', chartData: { columns: ['name', 'value'], rows: [ // {name: '7岁以下',value: 70 }, // {name: '8岁',value: 20 }, // {name: '9岁',value: 20 }, // {name: '10岁',value: 20 }, // {name: '11岁及以上',value: 20 } ] }, extend: { grid: { right: '30%' }, color: ['#6BCCFF','#ffa54a','#4ab228','#4AFFF7','#BAE7FF'], legend: { type: 'scroll', top: '0%', left: 'center', textStyle:{ color: white, fontWeight: 'bold', fontSize: 14 }, itemStyle: { borderRadius: 10, borderColor: '#B3F3F6', borderWidth: 1, borderType: 'dotted' }, }, series: { type: 'pie', radius: ['30%', '60%'], center: ['50%', '60%'], avoidLabelOverlap: false, label: { show: true, // color: '#0270b2', // fontSize: 14, // color: '#0270b2', // fontSize: 14, fontSize: 14, fontWeight: 'bold', position: 'outside', formatter: '{name|{b}}:{value|{c}}', distanceToLabelLine: 2, rich: {} }, itemStyle: { borderRadius: 5, borderColor: '#B3F3F6', borderWidth: 2, borderType: 'dotted' } }, tooltip: { trigger: 'item', formatter: '{b}<br/>人数:{c}人<br/>占比:{d}%' } }, title: { text: '' }, chartSettings: { label: { formatter: params => { return `${params.data.name}` } } // labelMap: { // 'name': '单位', // 'value': '用量' // }, // dimension: 'name', // metrics: 'value' }, myChart: null } }, // watch: { // query: { // handler: function() { // this.listQuery.buildingType = this.query.value // this.fetchData() // }, // deep: true // } // }, mounted() { // this.myChart = echarts.init(document.getElementById('age-pie')) this.height = document.getElementById('age-pie').clientHeight - 10 + 'px' this.width = document.getElementById('age-pie').clientWidth - 10 + 'px' // console.log(this.height, this.width) }, methods: { fetchData(id){ getAgeStatistics({id}).then(res => { console.log(res.data, '社区年龄') if(res.code === 200) { const data = res.data.value this.chartData.rows = data.map(item => { return { name: item.age, value: item.num } }) this.myChart.setOption(this.extend, true) } }) } } } </script> <style lang="scss" scoped> .container{ position:relative; width: 100%; height:100%; .round{ position: absolute; //z-index: 999999; left: 39%; top: 37.5%; width: 20%; height: 39.5%; } } .circle { position: absolute; top:76px; left:107px; width: 87px; height: 87px; border-radius: 50%; background-image: radial-gradient(#48617c99, #619bd499); //background: linear-gradient(to top left, #48617c99, #619bd499); text-align: center; margin: 0 auto; h2 { position: absolute; top: 30%; left: 50%; z-index: 999; transform: translateX(-50%); } } .circle::after { //小的圆 content: ''; width: 87px; height: 87px; background-image: radial-gradient(#48617c99, #619bd499); //background: linear-gradient(to top left, #48617c99, #619bd499); position: absolute; //通过定位来实现两个圆心在同一位置 top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); z-index: 10; } </style>