| | |
| | | <!-- 任务算法统计 --> |
| | | <template> |
| | | <div class="task-industry"> |
| | | <div class="title">机巢事件前五数量占比</div> |
| | | <div class="title">机巢事件数量占比</div> |
| | | <div class="chart" ref="chartRef"></div> |
| | | </div> |
| | | </template> |
| | |
| | | left: 'center', |
| | | bottom: '2%', |
| | | textStyle: { |
| | | color: '#6B90B5', |
| | | color: '#363636', |
| | | fontSize: 12, |
| | | }, |
| | | itemWidth: 2, // 减小图例标记的宽度 |
| | |
| | | { |
| | | name: '机巢事件统计', |
| | | type: 'pie', |
| | | roseType: 'radius', |
| | | radius: ['20%', '70%'], |
| | | center: ['50%', '45%'], |
| | | // roseType: 'radius', |
| | | radius: ['36%', '60%'], |
| | | // center: ['50%', '45%'], |
| | | // radius: '70%', // 设置饼图的半径 |
| | | center: ['50%', '36%'], // 调整饼图位置 |
| | | data: [], |
| | | // [ |
| | | // { name: '国土类', value: 0, itemStyle: { color: '#3D7FFF' } }, |
| | | // { name: '城管类', value: 0, itemStyle: { color: '#8277E9' } }, |
| | | // { name: '消防类', value: 0, itemStyle: { color: '#FFB77E' } }, |
| | | // { name: '林业类', value: 0, itemStyle: { color: '#44D7B6' } }, |
| | | // { name: '公安类', value: 0, itemStyle: { color: '#62F4FF' } } |
| | | // ], |
| | | label: { |
| | | show: true, |
| | | position: 'outside', |
| | | formatter: '{c}', |
| | | fontSize: 12, |
| | | color: '#fff', |
| | | color: '#000', |
| | | }, |
| | | labelLine: { |
| | | show: true, |
| | | length: 5, |
| | | length2: 8, |
| | | length: 10, |
| | | length2: 10, |
| | | lineStyle: { |
| | | color: '#fff', |
| | | color: '#000', |
| | | }, |
| | | }, |
| | | }, |
| | |
| | | }) |
| | | } |
| | | |
| | | const changeKey = inject('changeKey') |
| | | // 添加监听 |
| | | watch( |
| | | () => store.state.task.taskSearchParams, |
| | | newVal => { |
| | | if (newVal) { |
| | | getIndustryJobNumPieChart(newVal) |
| | | } |
| | | }, |
| | | { deep: true } |
| | | () => [store.state.task.taskSearchParams,changeKey.value], |
| | | () => getIndustryJobNumPieChart(store.state.task.taskSearchParams), |
| | | { deep: true } |
| | | ) |
| | | |
| | | |
| | | onMounted(() => { |
| | | getIndustryJobNumPieChart({ date_enum: 'TODAY' }) |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .task-industry { |
| | | width: 276px; |
| | | width: 276px; |
| | | height: 100%; |
| | | background: #FFFFFF; |
| | | border-radius: 8px 8px 8px 8px; |
| | | margin-left: 9px; |
| | | margin-left: 10px; |
| | | |
| | | .title { |
| | | font-family: Segoe UI, Segoe UI; |
| | | padding: 10px 0 10px 16px; |
| | |
| | | color: #363636; |
| | | line-height: 18px; |
| | | } |
| | | |
| | | .chart { |
| | | width: 100%; |
| | | height: 180px; |