Skip to content

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

数据统计-医院数据统计-前端部分

parent ed1770e9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 836 additions and 25 deletions
src/views/data-statistics/echars-components/china-map.vue
View file @ 85e942fc
<template>
<div class="chinaecharts">
<div id="mapChart" ref="mapChart" />
</div>
<div ref="mapChart" class="chinaecharts" />
</template>
<script>
......@@ -27,11 +25,18 @@ export default {
const mapChart = this.$echarts.init(this.$refs.mapChart)
mapChart.setOption({
backgroundColor: '', // 背景颜色
// borderWidth: 4, // 设置外层边框
// borderColor: '#f8911b',
title: {
text: '',
subtext: '',
color: '#fff',
x: 'center'
text: '医院所在城市分析',
left: 'left',
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
// 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
visualMap: {
......@@ -72,7 +77,7 @@ export default {
label: '1-99人',
color: '#BCDBB4'
},
{ lte: 0, label: '无', color: '#FAFAFA' } // 不指定 min，表示 min 为无限大（-Infinity）。
{ lte: 0, label: '无', color: '#fff' } // 不指定 min，表示 min 为无限大（-Infinity）。
],
textStyle: {
color: '#737373'
......@@ -83,7 +88,6 @@ export default {
show: true, // 鼠标移入是否触发数据
trigger: 'item', // 出发方式
formatter: (item) => {
console.log('itemData', item)
const unit = _this.unit
const percent = item.data.value / _this.sum * 100
return `<div>
......@@ -93,6 +97,34 @@ export default {
</div>`
}
},
// 配置地图样式
geo: {
top: '20%',
show: true,
zoom: 1.3,
map: 'china',
silent: true,
aspectScale: 0.75, // 长宽比,默认0.75
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
// areaColor: 'yellow',
borderWidth: 2.5, // 设置外层边框
borderColor: '#767676'
// shadowColor: 'red', //#A0A2A5 外边框阴影色
// shadowBlur: 10, //外边框阴影
// opacity: 1
}
}
},
// 配置地图的数据，并且显示
series: [
{
......@@ -169,12 +201,8 @@ export default {
<style scoped>
.chinaecharts {
width: 100%;
height: 100%;
/*background-color: #333;*/
}
#mapChart {
width: 100%;
height: 500px;
/*background-color: #333;*/
}
</style>
src/views/data-statistics/echars-components/columnarChart.vue 0 → 100644
View file @ 85e942fc
<template>
<div ref="columnar" class="columnarCharts" />
</template>
<script>
export default {
name: 'ColumnarChart',
props: ['title', 'startColor', 'endColor', 'label', 'unit', 'xData', 'yData', 'name'],
data() {
return {}
},
watch: {},
created() {
},
mounted() {
this.setEcharts()
},
methods: {
setEcharts() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.columnar)
mapChart.setOption({
title: {
left: 'left',
text: _this.title,
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
legend: {
show: true,
// data: ['历史入驻量', '当前有效数量'],
left: 'right',
textStyle: { // 图例的公用文本样式。
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#666'
}
},
grid: {
x: 60,
x2: 10,
y2: 40
},
xAxis: {
type: 'category',
data: _this.xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + _this.unit
}
},
// 悬浮框样式
tooltip: {
show: true, // 鼠标移入是否触发数据
trigger: 'axis', // 出发方式
formatter: (axis) => {
return `<div>
<div>${axis[0].name}</div>
<div style="display: flex">
<div style="background-image: linear-gradient(to bottom, ${_this.startColor}, ${_this.endColor});;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
<span>${_this.label}</span>
<span style="
margin-left: 5px;
background-image: -webkit-linear-gradient(top, ${_this.startColor}, ${_this.endColor});
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;">
${axis[0].value}(${_this.unit})</span>
</div>
</div>`
}
},
series: [
{
data: _this.yData,
barWidth: '12px',
type: 'bar',
name: _this.name,
itemStyle: {
normal: {
barBorderRadius: [20, 20, 0, 0]
}
},
color: new this.$echarts.graphic.LinearGradient(
0, 1, 0, 0, [{ // 代表渐变色从正上方开始
offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
color: _this.endColor
}, // 柱图渐变色
{
offset: 1, // 指100%处的颜色
color: _this.startColor
}
]),
label: {
show: true,
position: 'top',
textStyle: {
color: '#3490CD',
fontSize: 12,
fontWeight: 'bold'
},
formatter: '{c}' + _this.unit
}
}
]
})
}
}
}
</script>
<style scoped>
.columnarCharts {
width: 100%;
height: 500px;
}
</style>
src/views/data-statistics/echars-components/radar-chart-for-hospital.vue 0 → 100644
View file @ 85e942fc
<template>
<div ref="radarMap" class="radarChart">
雷达
</div>
</template>
<script>
export default {
name: 'RadarChartForHospital',
props: ['title', 'radarIndicatorData', 'radarLegendData'],
data() {
return {}
},
watch: {},
mounted() {
this.setCharts()
},
methods: {
setCharts() {
// const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.radarMap)
mapChart.setOption({
title: {
left: 'left',
text: '医院评级分布',
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
}
},
tooltip: {
show: true
},
legend: {
data: ['历史入驻量', '当前有效数量'],
left: 'right',
textStyle: { // 图例的公用文本样式。
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#666'
}
},
radar: {
// shape: 'circle',
center: ['50%', '55%'],
radius: 140,
indicator: [
{ name: '一星诊疗机构', max: 50 },
{ name: '二星诊疗机构', max: 50 },
{ name: '三星诊疗机构', max: 50 },
{ name: '四星诊疗机构', max: 50 },
{ name: '五星诊疗机构', max: 50 }
],
axisName: { // (圆外的标签)雷达图每个指示器名称的配置项。
color: '#666666',
fontSize: 12,
fontWeight: 400,
fontFamily: 'Microsoft YaHei'
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [42, 30, 20, 35, 50, 18],
name: '历史入驻量',
symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
symbolSize: 6,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: '#7245D9' },
{ offset: 1, color: '#5A5FE6' }
]
)
},
// 雷达图辐射区域的样式
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(114, 69, 217, 0.3)' },
{ offset: 1, color: 'rgba(90, 95, 230, 0.3)' }
]
)
}
},
{
value: [50, 14, 28, 26, 42, 21],
name: '当前有效数量',
symbol: 'emptyCircle',
symbolSize: 6,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: '#3994C1' },
{ offset: 1, color: '#5BB158' }
]
)
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(57, 148, 193, 0.3)' },
{ offset: 1, color: 'rgba(91, 177, 88, 0.3)' }
]
)
}
}
]
}
]
})
}
}
}
</script>
<style scoped>
.radarChart {
width: 100%;
height: 500px;
}
</style>
src/views/data-statistics/echars-components/radar-chart-for-platform-petowner.vue 0 → 100644
View file @ 85e942fc
<template>
<div ref="radarMap" class="radarChart">
雷达
</div>
</template>
<script>
export default {
name: 'RadarChartForPlatformPetOwner',
props: ['title', 'radarIndicatorData', 'radarLegendData'],
data() {
return {}
},
watch: {},
mounted() {
this.setCharts()
},
methods: {
setCharts() {
// const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.radarMap)
mapChart.setOption({
title: {
left: 'left',
text: '宠主绑定医院数量分析',
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
}
},
tooltip: {
show: true
// formatter: function(item) {
// console.log('radarItem', item)
// return `<div>
// <div>${item.name}</div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>5000元以下</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[0]}</div>
// </div>
// </div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>5000~12000元</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[1]}</div>
// </div>
// </div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>12000~30000元</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[2]}</div>
// </div>
// </div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>530000~100000元</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[3]}</div>
// </div>
// </div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>100000元以上</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[4]}</div>
// </div>
// </div>
// </div>`
// }
},
legend: {
data: ['历史入驻量', '当前有效数量'],
textStyle: { // 图例的公用文本样式。
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#666'
}
},
radar: {
// shape: 'circle',
center: ['50%', '55%'],
radius: 130,
indicator: [
{ name: '5000元以下', max: 50 },
{ name: '5000~12000元', max: 50 },
{ name: '12000~30000元', max: 50 },
{ name: '30000~100000元', max: 50 },
{ name: '100000元以上', max: 50 }
],
axisName: { // (圆外的标签)雷达图每个指示器名称的配置项。
color: '#666666',
fontSize: 12,
fontWeight: 400,
fontFamily: 'Microsoft YaHei'
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [42, 30, 20, 35, 50, 18],
name: '历史入驻量',
symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
symbolSize: 6,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: '#7245D9' },
{ offset: 1, color: '#5A5FE6' }
]
)
},
// 雷达图辐射区域的样式
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(114, 69, 217, 0.3)' },
{ offset: 1, color: 'rgba(90, 95, 230, 0.3)' }
]
)
}
},
{
value: [50, 14, 28, 26, 42, 21],
name: '当前有效数量',
symbol: 'emptyCircle',
symbolSize: 6,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: '#3994C1' },
{ offset: 1, color: '#5BB158' }
]
)
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(57, 148, 193, 0.3)' },
{ offset: 1, color: 'rgba(91, 177, 88, 0.3)' }
]
)
}
}
]
}
]
})
}
}
}
</script>
<style scoped>
.radarChart {
width: 100%;
height: 500px;
}
</style>
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