Skip to content

P
pet-business-web
Commit caf83372 authored by 陈明豪's avatar 陈明豪
Browse files
Options

数据统计

parent 9e02f302
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 718 additions and 0 deletions
src/assets/json/china.json 0 → 100644
View file @ caf83372
This diff is collapsed.
src/router/index.js
View file @ caf83372
......@@ -303,6 +303,23 @@ export const constantRoutes = [
}
]
},
// 数据统计
{
path: '/data-statistics',
component: Layout,
hidden: true,
permissions: ['*:*:*'],
children: [
// 医院数据统计
{
path: 'hospital-data-statistics',
props: true,
component: () => import('@/views/data-statistics/hospital-data-statistics/hospital-data-statistics.vue'),
name: 'HospitalDataStatistics',
meta: { title: '医院数据统计', icon: 'component' }
}
]
},
// 业务管理
{
path: '/service-management',
......
src/views/data-statistics/echars-components/china-map.vue 0 → 100644
View file @ caf83372
<template>
<div class="chinaecharts">
<div id="mapChart" ref="mapChart" />
</div>
</template>
<script>
import china from '@/assets/json/china.json'
export default {
name: 'ChinaMap',
props: ['mapData', 'sum', 'unit'],
data() {
return {
}
},
watch: {},
mounted() {
this.$echarts.registerMap('china', { geoJSON: china })
this.mapFn()
},
methods: {
mapFn() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.mapChart)
mapChart.setOption({
backgroundColor: '', // 背景颜色
title: {
text: '',
subtext: '',
color: '#fff',
x: 'center'
},
// 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
visualMap: {
// 左下角定义 在选中范围中的视觉元素 渐变地区颜色
type: 'piecewise', // 类型为分段型
top: 'bottom',
show: false, // 右下角label显示
// calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
right: 10,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
itemGap: 2, // 每两个图元之间的间隔距离，单位为px
pieces: [
// 自定义每一段的范围，以及每一段的文字
{ gte: 10000, label: '10000人以上', color: '#BCDBB4' }, // 不指定 max，表示 max 为无限大（Infinity）。
{
gte: 1000,
lte: 9999,
label: '1000-9999人',
color: '#BCDBB4'
},
{
gte: 500,
lte: 999,
label: '500-999人',
color: '#BCDBB4'
},
{
gte: 100,
lte: 499,
label: '100-499人',
color: '#BCDBB4'
},
{
gte: 1,
lte: 99,
label: '1-99人',
color: '#BCDBB4'
},
{ lte: 0, label: '无', color: '#FAFAFA' } // 不指定 min，表示 min 为无限大（-Infinity）。
],
textStyle: {
color: '#737373'
}
},
// 提示框，鼠标移入
tooltip: {
show: true, // 鼠标移入是否触发数据
trigger: 'item', // 出发方式
formatter: (item) => {
console.log('itemData', item)
const unit = _this.unit
const percent = item.data.value / _this.sum * 100
return `<div>
${item.data.name}
<br>
${item.data.value}${unit} (${percent}%)
</div>`
}
},
// 配置地图的数据，并且显示
series: [
{
top: '20%',
// center: ['20%'],
name: '地图',
type: 'map', // 地图种类
map: 'china', // 地图类型。
data: _this.mapData,
itemStyle: {
normal: {
label: {
show: false // 默认是否显示份名称
},
areaStyle: {
color: '#FAFAFA' // 默认的地图板块颜色
},
borderWidth: 1,
borderColor: '#D9D9D9'
}
},
// 点击选择样式
select: {
disabled: false, // 可以被选中
// 字体样式
label: {
color: '#fff',
show: false
},
// 背景样式
itemStyle: {
borderWidth: 1, // 图形描边的宽度。
borderColor: '#707070', // 图形描边的颜色。
areaColor: '#8DCC7F'
}
},
// 当鼠标放上
emphasis: {
label: {
show: false,
color: '#fff'
},
itemStyle: {
borderWidth: 1, // 图形描边的宽度。
borderColor: '#707070', // 图形描边的颜色。
areaColor: '#8DCC7F'
}
},
zoom: 1.3, // 放大比例
label: {
// 图形上的文本标签，可用于说明图形的一些数据信息
show: true
}
}
// {
// type: 'scatter',
// showEffectOn: 'render', // 配置什么时候显示特效
// coordinateSystem: 'geo', // 该系列使用的坐标系
// symbolSize: 10, // 标记的大小
// data: [{ name: '宜昌', value: [111.3, 30.7, 130] }],
// zlevel: 99999
// }
]
})
window.addEventListener('resize', () => {
// 自动渲染echarts
mapChart.resize()
})
}
}
}
</script>
<style scoped>
.chinaecharts {
width: 100%;
height: 100%;
/*background-color: #333;*/
}
#mapChart {
width: 100%;
height: 500px;
}
</style>
src/views/data-statistics/echars-components/twoLineChart.vue 0 → 100644
View file @ caf83372
<template>
<div ref="towLine" class="towLineCharts" />
</template>
<script>
export default {
name: 'TwoLineChart',
props: {
// 标题
title: {
type: String,
default: ''
},
// x轴坐标
xData: {
default: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
// y轴数据 1
yData1: {
default: {
label: '',
data: [],
line_color: '',
area_color: '',
unit: ''
}
},
// y轴数据 2
yData2: {
default: {
label: '',
data: [],
line_color: '',
area_color: '',
unit: ''
},
// y轴是否显示单位
showYUnit: {
type: Boolean,
default: true
}
}
},
data() {
return {}
},
watch: {},
mounted() {
this.setECharts()
},
methods: {
setECharts() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.towLine)
mapChart.setOption({
title: {
left: 'left',
text: _this.title,
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
grid: {
x: 70,
x2: 15
},
xAxis: {
type: 'category',
boundaryGap: true,
data: _this.xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + _this.yData1.unit
}
},
legend: {
x: 'right',
y: 'top',
data: [
_this.yData1.label,
_this.yData2.label
]
},
// 悬浮框样式
tooltip: {
show: true, // 鼠标移入是否触发数据
trigger: 'axis', // 出发方式
formatter: (axis) => {
const label1 = _this.yData1.label
const unit1 = _this.yData1.unit
const color1 = _this.yData1.line_color
const label2 = _this.yData2.label
const unit2 = _this.yData2.unit
const color2 = _this.yData2.line_color
return `<div>
<div>${axis[0].name}</div>
<div style="display: flex">
<div style="background-color: ${color1};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
<span>${label1}</span>
<span style="margin-left: 5px;color: ${color1}">${axis[0].value}(${unit1})</span>
</div>
<div style="display: flex">
<div style="background-color: ${color2};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
<span>${label2}</span>
<span style="margin-left: 5px;color: ${color2}">${axis[1].value}(${unit2})</span>
</div>
</div>`
}
},
series: [
{
name: _this.yData1.label,
data: _this.yData1.data,
// symbolSize: 5, // 设置折线上圆点大小
// symbol: 'circle', // 设置拐点为实心圆
type: 'line',
smooth: true,
stack: 'x', // y轴是否从零开始
// 折线下区域的颜色
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: _this.yData1.area_color // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}]
)
},
// 折线的样式
itemStyle: {
color: _this.yData1.line_color
}
},
{
name: _this.yData2.label,
data: _this.yData2.data,
type: 'line',
smooth: true,
stack: 'x',
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: _this.yData2.area_color // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}]
)
},
itemStyle: {
color: _this.yData2.line_color
}
}
],
emphasis: {
disabled: true
}
})
window.addEventListener('resize', function() {
mapChart.resize()
})
}
}
}
</script>
<style scoped>
.towLineCharts {
width: 100%;
height: 468px;
}
</style>
src/views/data-statistics/echars-components/twoLineChartYNoUnit.vue 0 → 100644
View file @ caf83372
<template>
<div ref="towLineNoUnit" class="towLineCharts" />
</template>
<script>
export default {
name: 'TwoLineChart',
props: {
// 标题
title: {
type: String,
default: ''
},
// x轴坐标
xData: {
type: Array,
default: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
// y轴数据 1
yData1: {
type: Object,
default: {
label: '',
data: [],
line_color: '',
area_color: '',
unit: ''
}
},
// y轴数据 2
yData2: {
type: Object,
default: {
label: '',
data: [],
line_color: '',
area_color: '',
unit: ''
},
// y轴是否显示单位
showYUnit: {
type: Boolean,
default: true
}
}
},
data() {
return {}
},
watch: {},
mounted() {
this.setECharts()
},
methods: {
setECharts() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.towLineNoUnit)
mapChart.setOption({
title: {
left: 'left',
text: _this.title,
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: _this.xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + _this.yData1.unit
}
},
legend: {
x: 'right',
y: 'top',
data: [
_this.yData1.label + '(' + _this.yData1.unit + ')',
_this.yData2.label + '(' + _this.yData2.unit + ')'
]
},
// 悬浮框样式
tooltip: {
show: true, // 鼠标移入是否触发数据
trigger: 'axis', // 出发方式
formatter: (axis) => {
const label1 = _this.yData1.label
const unit1 = _this.yData1.unit
const color1 = _this.yData1.line_color
const label2 = _this.yData2.label
const unit2 = _this.yData2.unit
const color2 = _this.yData2.line_color
return `<div>
<div>${axis[0].name}</div>
<div style="display: flex">
<div style="background-color: ${color1};width: 10px;height: 10px;margin-top: 5px;margin-right:5px;border-radius: 10px"></div>
<span>${label1}(${unit1})</span>
<span style="margin-left: 5px">${axis[0].value}</span>
</div>
<div style="display: flex">
<div style="background-color: ${color2};width: 10px;height: 10px;margin-top: 5px;margin-right:5px;border-radius: 10px"></div>
<span>${label2}(${unit2})</span>
<span style="margin-left: 5px">${axis[1].value}</span>
</div>
</div>`
}
},
series: [
{
name: _this.yData1.label + '(' + _this.yData1.unit + ')',
data: _this.yData1.data,
// symbolSize: 5, // 设置折线上圆点大小
// symbol: 'circle', // 设置拐点为实心圆
type: 'line',
smooth: true,
stack: 'x', // y轴是否从零开始
// 折线下区域的颜色
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: _this.yData1.area_color // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}]
)
},
// 折线的样式
itemStyle: {
color: _this.yData1.line_color
}
},
{
name: _this.yData2.label + '(' + _this.yData2.unit + ')',
data: _this.yData2.data,
type: 'line',
smooth: true,
stack: 'x',
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: _this.yData2.area_color // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}]
)
},
itemStyle: {
color: _this.yData2.line_color
}
}
],
emphasis: {
disabled: true
}
})
}
}
}
</script>
<style scoped>
.towLineCharts {
width: 100%;
height: 468px;
}
</style>
src/views/data-statistics/other-components/overlong-tool.vue 0 → 100644
View file @ caf83372
<template>
<div>
<el-tooltip placement="top" effect="dark" :content="text" :disabled="text.length <= max">
<div>{{ text.length > max ? text.substring(0,max) + '...':text }}</div>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'OverlongTool',
props: ['text', 'max'],
data() {
return {}
},
watch: {},
created() {
// console.log('text', this.text.substring(0,this.max))
},
methods: {}
}
</script>
<style scoped>
</style>
src/views/data-statistics/other-components/percentTool.vue 0 → 100644
View file @ caf83372
<template>
<div>
<el-progress
v-if="percent > 0"
type="circle"
color="red"
:percentage="percentReal"
:stroke-width="strokeWidth"
stroke-linecap="square"
:format="formatPercent"
>
</el-progress>
<el-progress
v-else
type="circle"
color="#ebeef5"
:percentage="100 - percentReal"
:stroke-width="strokeWidth"
stroke-linecap="square"
:format="formatPercent"
define-back-color="red"
>
</el-progress>
</div>
</template>
<script>
export default {
name: 'PercentTool',
props: {
percent: {
type: Number,
default: 0
}
},
data() {
return {
percentReal: 0,
strokeWidth: 20
}
},
watch: {
// percent(newVal) {
// console.log('bal', newVal)
// if (newVal > 0) {
// this.percentReal = newVal
// } else {
// this.percentReal = 0 - newVal
// }
// }
},
created() {
if (this.percent > 0) {
this.percentReal = this.percent
} else {
this.percentReal = 0 - this.percent
}
},
methods: {
formatPercent(percentage) {
console.log('调用格式')
if (this.percent > 0) {
return '+' + this.percent + '%'
} else {
return this.percent + '%'
}
}
}
}
</script>
<style scoped>
</style>
src/views/data-statistics/other-components/progress-color.vue 0 → 100644
View file @ caf83372
<template>
<!-- 自定义svg , 在需要更改的地方使用即可 (目前作用于 设置 elementui 环形进度条的渐变色) -->
<svg width="100%" height="100%">
<defs>
<linearGradient id="youxiao" x1="0%" y1="0%" x2="100%" y2="0%">
<stop
offset="0%"
:style="{
'stop-color': '#7F37D1',
'stop-opacity':1
}"
/>
<stop
offset="100%"
:style="{
'stop-color': '#4F69EB',
'stop-opacity':1
}"
/>
</linearGradient>
<linearGradient id="changqi" x1="0%" y1="0%" x2="100%" y2="0%">
<stop
offset="0%"
:style="{
'stop-color': '#5FB54B',
'stop-opacity':1
}"
/>
<stop
offset="100%"
:style="{
'stop-color': '#3490CE',
'stop-opacity':1
}"
/>
</linearGradient>
<linearGradient id="yuchuzhi" x1="0%" y1="0%" x2="100%" y2="0%">
<stop
offset="0%"
:style="{
'stop-color': '#DB8747',
'stop-opacity':1
}"
/>
<stop
offset="100%"
:style="{
'stop-color': '#DE6859',
'stop-opacity':1
}"
/>
</linearGradient>
</defs>
</svg>
</template>
<script>
export default {
// props: {
// startColor: {
// type: String,
// default: 'rgb(2, 0, 255)'
// },
// endColor: {
// type: String,
// default: 'rgb(0, 200, 255)'
// }
// },
name: 'ProgressColor'
}
</script>
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