Skip to content

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

数据统计-宠主数据统计-前端部分

parent 5f59987f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1117 additions and 328 deletions
src/views/data-statistics/echars-components/columnarChart.vue
View file @ dbf55d83
...@@ -45,13 +45,16 @@ export default { ...@@ -45,13 +45,16 @@ export default {
} }
}, },
grid: { grid: {
x: 60, x: 50,
x2: 10, x2: 10,
y2: 40 y2: 40
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: _this.xData data: _this.xData,
axisLabel: {
interval: 0
}
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
...@@ -63,6 +66,9 @@ export default { ...@@ -63,6 +66,9 @@ export default {
tooltip: { tooltip: {
show: true, // 鼠标移入是否触发数据 show: true, // 鼠标移入是否触发数据
trigger: 'axis', // 出发方式 trigger: 'axis', // 出发方式
axisPointer: {
type: 'shadow'
},
formatter: (axis) => { formatter: (axis) => {
return `<div> return `<div>
<div>${axis[0].name}</div> <div>${axis[0].name}</div>
......
src/views/data-statistics/echars-components/crosswiseColumnarChart.vue 0 → 100644
View file @ dbf55d83
<template>
<div ref="CrosswiseColumnar" class="CrosswiseColumnarChart">
123
</div>
</template>
<script>
export default {
name: 'CrosswiseColumnarChart',
props: ['title', 'yData1', 'yData2', 'xData', 'unit'],
data() {
return {}
},
watch: {},
created() {
},
mounted() {
this.setChart()
},
methods: {
setChart() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.CrosswiseColumnar)
mapChart.setOption({
title: {
left: 'left',
text: _this.title,
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
left: 'right'
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + _this.unit
}
// boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: _this.xData
},
series: [
{
name: _this.yData1.name,
type: 'bar',
data: _this.yData1.data,
barWidth: '12px',
itemStyle: {
normal: {
barBorderRadius: [0, 20, 20, 0]
}
},
color: new this.$echarts.graphic.LinearGradient(
0, 0, 1, 0, [{ // 代表渐变色从正上方开始
offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
color: _this.yData1.startColor
}, // 柱图渐变色
{
offset: 1, // 指100%处的颜色
color: _this.yData1.endColor
}
])
},
{
name: _this.yData2.name,
type: 'bar',
data: _this.yData2.data,
barWidth: '12px',
itemStyle: {
normal: {
barBorderRadius: [0, 20, 20, 0]
}
},
color: new this.$echarts.graphic.LinearGradient(
0, 0, 1, 0, [{ // 代表渐变色从正上方开始
offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
color: _this.yData2.startColor
}, // 柱图渐变色
{
offset: 1, // 指100%处的颜色
color: _this.yData2.endColor
}
])
}
]
})
}
}
}
</script>
<style scoped>
.CrosswiseColumnarChart {
width: 100%;
height: 500px;
}
</style>
src/views/data-statistics/echars-components/crosswiseColumnarChartOneLine.vue 0 → 100644
View file @ dbf55d83
<template>
<div ref="CrosswiseColumnar" class="CrosswiseColumnarChart">
123
</div>
</template>
<script>
export default {
name: 'CrosswiseColumnarChartOneLine',
props: ['title', 'yData', 'xData', 'unit'],
data() {
return {}
},
watch: {},
created() {
},
mounted() {
this.setChart()
},
methods: {
setChart() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.CrosswiseColumnar)
mapChart.setOption({
title: {
left: 'left',
text: _this.title,
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
left: 'right'
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + _this.unit
}
// boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: _this.xData
},
series: [
{
name: _this.yData.name,
type: 'bar',
data: _this.yData.data,
barWidth: '12px',
itemStyle: {
normal: {
barBorderRadius: [0, 20, 20, 0]
}
},
color: new this.$echarts.graphic.LinearGradient(
0, 0, 1, 0, [{ // 代表渐变色从正上方开始
offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
color: _this.yData.startColor
}, // 柱图渐变色
{
offset: 1, // 指100%处的颜色
color: _this.yData.endColor
}
])
}
]
})
}
}
}
</script>
<style scoped>
.CrosswiseColumnarChart {
width: 100%;
height: 500px;
}
</style>
src/views/data-statistics/echars-components/radar-chart-for-platform-petowner.vue → src/views/data-statistics/echars-components/radar-chart-for-petowner-hospital.vue
View file @ dbf55d83
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<script> <script>
export default { export default {
name: 'RadarChartForPlatformPetOwner', name: 'RadarChartForPetOwnerHospital',
props: ['title', 'radarIndicatorData', 'radarLegendData'], props: ['yData1', 'yData2'],
data() { data() {
return {} return {}
}, },
...@@ -17,13 +17,13 @@ export default { ...@@ -17,13 +17,13 @@ export default {
}, },
methods: { methods: {
setCharts() { setCharts() {
// const _this = this const _this = this
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.radarMap) const mapChart = this.$echarts.init(this.$refs.radarMap)
mapChart.setOption({ mapChart.setOption({
title: { title: {
left: 'left', left: 'left',
text: '宠主绑定医院数量分析', text: '宠主宠物数量分析',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
...@@ -33,70 +33,10 @@ export default { ...@@ -33,70 +33,10 @@ export default {
}, },
tooltip: { tooltip: {
show: true 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: { legend: {
data: ['历史入驻量', '当前有效数量'], data: ['绑定宠物数量', '就诊宠物数量'],
left: 'right',
textStyle: { // 图例的公用文本样式。 textStyle: { // 图例的公用文本样式。
fontSize: 12, fontSize: 12,
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
...@@ -107,13 +47,13 @@ export default { ...@@ -107,13 +47,13 @@ export default {
radar: { radar: {
// shape: 'circle', // shape: 'circle',
center: ['50%', '55%'], center: ['50%', '55%'],
radius: 130, radius: 140,
indicator: [ indicator: [
{ name: '5000元以下', max: 50 }, { name: '1只', max: 50 },
{ name: '5000~12000元', max: 50 }, { name: '2只', max: 50 },
{ name: '12000~30000元', max: 50 }, { name: '3~4只', max: 50 },
{ name: '30000~100000元', max: 50 }, { name: '4~5只', max: 50 },
{ name: '100000元以上', max: 50 } { name: '5只以上', max: 50 }
], ],
axisName: { // (圆外的标签)雷达图每个指示器名称的配置项。 axisName: { // (圆外的标签)雷达图每个指示器名称的配置项。
color: '#666666', color: '#666666',
...@@ -128,8 +68,8 @@ export default { ...@@ -128,8 +68,8 @@ export default {
type: 'radar', type: 'radar',
data: [ data: [
{ {
value: [42, 30, 20, 35, 50, 18], value: _this.yData1,
name: '历史入驻量', name: '绑定宠物数量',
symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
symbolSize: 6, symbolSize: 6,
itemStyle: { itemStyle: {
...@@ -153,8 +93,8 @@ export default { ...@@ -153,8 +93,8 @@ export default {
} }
}, },
{ {
value: [50, 14, 28, 26, 42, 21], value: _this.yData2,
name: '当前有效数量', name: '就诊宠物数量',
symbol: 'emptyCircle', symbol: 'emptyCircle',
symbolSize: 6, symbolSize: 6,
itemStyle: { itemStyle: {
......
src/views/data-statistics/echars-components/radar-chart-for-petowner-platfrom.vue
View file @ dbf55d83
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<script> <script>
export default { export default {
name: 'RadarChartForPetOwnerPlatform', name: 'RadarChartForPetOwnerPlatform',
props: ['title', 'yData1', 'yData2'], props: ['yData1', 'yData2'],
data() { data() {
return {} return {}
}, },
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
}, },
legend: { legend: {
data: ['历史入驻量', '当前有效数量'], data: ['历史入驻量', '当前有效数量'],
left: 'right', left: 'center',
textStyle: { // 图例的公用文本样式。 textStyle: { // 图例的公用文本样式。
fontSize: 12, fontSize: 12,
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
......
src/views/data-statistics/echars-components/twoLineChart.vue
View file @ dbf55d83
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
} }
}, },
grid: { grid: {
x: 70, x: 80,
x2: 15 x2: 15
}, },
xAxis: { xAxis: {
...@@ -79,6 +79,7 @@ export default { ...@@ -79,6 +79,7 @@ export default {
axisLabel: { axisLabel: {
formatter: '{value}' + _this.yData1.unit formatter: '{value}' + _this.yData1.unit
} }
// containLabel: true
}, },
legend: { legend: {
x: 'right', x: 'right',
...@@ -122,7 +123,6 @@ export default { ...@@ -122,7 +123,6 @@ export default {
// symbol: 'circle', // 设置拐点为实心圆 // symbol: 'circle', // 设置拐点为实心圆
type: 'line', type: 'line',
smooth: true, smooth: true,
stack: 'x', // y轴是否从零开始
// 折线下区域的颜色 // 折线下区域的颜色
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
...@@ -142,7 +142,6 @@ export default { ...@@ -142,7 +142,6 @@ export default {
data: _this.yData2.data, data: _this.yData2.data,
type: 'line', type: 'line',
smooth: true, smooth: true,
stack: 'x',
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: _this.yData2.area_color // 0% 处的颜色 offset: 0, color: _this.yData2.area_color // 0% 处的颜色
......
src/views/data-statistics/hospital-data-statistics/hospital-data-statistics.vue
View file @ dbf55d83
...@@ -185,12 +185,6 @@ ...@@ -185,12 +185,6 @@
</el-col> </el-col>
<el-col :span="9"> <el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0px"> <div class="cardDiv" style="padding-bottom: 0px">
<!-- <div style="text-align: right;position: absolute;z-index: 10;width: 34%">-->
<!-- <el-radio-group v-model="radarSelect">-->
<!-- <el-radio-button label="lastYear" class="radioButton">去年</el-radio-button>-->
<!-- <el-radio-button label="currentYear" class="radioButton">今年</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<radar-chart-for-hospital <radar-chart-for-hospital
:y-data1="[42, 30, 20, 35, 50, 18]" :y-data1="[42, 30, 20, 35, 50, 18]"
:y-data2="[50, 14, 28, 26, 42, 21]" :y-data2="[50, 14, 28, 26, 42, 21]"
......
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