|
@@ -1,378 +1,156 @@
|
|
|
<template>
|
|
|
- <div id="c2" style="width: 90%;margin-left:5%;height: 100%;"></div>
|
|
|
+ <div id="myChartold2" style="width: 100%; height: 100%; "></div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
-export default {
|
|
|
- name: "chart",
|
|
|
- props: {
|
|
|
- id: {
|
|
|
- type: String,
|
|
|
- default: "id"
|
|
|
- },
|
|
|
- dataArr: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.gatherers();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- dataArr() {
|
|
|
- this.myChart.clear();
|
|
|
- this.gatherers();
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- gatherers() {
|
|
|
- let myChart = this.$echarts.init(document.getElementById("c2"));
|
|
|
- this.myChart = myChart;
|
|
|
- let dataArr = this.dataArr;
|
|
|
- let chartName = [];
|
|
|
- let chartData = [];
|
|
|
- let chartData2 = [];
|
|
|
- let bottomArr = [8, 8, 8, 8, 8];
|
|
|
- if (dataArr.length != 0) {
|
|
|
- dataArr[0].data1.forEach(function(item) {
|
|
|
- chartName.push(item.label);
|
|
|
- chartData.push(item.value);
|
|
|
- });
|
|
|
- dataArr[0].data2.forEach(function(item) {
|
|
|
- chartData2.push(item.value);
|
|
|
- });
|
|
|
- }
|
|
|
- // dataArr[0].data3.forEach(function(item) {
|
|
|
- // chartData3.push(item.value);
|
|
|
- // });
|
|
|
- // 绘制图表
|
|
|
- myChart.setOption({
|
|
|
- // color: ["#59e7eb", "#38e27f", "#2f92ed", "#d0cc6f", "#e47f2e"],
|
|
|
- // tooltip: {},
|
|
|
- title: [
|
|
|
- // {
|
|
|
- // text: "(家)",
|
|
|
- // left: "7%",
|
|
|
- // bottom: "8%",
|
|
|
- // // textAlign: "center",
|
|
|
- // textStyle: {
|
|
|
- // fontWeight: 900,
|
|
|
- // fontSize: 18,
|
|
|
- // color: "#8998aa",
|
|
|
- // textAlign: "center"
|
|
|
- // }
|
|
|
- // },
|
|
|
- // {
|
|
|
- // text: "(日)",
|
|
|
- // right: "5%",
|
|
|
- // bottom: "8%",
|
|
|
- // // textAlign: "center",
|
|
|
- // textStyle: {
|
|
|
- // fontWeight: 900,
|
|
|
- // fontSize: 18,
|
|
|
- // color: "#8998aa",
|
|
|
- // textAlign: "center"
|
|
|
- // }
|
|
|
- // }
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- top: "12%",
|
|
|
- left: "7%",
|
|
|
- right: "7%",
|
|
|
- bottom: "10%",
|
|
|
- containLabel: true
|
|
|
+ export default {
|
|
|
+ name: "OldPersonSexCount",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataArr: [
|
|
|
+ { label: '老年人男性人数', value: 5896322, percent: '60%' },
|
|
|
+ { label: '老年人女性人数', value: 4896322, percent: '40%' }
|
|
|
+ ],
|
|
|
+ colorArr: [
|
|
|
+ { color1: '#009cff', color2: '#5BB4FF' },
|
|
|
+ { color1: '#ff5b00', color2: '#FF9648' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
},
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- formatter: function(params) {
|
|
|
- // console.log(params)
|
|
|
- var result = "";
|
|
|
- var dotHtml =
|
|
|
- '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#068d9d"></span>';
|
|
|
- var dotHtml2 =
|
|
|
- '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ff7200"></span>';
|
|
|
- result +=
|
|
|
- dotHtml +
|
|
|
- "注册企业:" +
|
|
|
- params[0].data +
|
|
|
- "</br>"+
|
|
|
- dotHtml2 +
|
|
|
- "认证企业:" +
|
|
|
- params[1].data;
|
|
|
- return result;
|
|
|
- },
|
|
|
- axisPointer: {
|
|
|
- lineStyle: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
+ mounted() {
|
|
|
+ const seriesArr = [];
|
|
|
+
|
|
|
+ for(let i = 0; i < this.dataArr.length; i++) {
|
|
|
+ const d = this.dataArr[i];
|
|
|
+
|
|
|
+ seriesArr.push({
|
|
|
+ type: 'pie',
|
|
|
+ radius: [38, 70],
|
|
|
+ center: [`${ i == 0 ? 30 : 70 }%`, '56%'],
|
|
|
+ startAngle: 90,
|
|
|
+ clockwise: false,
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: parseInt(d.percent),
|
|
|
+ itemStyle: {
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
offset: 0,
|
|
|
- color: "rgba(0, 255, 233,0)"
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: "rgba(255, 255, 255,1)"
|
|
|
- },
|
|
|
- {
|
|
|
+ color: this.colorArr[i].color1
|
|
|
+ }, {
|
|
|
offset: 1,
|
|
|
- color: "rgba(0, 255, 233,0)"
|
|
|
- }
|
|
|
- ],
|
|
|
- global: false
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- boundaryGap: true,
|
|
|
- axisLine: {
|
|
|
- //坐标轴轴线相关设置。数学上的x轴
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: "#676C7B"
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}日",
|
|
|
- interval: 0,
|
|
|
- //坐标轴刻度标签的相关设置
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- // fontWeight: 900,
|
|
|
- fontSize: 18
|
|
|
- }
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: chartName
|
|
|
- },
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- splitArea: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: []
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: "#676C7B"
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: "#676C7B"
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- margin: 20,
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- // fontWeight: 900,
|
|
|
- fontSize: 18
|
|
|
- }
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "注册企业", //这个是Bar图
|
|
|
- type: "bar",
|
|
|
- barWidth: "30%",
|
|
|
- barGap: "40%",
|
|
|
- xAxisIndex: 0,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontWeight: 900,
|
|
|
- fontSize: 16,
|
|
|
- color: "#00fcff",
|
|
|
- position: "top"
|
|
|
- // distance: -20
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "#068d9d" // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(10,30,57,0.1)" // 100% 处的颜色
|
|
|
- }
|
|
|
- ]
|
|
|
+ color: this.colorArr[i].color2
|
|
|
+ }])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 100 - parseInt(d.percent),
|
|
|
+ itemStyle: {
|
|
|
+ color: "transparent"
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- },
|
|
|
- {
|
|
|
- name: "认证企业", //这个是Bar图
|
|
|
- type: "bar",
|
|
|
- barWidth: "30%",
|
|
|
- xAxisIndex: 0,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontWeight: 900,
|
|
|
- fontSize: 16,
|
|
|
- color: "#ff7200",
|
|
|
- position: "top"
|
|
|
- // distance: -20
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 1,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "#85471d" // 0% 处的颜色
|
|
|
+ }],
|
|
|
+ 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
|
|
|
},
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(10,30,57,0.1)" // 100% 处的颜色
|
|
|
+ b: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#fff',
|
|
|
+ padding: [5, 0]
|
|
|
}
|
|
|
- ]
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData2
|
|
|
- },
|
|
|
- // {
|
|
|
- // name: "服务企业", //这个是Bar图
|
|
|
- // type: "bar",
|
|
|
- // barWidth: "20%",
|
|
|
- // xAxisIndex: 0,
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // // formatter: "{a|}",
|
|
|
- // color: "#ff349d",
|
|
|
- // position: "top",
|
|
|
- // fontWeight: 900,
|
|
|
- // fontSize: 16,
|
|
|
- // distance: -20
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // color: {
|
|
|
- // type: "linear",
|
|
|
- // x: 0,
|
|
|
- // y: 0,
|
|
|
- // x2: 1,
|
|
|
- // y2: 1,
|
|
|
- // colorStops: [
|
|
|
- // {
|
|
|
- // offset: 0,
|
|
|
- // color: "#84286b" // 0% 处的颜色
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: "rgba(10,30,57,0.1)" // 100% 处的颜色
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // data: chartData3
|
|
|
- // },
|
|
|
- //--------------------------
|
|
|
- {
|
|
|
- name: "注册", //这个是Bar图
|
|
|
- type: "bar",
|
|
|
- barWidth: "30%",
|
|
|
- barGap: "40%",
|
|
|
- xAxisIndex: 1,
|
|
|
- label: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "#00fcff"
|
|
|
- }
|
|
|
- },
|
|
|
- data: bottomArr
|
|
|
- },
|
|
|
- {
|
|
|
- name: "认证", //这个是Bar图
|
|
|
- type: "bar",
|
|
|
- barWidth: "30%",
|
|
|
- xAxisIndex: 1,
|
|
|
- label: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "#ff7200"
|
|
|
- }
|
|
|
- },
|
|
|
- data: bottomArr
|
|
|
+ },
|
|
|
+ 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: 24,
|
|
|
+ color: this.colorArr[i].color1
|
|
|
+ },
|
|
|
+ formatter: () => {
|
|
|
+ return `${d.percent}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ z: 1
|
|
|
+ });
|
|
|
}
|
|
|
- // {
|
|
|
- // name: "服务", //这个是Bar图
|
|
|
- // type: "bar",
|
|
|
- // barWidth: "20%",
|
|
|
- // xAxisIndex: 1,
|
|
|
- // label: {
|
|
|
- // show: false
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // color: "#ff349d" // 0% 处的颜色
|
|
|
- // }
|
|
|
- // },
|
|
|
- // data: bottomArr
|
|
|
- // }
|
|
|
- ]
|
|
|
- });
|
|
|
- window.addEventListener("resize", function() {
|
|
|
- myChart.resize();
|
|
|
- });
|
|
|
+
|
|
|
+
|
|
|
+ let myChart = this.$echarts.init(document.getElementById('myChartold2'));
|
|
|
+ myChart.setOption(
|
|
|
+ {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- computed: {}
|
|
|
-};
|
|
|
</script>
|
|
|
+
|
|
|
<style scoped>
|
|
|
+
|
|
|
</style>
|