162 lines
3.4 KiB
Vue
162 lines
3.4 KiB
Vue
<template>
|
|
<div class="alarmToday" :id="id" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { fitChartSize } from '@/utils/dataUtil'
|
|
import { useEchart } from '@/hooks/echart'
|
|
|
|
const props = defineProps({
|
|
config: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
dataList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
total: {
|
|
type: Number,
|
|
default: () => 123456
|
|
},
|
|
colors: {
|
|
type: Array,
|
|
default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
|
}
|
|
})
|
|
|
|
const { id, setOption } = useEchart()
|
|
|
|
const color = ['#409eff', '#29c9c8', '#f6b936']
|
|
|
|
var params = {
|
|
color: ['#70bfe5', '#eb6a6c', '#f9c942', '#91c974', '#5a6ac0'],
|
|
// legend: {
|
|
// data: ['1月', '2月', '3月', '4月', '5月'],
|
|
// itemGap: 15,
|
|
// itemWidth: 10, // 设置宽度
|
|
// itemHeight: 10,
|
|
// top: '40',
|
|
// right: '30',
|
|
// textStyle: {
|
|
// color: '#595959'
|
|
// }
|
|
// },
|
|
grid: {
|
|
left: '4%',
|
|
right: '4%',
|
|
bottom: '5%',
|
|
top: '12%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
name: '月份',
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: false
|
|
},
|
|
axisLabel: {
|
|
padding: [25, 0, 0, 0]
|
|
},
|
|
data: ['1月', '2月', '3月', '4月', '5月']
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
|
|
axisLabel: {
|
|
formatter: function (params) {
|
|
return params
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: []
|
|
}
|
|
var datas = [
|
|
[
|
|
[10, 1, 1, 2, 3],
|
|
[2, 11, 7, 1, 1],
|
|
[5, 7, 5, 1, 1]
|
|
],
|
|
[
|
|
[1, 1, 1, 2, 3],
|
|
[2, 5, 7, 1, 1],
|
|
[5, 7, 5, 1, 1]
|
|
],
|
|
[
|
|
[1, 1, 1, 2, 3],
|
|
[2, 5, 7, 1, 1],
|
|
[5, 7, 5, 1, 1]
|
|
]
|
|
]
|
|
|
|
// 变量和循环处理
|
|
var categories = ['1月', '2月', '3月']
|
|
var years = ['应完成xxx']
|
|
for (var i = 0; i < years.length; i++) {
|
|
var yearData = datas[i] // 获取对应年份的数据
|
|
var seriesData = [] // 用于存储每个年份对应的系列数据
|
|
for (var j = 0; j < categories.length; j++) {
|
|
var itemData = []
|
|
for (var k = 0; k < yearData[j].length; k++) {
|
|
itemData.push(yearData[j][k])
|
|
}
|
|
seriesData.push({
|
|
type: 'bar',
|
|
stack: 'stack' + (i + 1),
|
|
barGap: 0.5,
|
|
barWidth: 20,
|
|
label: {
|
|
show: true,
|
|
// position: 'insideTop',
|
|
align: 'center',
|
|
formatter: function (param) {
|
|
return param.value
|
|
}
|
|
},
|
|
data: itemData,
|
|
name: categories[j]
|
|
})
|
|
}
|
|
Array.prototype.push.apply(params.series, seriesData)
|
|
}
|
|
|
|
const init = () => {
|
|
setOption(params)
|
|
}
|
|
// watch(
|
|
// () => props.dataList,
|
|
// (newVal) => {
|
|
// if (newVal.length > 0) {
|
|
// nextTick(() => {
|
|
// defaultCofig.color = props.colors
|
|
// defaultCofig.series[0].data = props.dataList
|
|
// defaultCofig.series[0].label.formatter = () => {
|
|
// return `{value|${props.total}}` + '\n' + `{name|工单总数}`
|
|
// }
|
|
// setOption({
|
|
// ...defaultCofig,
|
|
// ...props.config
|
|
// })
|
|
// })
|
|
// }
|
|
// },
|
|
// { immediate: true }
|
|
// )
|
|
onMounted(() => {
|
|
init()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.alarmToday {
|
|
width: vw(400);
|
|
height: vh(200);
|
|
}
|
|
</style>
|