parent
4457094c83
commit
6022c6161d
@ -0,0 +1,121 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div>
|
||||||
|
<i class="el-icon-data-line"></i>
|
||||||
|
<span>产品收入统计</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="bar-chart"></div>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
<div>长护险重症: 100000</div>
|
||||||
|
<div>长护险中度: 150000</div>
|
||||||
|
<div>残疾人照护: 200000</div>
|
||||||
|
<div> 80岁+老人照护: 400000</div>
|
||||||
|
<div>自营单次: 5000</div>
|
||||||
|
<div>自营月度4次包: 6000</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.init()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.chart = echarts.init(document.getElementById('bar-chart'))
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
top: '6%',
|
||||||
|
left: '3%',
|
||||||
|
right: '6%',
|
||||||
|
bottom: '12%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
color: '#B7B9BF'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#B7B9BF',
|
||||||
|
width: '2'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: ['自营月度4次包', '自营单次', '80岁+老人照护', '残疾人照护', '长护险中度', '长护险重症']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: [6003, 5041, 4237, 3751, 2001, 1096],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#009DFF',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
#bar-chart {
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail{
|
||||||
|
&>div{
|
||||||
|
border-bottom: 1px rgba(210,210,210,0.7) solid;
|
||||||
|
|
||||||
|
padding: 6px 8px;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div>
|
||||||
|
<i class="el-icon-coin"></i>
|
||||||
|
<span>板块收入统计</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="doughnut-chart"/>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
<div>
|
||||||
|
长护险: 10000
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
80岁+老人照护: 10000
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
自营商业: 10000
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
总计: 30000
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.init()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.chart = echarts.init(document.getElementById('doughnut-chart'))
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '3%',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['46%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: '15',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 10408,
|
||||||
|
name: '长护险',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#00A82A'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 20000,
|
||||||
|
name: '残疾人照护',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#FF8522'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 9622,
|
||||||
|
name: '80岁+老人照护',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#2B50FF'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 4842,
|
||||||
|
name: '自营商业',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#F2A300'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-right: 40px;
|
||||||
|
|
||||||
|
#doughnut-chart {
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail{
|
||||||
|
&>div{
|
||||||
|
border-bottom: 1px rgba(210,210,210,0.7) solid;
|
||||||
|
|
||||||
|
padding: 6px 8px;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="display: flex;margin-top: 20px">
|
||||||
|
<doughnutChart></doughnutChart>
|
||||||
|
<barChart></barChart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import doughnutChart from './components/doughnutChart'
|
||||||
|
import barChart from "./components/barChart";
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
doughnutChart,
|
||||||
|
barChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue