| | |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | <div > |
| | | <div style="margin-right: 20px" > |
| | | <el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="选择月份" |
| | | @change="dateChange"> |
| | | </el-date-picker> |
| | | </div> |
| | | <div > |
| | | <el-select v-model="params.area" placeholder="区县" @change="getChart" clearable> |
| | | <el-option v-for="item in areaOption" :key="item.label" :label="item.label" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="chart-container"> |
| | |
| | | options: [ |
| | | {label: '省厅', value: 1}, |
| | | {label: '公安部', value: 2} |
| | | ], |
| | | areaOption:[ |
| | | {label:'自流井区',value:'510302'}, |
| | | {label:'贡井区',value:'510303'}, |
| | | {label:'大安区',value:'510304'}, |
| | | {label:'沿滩区',value:'510311'}, |
| | | {label:'荣县',value:'510321'}, |
| | | {label:'富顺县',value:'510322'}, |
| | | {label:'高新区',value:'510399'}, |
| | | ], |
| | | dataList: [], |
| | | } |
| | |
| | | } |
| | | }, |
| | | grid: { |
| | | left: 10, |
| | | left: 15, |
| | | right: 0, |
| | | bottom: 0, |
| | | top: '20%', |
| | | top:'10%', |
| | | containLabel: true |
| | | }, |
| | | legend: { |
| | |
| | | .data-chart-container { |
| | | height: 400px; |
| | | margin-bottom: 20px; |
| | | |
| | | .data-card { |
| | | height: 100%; |
| | | |
| | |
| | | } |
| | | |
| | | .title-container { |
| | | position: absolute; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | z-index: 2; |
| | | |
| | | padding: 15px 20px; /* 内边距控制高度和边距 */ |
| | | background: #fff; |
| | | border-bottom: 1px solid #eee; /* 分隔线增强视觉分离 */ |
| | | .more-button { |
| | | cursor: pointer; |
| | | font-size: 16px; |
| | |
| | | } |
| | | |
| | | .chart-container { |
| | | |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 80%; |
| | | |
| | | #chartContent { |
| | | width: 100%; |