114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
|
<template>
|
|||
|
|
<div id="center">
|
|||
|
|
<dv-border-box-13>
|
|||
|
|
<div class="dvrow">
|
|||
|
|
<div>
|
|||
|
|
<span class="title-span">进出库情况</span>
|
|||
|
|
</div>
|
|||
|
|
<div>2023-12-01</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="myChart22" :style="{width: '500px', height: '170px'}"></div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "hello",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
msg: "45",
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.drawLine();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
drawLine() {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
let myChart = this.$echarts.init(document.getElementById("myChart22"));
|
|||
|
|
// 绘制图表
|
|||
|
|
myChart.setOption({
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff", // 设置文字颜色
|
|||
|
|
fontSize:'14px'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
type: "shadow",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
legend: {},
|
|||
|
|
grid: {
|
|||
|
|
top: "15%",
|
|||
|
|
left: "3%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "1%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: ["原料五", "原料四", "原料三", "原料二", "原料一"],
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "入库",
|
|||
|
|
type: "bar",
|
|||
|
|
stack: "total",
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
focus: "series",
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "rgba(102, 153, 255, 1)", // 设置入库的颜色
|
|||
|
|
},
|
|||
|
|
data: [2000, 4000, 6000, 4000, 6000],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "出库",
|
|||
|
|
type: "bar",
|
|||
|
|
stack: "total",
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
focus: "series",
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "rgba(51, 204, 153, 1)", // 设置出库的颜色
|
|||
|
|
},
|
|||
|
|
data: [4500, 8000, 9800, 10500, 12000],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
#center {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.dv-border-box-13 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 200px;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
.dvrow {
|
|||
|
|
height: 5px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|