diff --git a/src/views/dataAnalysis/Bar/BarChart.vue b/src/views/dataAnalysis/Bar/BarChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be8dbc6e3dc4706d66d65271671be9508dd57582
--- /dev/null
+++ b/src/views/dataAnalysis/Bar/BarChart.vue
@@ -0,0 +1,178 @@
+<template>
+ <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts"
+import resize from "@/components/Charts/mixins/resize"
+const animationDuration = 2600
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: "chart",
+ },
+ width: {
+ type: String,
+ default: "100%",
+ },
+ height: {
+ type: String,
+ default: "300px",
+ },
+ autoResize: {
+ type: Boolean,
+ default: true,
+ },
+ chartData: {
+ required: true,
+ },
+ chartConfig: {
+ type: Object,
+ default: () => {
+ return {}
+ },
+ },
+ },
+ data() {
+ return {
+ chart: null,
+ }
+ },
+ watch: {
+ chartData: {
+ deep: true,
+ handler(val) {
+ this.setOptions(val)
+ },
+ },
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el)
+ this.setOptions(this.chartData)
+ },
+ setOptions(chartData) {
+ // if (!chartData.data) return
+ const option = {
+ tooltip: {
+ trigger: "axis",
+ formatter: "{b}检出率" + ":" + "{c}%",
+ axisPointer: {
+ // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
+ type: "shadow", // 默认为直线，å¯é€‰ä¸ºï¼š'line' | 'shadow'
+ },
+ },
+ grid: {
+ top: "20%",
+ left: "8%",
+ right: "8%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ title: {
+ text: this.chartConfig.title,
+ left: "center",
+ textStyle: {
+ color: "#fff",
+ fontSize: 18,
+ fontWeight: "normal",
+ },
+ top: 0,
+ },
+ yAxis: {
+ type: "value",
+ name: "百分率",
+ nameTextStyle: {
+ color: "#aaa",
+ },
+ splitLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#aaa",
+ },
+ },
+ axisLabel: {
+ show: true,
+ formatter: "{value} %", //å³ä¾§Yè½´æ–‡å—显示
+ textStyle: {
+ color: "#aaa",
+ },
+ },
+ },
+ xAxis: {
+ data: [],
+ axisLine: {
+ show: true, //éšè—X轴轴线
+ lineStyle: {
+ color: "#aaa",
+ },
+ },
+ axisTick: {
+ show: true, //éšè—X轴刻度
+ },
+ axisLabel: {
+ show: true,
+ interval: "0",
+ rotate: 20,
+ textStyle: {
+ color: "#fff", //Xè½´æ–‡å—颜色
+ },
+ },
+ },
+ series: [
+ {
+ type: "bar",
+ stack: "vistors",
+ barWidth: "30%",
+ data: [],
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#00FFE3",
+ },
+ {
+ offset: 1,
+ color: "#4693EC",
+ },
+ ]),
+ },
+ },
+ animationDuration: 2600,
+ },
+ ],
+ }
+ const series = chartData.map((v) => {
+ return {
+ name: v.name,
+ value: Number(v.value),
+ }
+ })
+ option.xAxis.data = series.map((_) => _.name)
+ option.series[0].data = series.map((_) => _.value)
+ this.chart.setOption(option)
+ },
+ },
+}
+</script>
diff --git a/src/views/dataAnalysis/Pie/PieChart.vue b/src/views/dataAnalysis/Pie/PieChart.vue
index 7b2115370dc56969a548b2faeab6f8206934929b..5bf12b1d58738aa6f0389be125a9b84f42749d06 100644
--- a/src/views/dataAnalysis/Pie/PieChart.vue
+++ b/src/views/dataAnalysis/Pie/PieChart.vue
@@ -27,15 +27,15 @@ export default {
},
height: {
type: String,
- default: "350px",
+ default: "300px",
},
autoResize: {
type: Boolean,
default: true,
},
chartData: {
- type: Object,
- required: true,
+ // type: Object,
+ // required: true,
},
},
data() {
@@ -94,10 +94,7 @@ export default {
name: this.title,
type: "pie",
radius: "50%",
- data: [
- { value: 1048, name: "男性" },
- { value: 735, name: "女性" },
- ],
+ data: this.chartData,
emphasis: {
itemStyle: {
shadowBlur: 10,
diff --git a/src/views/dataAnalysis/Pie/PieChartFour.vue b/src/views/dataAnalysis/Pie/PieChartFour.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f865e61fe9fca1c11a715b77840e333c7171b22
--- /dev/null
+++ b/src/views/dataAnalysis/Pie/PieChartFour.vue
@@ -0,0 +1,154 @@
+<template>
+ <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts"
+// require("echarts/theme/macarons"); // echarts theme
+import resize from "@/components/Charts/mixins/resize"
+const animationDuration = 2600
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: "chart",
+ },
+ title: { type: String },
+ colorList: {
+ type: Array,
+ },
+ totalNum: {
+ default: 0,
+ },
+ width: {
+ type: String,
+ default: "100%",
+ },
+ height: {
+ type: String,
+ default: "300px",
+ },
+ autoResize: {
+ type: Boolean,
+ default: true,
+ },
+ chartData: {
+ // type: Object,
+ // required: true,
+ default: [{ name: "内镜应ç”人数" }],
+ },
+ },
+ data() {
+ return {
+ chart: null,
+ }
+ },
+ watch: {
+ chartData: {
+ deep: true,
+ handler(val) {
+ this.setOptions(val)
+ },
+ },
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el)
+ this.setOptions(this.chartData)
+ },
+ setOptions(chartData) {
+ // if (!chartData.data) return
+ let option = {
+ title: {
+ text: this.title,
+ subtext: `ä¸é«˜å±äººæ•° {number|${this.totalNum}}`,
+ left: "center",
+ textStyle: {
+ color: "#fff",
+ fontWeight: "normal",
+ },
+ subtextStyle: {
+ color: "#aaa",
+ rich: {
+ number: {
+ color: "#9BDFFF",
+ fontSize: 14,
+ },
+ },
+ },
+ },
+ tooltip: {
+ trigger: "item",
+ },
+ legend: {
+ show: true,
+ orient: "horizontal",
+ left: "center",
+ bottom: "5%",
+ itemWidth: 8,
+ itemHeight: 8,
+ textStyle: {
+ color: "#aaa",
+ fontSize: 14,
+ },
+ data: ["内镜应ç”人数"],
+ formatter: (name) => {
+ return `${name} ${this.chartData[1].value}人`
+ },
+ },
+ label: {
+ show: true,
+ position: "outside",
+ formatter: "{d}%",
+ },
+ labelLine: {
+ normal: {
+ length: 20,
+ length2: 30,
+ lineStyle: {
+ width: 1,
+ },
+ },
+ },
+ color: this.colorList,
+ series: [
+ {
+ name: this.title,
+ type: "pie",
+ radius: "50%",
+ data: this.chartData,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: "rgba(0, 0, 0, 0.5)",
+ },
+ },
+ },
+ ],
+ }
+ // const series = chartData.data.map((v) => {
+ // return {
+ // name: v.name,
+ // value: Number(v.value),
+ // }
+ // })
+ // option.series[0].data = series
+ this.chart.setOption(option)
+ },
+ },
+}
+</script>
diff --git a/src/views/dataAnalysis/Pie/PieChartTwo.vue b/src/views/dataAnalysis/Pie/PieChartTwo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d7e0608276f25cec6b79f677eb7eccec8dd4ea9
--- /dev/null
+++ b/src/views/dataAnalysis/Pie/PieChartTwo.vue
@@ -0,0 +1,149 @@
+<template>
+ <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts"
+// require("echarts/theme/macarons"); // echarts theme
+import resize from "@/components/Charts/mixins/resize"
+const animationDuration = 2600
+export default {
+ mixins: [resize],
+ props: {
+ className: {
+ type: String,
+ default: "chart",
+ },
+ title: { type: String },
+ colorList: {
+ type: Array,
+ },
+ totalNum: {
+ default: 0,
+ },
+ width: {
+ type: String,
+ default: "100%",
+ },
+ height: {
+ type: String,
+ default: "280px",
+ },
+ autoResize: {
+ type: Boolean,
+ default: true,
+ },
+ chartData: {
+ // type: Object,
+ // required: true,
+ default: "",
+ },
+ },
+ data() {
+ return {
+ chart: null,
+ }
+ },
+ watch: {
+ chartData: {
+ deep: true,
+ handler(val) {
+ this.setOptions(val)
+ },
+ },
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initChart()
+ })
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(this.$el)
+ this.setOptions(this.chartData)
+ },
+ setOptions(chartData) {
+ // if (!chartData.data) return
+ let option = {
+ title: {
+ text: this.title + "\n\n" + `{number|${this.totalNum}}`,
+ left: "center",
+ top: "34%",
+ textStyle: {
+ color: "#ddd",
+ fontWeight: "normal",
+ fontSize: 14,
+ rich: {
+ number: {
+ color: "#9BDFFF",
+ fontSize: 14,
+ },
+ },
+ },
+ },
+ tooltip: {
+ trigger: "item",
+ },
+ legend: {
+ show: true,
+ orient: "horizontal",
+ left: "center",
+ bottom: "5%",
+ itemWidth: 8,
+ itemHeight: 8,
+ textStyle: {
+ color: "#aaa",
+ fontSize: 14,
+ },
+ },
+ label: {
+ show: true,
+ position: "outside",
+ formatter: "{d}%",
+ },
+ labelLine: {
+ normal: {
+ length: 20,
+ length2: 30,
+ lineStyle: {
+ width: 1,
+ },
+ },
+ },
+ color: this.colorList,
+ series: [
+ {
+ name: this.title,
+ type: "pie",
+ top: "-18%",
+ radius: ["38%", "50%"],
+ data: this.chartData,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: "rgba(0, 0, 0, 0.5)",
+ },
+ },
+ },
+ ],
+ }
+ // const series = chartData.data.map((v) => {
+ // return {
+ // name: v.name,
+ // value: Number(v.value),
+ // }
+ // })
+ // option.series[0].data = series
+ this.chart.setOption(option)
+ },
+ },
+}
+</script>
diff --git a/src/views/dataAnalysis/index.vue b/src/views/dataAnalysis/index.vue
index 9a3e49de50d467aa36d02190377621930eaa378f..c12b6cb8afab793f4e4b3d274229fbb30278fcf8 100644
--- a/src/views/dataAnalysis/index.vue
+++ b/src/views/dataAnalysis/index.vue
@@ -70,22 +70,92 @@
:height="'300px'"
:title="'ç›æŸ¥äººç¾¤æ€§åˆ«åˆ†å¸ƒ'"
:total-num="sexNum"
- :chart-data="{}"
+ :chart-data="pieData1"
:colorList="colorList1"
></pie-chart>
</div>
- <div class="pie-item"></div>
- <div class="pie-item"></div>
- <div class="pie-item"></div>
+ <div class="pie-item">
+ <pie-chart
+ :class-name="'pie1'"
+ :height="'300px'"
+ :title="'ç›æŸ¥äººç¾¤å¹´é¾„段分布'"
+ :total-num="ageNum"
+ :chart-data="pieData2"
+ :colorList="colorList2"
+ ></pie-chart>
+ </div>
+ <div class="pie-item">
+ <pie-chart
+ :class-name="'pie1'"
+ :height="'300px'"
+ :title="'ç›æŸ¥äººç¾¤é£Žé™©ç¨‹åº¦åˆ†å¸ƒ'"
+ :total-num="riskNum"
+ :chart-data="pieData3"
+ :colorList="colorList3"
+ ></pie-chart>
+ </div>
+ <div class="pie-item">
+ <pie-chart-four
+ :class-name="'pie4'"
+ :height="'300px'"
+ :title="'ä¸é«˜å±äººç¾¤å†…镜应ç”情况'"
+ :total-num="midhignNum"
+ :chart-data="pieData4"
+ :colorList="colorList4"
+ ></pie-chart-four>
+ </div>
+ </div>
+ <!-- 内镜检出疾病情况 -->
+ <div class="deseaseSituation">
+ <div class="detail-title">内镜检出疾病情况</div>
+ </div>
+ <div class="pie-list">
+ <div class="pie-item">
+ <bar-chart
+ :className="'barchart1'"
+ :chartData="barData1"
+ :chartConfig="chartConfig1"
+ ></bar-chart>
+ </div>
+ <div class="pie-item">
+ <bar-chart
+ :className="'barchart2'"
+ :chartData="barData2"
+ :chartConfig="chartConfig2"
+ ></bar-chart>
+ </div>
+ <div class="pie-item">
+ <div class="pie-item-title">胃癌内镜检出率</div>
+ <pie-chart-two
+ :className="'pieChart4'"
+ :colorList="pieColor4"
+ :totalNum="20"
+ :chartData="botPieData"
+ :title="'内镜总数'"
+ ></pie-chart-two>
+ </div>
+ <div class="pie-item">
+ <div class="pie-item-title">早期胃癌å 比</div>
+ <pie-chart-two
+ :className="'pieChart5'"
+ :colorList="pieColor4"
+ :totalNum="'70%'"
+ :chartData="botPieData2"
+ :title="'早期胃癌å 比'"
+ ></pie-chart-two>
+ </div>
</div>
</div>
</div>
</template>
<script>
+import BarChart from "./Bar/BarChart.vue"
import Map from "./Map/index.vue"
import PieChart from "./Pie/PieChart.vue"
+import PieChartFour from "./Pie/PieChartFour.vue"
+import PieChartTwo from "./Pie/PieChartTwo.vue"
export default {
- components: { Map, PieChart },
+ components: { Map, PieChart, PieChartFour, BarChart, PieChartTwo },
data() {
return {
overAllData: [
@@ -145,7 +215,63 @@ export default {
},
],
sexNum: 123455,
+ ageNum: 34512,
+ riskNum: 12314,
+ midhignNum: 1234,
colorList1: ["#2197FF", "#1571EA"],
+ colorList2: ["#0A56BD", "#1571EA", "#2197FF", "#3DA5FF", "#72BEFF"],
+ colorList3: ["#47B7A0", "#FFA424", "#EB7126"],
+ colorList4: ["#3B4466", "#1571EA"],
+ pieData1: [
+ { value: 1048, name: "男性" },
+ { value: 735, name: "女性" },
+ ],
+ pieData2: [
+ { value: 10, name: "40-50" },
+ { value: 20, name: "50-60" },
+ { value: 20, name: "60-70" },
+ { value: 20, name: "70-80" },
+ { value: 20, name: "80以上" },
+ ],
+ pieData3: [
+ { value: 20, name: "低风险" },
+ { value: 20, name: "ä¸é£Žé™©" },
+ { value: 20, name: "高风险" },
+ ],
+ pieData4: [
+ { value: 20, name: "内镜未应ç”人数" },
+ { value: 30, name: "内镜应ç”人数" },
+ ],
+ barData1: [
+ { name: "Barret食管", value: "27" },
+ { name: "åæµæ€§é£Ÿç®¡ç‚Ž", value: "2" },
+ { name: "低级别食管粘膜上皮内瘤å˜", value: "3" },
+ ],
+ barData2: [
+ { name: "éžèŽç¼©æ€§èƒƒç‚Ž", value: "27" },
+ { name: "èŽç¼©æ€§èƒƒç‚Ž", value: "2" },
+ { name: "胃æ¯è‚‰", value: "3" },
+ { name: "胃溃疡", value: "8" },
+ { name: "åäºŒæŒ‡è‚ çƒéƒ¨æºƒç–¡", value: "11" },
+ { name: "低级别胃粘膜上皮内瘤å˜", value: "11" },
+ ],
+ chartConfig1: {
+ title: "食管良性疾病检出率",
+ },
+ chartConfig2: {
+ title: "胃良性疾病检出率",
+ },
+ pieColor4: ["#4EC2AA", "#4EB6FF", "#4E6EFF"],
+ botPieData: [
+ { value: 20, name: "高级别胃粘膜上皮内瘤å˜æ•°" },
+ { value: 30, name: "早期胃癌数" },
+ { value: 30, name: "进展期胃癌" },
+ ],
+ botPieData2: [
+ { value: 20, name: "高级别胃粘膜上皮内瘤å˜æ•°" },
+ { value: 30, name: "早期胃癌数" },
+ { value: 30, name: "进展期胃癌" },
+ ],
mapData: [
{
name: "é™å®‰åŒºä¸å¿ƒåŒ»é™¢",
@@ -341,7 +467,9 @@ export default {
}
}
.right-list {
- padding: 0 18px;
+ height: 554px;
+ padding: 0 18px 18px;
+ overflow: auto;
.list-item {
font-size: 14px;
font-family: AlibabaPuHuiTiM;
@@ -368,6 +496,7 @@ export default {
}
.detail-panel {
margin-top: 24px;
+ // margin-bottom: 24px;
.detail-title {
width: 230px;
height: 46px;
@@ -387,6 +516,7 @@ export default {
height: 334px;
background: #252c49;
display: flex;
+ margin-bottom: 32px;
.pie-item {
padding: 30px 0;
flex: 1;
@@ -394,6 +524,11 @@ export default {
}
}
}
+.pie-item-title {
+ text-align: center;
+ color: #fff;
+ font-size: 18px;
+}
</style>
<style lang="scss">
// ::v-deep {