140 lines
3.4 KiB
Vue
140 lines
3.4 KiB
Vue
<template>
|
|
<div ref="chartRef" :style="{ height: height, width: width }" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getCurrentInstance, watch, onMounted, ref } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
import theme from '../theme/chalk.json'
|
|
echarts.registerTheme('theme', theme)
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
echarts.use([CanvasRenderer])
|
|
const { proxy } = getCurrentInstance()
|
|
const chartRef = ref(null)
|
|
const props = defineProps({
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '350px'
|
|
}
|
|
})
|
|
let options = {
|
|
title: {
|
|
text: '',
|
|
left: 'left'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
data: [],
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
// 图例
|
|
legend: {
|
|
type: 'scroll',
|
|
top: 'top',
|
|
width: '60%',
|
|
right: '0%'
|
|
},
|
|
series: [
|
|
]
|
|
}
|
|
const chart = ref(null)
|
|
function initChart() {
|
|
chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
|
|
chart.value.setOption(options)
|
|
}
|
|
onMounted(() => {
|
|
initChart()
|
|
window.addEventListener('resize', () => {
|
|
chart.value?.resize()
|
|
})
|
|
})
|
|
/// ============ 修改数据 ===========
|
|
import { getBarProcessProductStatistic } from '@/api/smartScreen/ReportScreen/index.js'
|
|
function updateData() {
|
|
getBarProcessProductStatistic().then((res) => {
|
|
if (res.code === 200) {
|
|
options.title = res.data.title
|
|
options.xAxis.data = res.data.xAxis.data
|
|
let _series = res.data.series
|
|
|
|
_series.forEach((item) => {
|
|
item.label = {
|
|
show: true,
|
|
position: 'top',
|
|
textBorderColor: '#fff',
|
|
textBorderWidth: 0,
|
|
formatter: '{c}',
|
|
color: '#fff'
|
|
}
|
|
// 定义一组颜色
|
|
const colors = [
|
|
"#00b894",
|
|
"#fdcb6e",
|
|
"#ff7675",
|
|
"#6c5ce7",
|
|
"#00cec9",
|
|
"#ffeaa7",
|
|
"#fab1a0",
|
|
"#ffbe76",
|
|
"#74b9ff",
|
|
"#55efc4",
|
|
"#a29bfe",
|
|
"#d63031",
|
|
"#fd79a8",
|
|
"#00bfa5",
|
|
"#e17055"
|
|
];
|
|
item.data.forEach((dataItem, index) => (
|
|
dataItem.itemStyle = {
|
|
color: colors[index % colors.length] // 使用与系列相同的颜色逻辑
|
|
}
|
|
))
|
|
})
|
|
console.log(_series);
|
|
options.series = _series
|
|
chart.value.setOption(options)
|
|
}
|
|
})
|
|
}
|
|
function handleQuery() {
|
|
updateData()
|
|
}
|
|
handleQuery()
|
|
let timer1 = null
|
|
const clearSearchTimer = () => {
|
|
clearInterval(timer1)
|
|
timer1 = null
|
|
}
|
|
const createSearchTimer = () => {
|
|
clearSearchTimer()
|
|
timer1 = setInterval(() => {
|
|
handleQuery()
|
|
}, 1000 * 60 * 5)
|
|
}
|
|
onMounted(() => {
|
|
createSearchTimer()
|
|
})
|
|
onUnmounted(() => {
|
|
clearSearchTimer()
|
|
})
|
|
/// ==========================================
|
|
</script>
|