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> |