156 lines
3.4 KiB
Vue
156 lines
3.4 KiB
Vue
<template>
|
|
<div class="furnace-production-contribution">
|
|
<div class="chart-container">
|
|
<div id="furnaceChart" class="chart"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
|
|
export default {
|
|
name: 'FurnaceProductionContribution',
|
|
data() {
|
|
return {
|
|
furnaceData: [
|
|
{ name: '1#炉', value: 780 },
|
|
{ name: '2#炉', value: 950 },
|
|
{ name: '3#炉', value: 820 },
|
|
{ name: '4#炉', value: 580 },
|
|
{ name: '5#炉', value: 1200 },
|
|
{ name: '6#炉', value: 890 },
|
|
{ name: '7#炉', value: 720 },
|
|
{ name: '8#炉', value: 760 }
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initChart()
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
const chartDom = document.getElementById('furnaceChart')
|
|
const myChart = echarts.init(chartDom)
|
|
|
|
const option = {
|
|
backgroundColor: 'transparent',
|
|
grid: {
|
|
left: '8%',
|
|
right: '8%',
|
|
bottom: '15%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.furnaceData.map(item => item.name),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#1e3a8a'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#60a5fa',
|
|
fontSize: 12
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
max: 1600,
|
|
interval: 400,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#60a5fa',
|
|
fontSize: 12
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#1e3a8a',
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: this.furnaceData.map(item => item.value),
|
|
barWidth: '60%',
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#3b82f6'
|
|
}, {
|
|
offset: 1,
|
|
color: '#1e40af'
|
|
}]
|
|
},
|
|
borderRadius: [2, 2, 0, 0]
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#60a5fa'
|
|
}, {
|
|
offset: 1,
|
|
color: '#2563eb'
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
|
|
myChart.setOption(option)
|
|
|
|
// 响应式处理
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.furnace-production-contribution {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
border: 1px solid #1e3a8a;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|