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