|
|
@@ -0,0 +1,184 @@
|
|
|
+<template>
|
|
|
+ <div id="myChartold11" style=" width: 100%; height: 100%;"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {oldPersonSex} from '../../api'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "OldPersonSexCount",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataArr: [],
|
|
|
+ colorArr: [
|
|
|
+ // { color1: '#009cff', color2: '#5BB4FF' },
|
|
|
+ {color1: '#ff5b00', color2: '#FF9648'}
|
|
|
+ ],
|
|
|
+ myChart: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async draw() {
|
|
|
+ if (this.myChart) {
|
|
|
+ this.myChart.clear();
|
|
|
+ }
|
|
|
+
|
|
|
+ const result = await oldPersonSex({}, 'POST');
|
|
|
+ this.dataArr = result;
|
|
|
+ let title = [];
|
|
|
+ const seriesArr = [];
|
|
|
+ if (this.dataArr[0]) {
|
|
|
+ title.push({
|
|
|
+ text: this.dataArr[1].percent,
|
|
|
+ x: 'center',
|
|
|
+ y: 'center',
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'normal',
|
|
|
+ color: this.colorArr[0].color2,
|
|
|
+ fontSize: '14'
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 0; i < this.dataArr.length; i++) {
|
|
|
+ // const d = this.dataArr[i];
|
|
|
+
|
|
|
+ seriesArr.push({
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['100%', '60%'],
|
|
|
+ center: [`50%`, '50%'],
|
|
|
+ startAngle: 90,
|
|
|
+ clockwise: false,
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: parseInt(this.dataArr[1].percent),
|
|
|
+ itemStyle: {
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: this.colorArr[0].color1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: this.colorArr[0].color2
|
|
|
+ }])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 100 - parseInt(this.dataArr[1].percent),
|
|
|
+ itemStyle: {
|
|
|
+ color: "transparent"
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ z: 1
|
|
|
+ });
|
|
|
+
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: i == 0 ? `image://${require("../../assets/oldStatistics/old-person-sex-male.png")}` : `image://${require("../../assets/oldStatistics/old-person-sex-female.png")}`,
|
|
|
+ // symbolSize: [144, 143],
|
|
|
+ // data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -120 : 120}`, 0] } ],
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // show: true,
|
|
|
+ // position: "top",
|
|
|
+ // offset: [i == 0 ? -120 : 120, 0],
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 18,
|
|
|
+ // color: '#fff'
|
|
|
+ // },
|
|
|
+ // formatter: ['{a|' + d.value + '}', '{b|' + d.label + '}'].join('\n'),
|
|
|
+ // rich:{
|
|
|
+ // a: {
|
|
|
+ // fontSize: 26,
|
|
|
+ // color: this.colorArr[i].color1
|
|
|
+ // },
|
|
|
+ // b: {
|
|
|
+ // fontSize: 18,
|
|
|
+ // color: '#fff',
|
|
|
+ // padding: [5, 0]
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // z: 2
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: i == 0 ? `image://${require("../../assets/oldStatistics/old-person-male-icon.png")}` : `image://${require("../../assets/oldStatistics/old-person-female-icon.png")}`,
|
|
|
+ // symbolSize: [53, 52],
|
|
|
+ // data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -230 : 10}`, -50] } ],
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // show: true,
|
|
|
+ // position: "top",
|
|
|
+ // offset: [i == 0 ? -120 : 120, 50],
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 20,
|
|
|
+ // color: this.colorArr[i].color1
|
|
|
+ // },
|
|
|
+ // formatter: () => {
|
|
|
+ // return `${d.percent}`;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // z: 1
|
|
|
+ // });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.myChart = this.$echarts.init(document.getElementById('myChartold11'));
|
|
|
+ this.myChart.setOption(
|
|
|
+ {
|
|
|
+ title:title,
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ max: 200,
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: seriesArr
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.draw();
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ /*#myChartold2 {*/
|
|
|
+ /* background: url("../../assets/oldStatistics/old-2.png") no-repeat !important;*/
|
|
|
+ /* background-size: 90% 90% !important;*/
|
|
|
+ /*}*/
|
|
|
+</style>
|
