205 lines
4.6 KiB
Vue
205 lines
4.6 KiB
Vue
<template>
|
|
<div>
|
|
<TitleBox titleText="装备状态" @handleMore="handleMore" style="margin-bottom: 10px" />
|
|
<div ref="diamondChart" class="chart-container"></div>
|
|
|
|
<!-- 装备状态 -->
|
|
<EquipStatusMore ref="equipStatusMore" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TitleBox from '../TitleBox'
|
|
import * as echarts from 'echarts'
|
|
import { getEquipmentStatusApi } from '@/api/wsScreen/index'
|
|
import EquipStatusMore from '@/views/home/components/provincial/Dialog/EquipStatusMore'
|
|
|
|
export default {
|
|
name: 'Bottom1-1',
|
|
components: {
|
|
TitleBox,
|
|
EquipStatusMore,
|
|
},
|
|
data() {
|
|
return {
|
|
chartData: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
handleMore() {
|
|
this.$refs.equipStatusMore.openDialog()
|
|
},
|
|
async getList() {
|
|
try {
|
|
const res = await getEquipmentStatusApi()
|
|
console.log('🚀 ~ 装备状态 ~ res:', res)
|
|
if (!res.data) return
|
|
this.chartData = res.data.map((item) => {
|
|
return {
|
|
...item,
|
|
value: item.num,
|
|
}
|
|
})
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
} catch (error) {
|
|
console.log('🚀 ~ 装备状态 ~ error:', error)
|
|
}
|
|
},
|
|
initChart() {
|
|
const chartDom = this.$refs.diamondChart
|
|
const myChart = echarts.init(chartDom)
|
|
|
|
const xData = this.chartData.map((item) => item.name)
|
|
const BAR_COLOR_MAP = [
|
|
{
|
|
bottom: '#51ABF7',
|
|
top: '#78C5FF',
|
|
},
|
|
{
|
|
bottom: '#5EDDCA',
|
|
top: '#32E1C6',
|
|
},
|
|
{
|
|
bottom: '#FFB644',
|
|
top: '#FFC468',
|
|
},
|
|
{
|
|
bottom: '#FFAB6F',
|
|
top: '#F8AC86',
|
|
},
|
|
]
|
|
const seriesData = this.chartData.map((item, index) => {
|
|
const color = BAR_COLOR_MAP[index] || BAR_COLOR_MAP[0]
|
|
|
|
return {
|
|
value: item.value,
|
|
|
|
// ✅ 柱体颜色（静态）
|
|
itemStyle: {
|
|
borderRadius: [50, 50, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{ offset: 0, color: color.bottom },
|
|
{ offset: 1, color: color.top },
|
|
]),
|
|
},
|
|
|
|
// ✅ label 颜色（静态）
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
color: color.top,
|
|
formatter: `${item.value}/${item.proportion}%`,
|
|
},
|
|
}
|
|
})
|
|
|
|
const option = {
|
|
title: [
|
|
{
|
|
text: '单位：台',
|
|
left: '5%',
|
|
top: 0,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
],
|
|
|
|
graphic: [
|
|
{
|
|
type: 'group',
|
|
right: '6%',
|
|
top: 0,
|
|
children: [
|
|
// {
|
|
// type: 'rect',
|
|
// z: 100,
|
|
// left: 0,
|
|
// top: 3.5,
|
|
// shape: {
|
|
// width: 10,
|
|
// height: 5,
|
|
// },
|
|
// style: {
|
|
// fill: '#31B5C4',
|
|
// stroke: null,
|
|
// },
|
|
// },
|
|
// {
|
|
// type: 'text',
|
|
// z: 100,
|
|
// left: 20,
|
|
// top: 0,
|
|
// style: {
|
|
// text: '装备状态数',
|
|
// fill: '#999',
|
|
// font: '12px sans-serif',
|
|
// },
|
|
// },
|
|
],
|
|
},
|
|
],
|
|
|
|
grid: {
|
|
left: '16%',
|
|
right: '6%',
|
|
top: '16%',
|
|
bottom: '15%',
|
|
},
|
|
|
|
xAxis: {
|
|
data: xData,
|
|
axisTick: { show: false },
|
|
axisLine: { show: true },
|
|
axisLabel: {
|
|
interval: 0,
|
|
color: '#999',
|
|
fontSize: 14,
|
|
margin: 10,
|
|
},
|
|
},
|
|
|
|
yAxis: {
|
|
splitLine: { show: false },
|
|
axisTick: { show: true },
|
|
axisLine: { show: true },
|
|
axisLabel: {
|
|
color: '#999',
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
barWidth: 20, // 👉 宽度 = 28px
|
|
barMinHeight: 6,
|
|
z: 10,
|
|
data: seriesData,
|
|
},
|
|
],
|
|
}
|
|
|
|
myChart.setOption(option)
|
|
window.addEventListener('resize', () => myChart.resize())
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-container {
|
|
width: 100%; /* 宽度 */
|
|
height: 270px; /* 高度 */
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|