81 lines
1.5 KiB
Vue
81 lines
1.5 KiB
Vue
<template>
|
|
<div id="centerRight2">
|
|
<div class="bg-color-black">
|
|
<div class="d-flex pt-2 pl-2">
|
|
<span>
|
|
<icon name="align-left" class="text-icon"></icon>
|
|
</span>
|
|
<span class="fs-xl text mx-2">产品销售渠道分析</span>
|
|
</div>
|
|
<div class="d-flex ai-center flex-column body-box">
|
|
<dv-capsule-chart class="dv-cap-chart" :config="config" />
|
|
<centerRight2Chart1 />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import centerRight2Chart1 from '../components/echart/centerRight/centerRightChart'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
config: {
|
|
data: [
|
|
{
|
|
name: '南阳',
|
|
value: 167
|
|
},
|
|
{
|
|
name: '周口',
|
|
value: 67
|
|
},
|
|
{
|
|
name: '漯河',
|
|
value: 123
|
|
},
|
|
{
|
|
name: '郑州',
|
|
value: 55
|
|
},
|
|
{
|
|
name: '西峡',
|
|
value: 98
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
components: { centerRight2Chart1 }
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#centerRight2 {
|
|
$box-height: 410px;
|
|
$box-width: 340px;
|
|
padding: 5px;
|
|
height: $box-height;
|
|
width: $box-width;
|
|
border-radius: 5px;
|
|
.bg-color-black {
|
|
padding: 5px;
|
|
height: $box-height;
|
|
width: $box-width;
|
|
border-radius: 10px;
|
|
}
|
|
.text {
|
|
color: #c3cbde;
|
|
}
|
|
.body-box {
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
.dv-cap-chart {
|
|
width: 100%;
|
|
height: 160px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|