Skip to content

A
agcs2.0-web
Commit d012b500 authored by miaojiale's avatar miaojiale
Browse files
Options

页面开发大部分完成

parent 890bbfc2
Hide whitespace changes
Inline Side-by-side
Showing with 626 additions and 13 deletions
src/views/dataAnalysis/Bar/BarChart.vue 0 → 100644
View file @ d012b500
<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>
src/views/dataAnalysis/Pie/PieChart.vue
View file @ d012b500
...@@ -27,15 +27,15 @@ export default { ...@@ -27,15 +27,15 @@ export default {
}, },
height: { height: {
type: String, type: String,
default: "350px", default: "300px",
}, },
autoResize: { autoResize: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
chartData: { chartData: {
type: Object, // type: Object,
required: true, // required: true,
}, },
}, },
data() { data() {
...@@ -94,10 +94,7 @@ export default { ...@@ -94,10 +94,7 @@ export default {
name: this.title, name: this.title,
type: "pie", type: "pie",
radius: "50%", radius: "50%",
data: [ data: this.chartData,
{ value: 1048, name: "男性" },
{ value: 735, name: "女性" },
],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
......
src/views/dataAnalysis/Pie/PieChartFour.vue 0 → 100644
View file @ d012b500
<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>
src/views/dataAnalysis/Pie/PieChartTwo.vue 0 → 100644
View file @ d012b500
<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>
src/views/dataAnalysis/index.vue
View file @ d012b500
...@@ -70,22 +70,92 @@ ...@@ -70,22 +70,92 @@
:height="'300px'" :height="'300px'"
:title="'筛查人群性别分布'" :title="'筛查人群性别分布'"
:total-num="sexNum" :total-num="sexNum"
:chart-data="{}" :chart-data="pieData1"
:colorList="colorList1" :colorList="colorList1"
></pie-chart> ></pie-chart>
</div> </div>
<div class="pie-item"></div> <div class="pie-item">
<div class="pie-item"></div> <pie-chart
<div class="pie-item"></div> :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> </div>
</div> </div>
</template> </template>
<script> <script>
import BarChart from "./Bar/BarChart.vue"
import Map from "./Map/index.vue" import Map from "./Map/index.vue"
import PieChart from "./Pie/PieChart.vue" import PieChart from "./Pie/PieChart.vue"
import PieChartFour from "./Pie/PieChartFour.vue"
import PieChartTwo from "./Pie/PieChartTwo.vue"
export default { export default {
components: { Map, PieChart }, components: { Map, PieChart, PieChartFour, BarChart, PieChartTwo },
data() { data() {
return { return {
overAllData: [ overAllData: [
...@@ -145,7 +215,63 @@ export default { ...@@ -145,7 +215,63 @@ export default {
}, },
], ],
sexNum: 123455, sexNum: 123455,
ageNum: 34512,
riskNum: 12314,
midhignNum: 1234,
colorList1: ["#2197FF", "#1571EA"], 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: [ mapData: [
{ {
name: "静安区中心医院", name: "静安区中心医院",
...@@ -341,7 +467,9 @@ export default { ...@@ -341,7 +467,9 @@ export default {
} }
} }
.right-list { .right-list {
padding: 0 18px; height: 554px;
padding: 0 18px 18px;
overflow: auto;
.list-item { .list-item {
font-size: 14px; font-size: 14px;
font-family: AlibabaPuHuiTiM; font-family: AlibabaPuHuiTiM;
...@@ -368,6 +496,7 @@ export default { ...@@ -368,6 +496,7 @@ export default {
} }
.detail-panel { .detail-panel {
margin-top: 24px; margin-top: 24px;
// margin-bottom: 24px;
.detail-title { .detail-title {
width: 230px; width: 230px;
height: 46px; height: 46px;
...@@ -387,6 +516,7 @@ export default { ...@@ -387,6 +516,7 @@ export default {
height: 334px; height: 334px;
background: #252c49; background: #252c49;
display: flex; display: flex;
margin-bottom: 32px;
.pie-item { .pie-item {
padding: 30px 0; padding: 30px 0;
flex: 1; flex: 1;
...@@ -394,6 +524,11 @@ export default { ...@@ -394,6 +524,11 @@ export default {
} }
} }
} }
.pie-item-title {
text-align: center;
color: #fff;
font-size: 18px;
}
</style> </style>
<style lang="scss"> <style lang="scss">
// ::v-deep { // ::v-deep {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment