160 lines
4.9 KiB
Vue
160 lines
4.9 KiB
Vue
<template>
|
||
<div class="historyInfo-div">
|
||
<div id="line"></div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import * as echarts from "echarts";
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
getCharts();
|
||
})
|
||
})
|
||
var colors = ['#1890FF', '#24CDFB'];
|
||
const getCharts = () => {
|
||
var dom = document.getElementById("line");
|
||
if (dom) {
|
||
// 手动移除该属性
|
||
dom.removeAttribute('_echarts_instance_')
|
||
var myChart = echarts.init(dom);
|
||
let option = {
|
||
title: {
|
||
text: ''
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
textStyle: {
|
||
color: "#ffff",
|
||
fontFamily: "Alibaba PuHuiTi",
|
||
fontSize: 14,
|
||
fontWeight: 400,
|
||
},
|
||
},
|
||
grid: {
|
||
top: '24%',
|
||
left: '5%',
|
||
right: '8%',
|
||
// bottom: '2%',
|
||
height: '80%',
|
||
containLabel: true
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1
|
||
}
|
||
},
|
||
splitLine: {
|
||
// 网格线
|
||
lineStyle: {
|
||
type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
|
||
color: "#29507E",
|
||
},
|
||
show: true,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff", //X轴字体颜色
|
||
fontSize: "12", //X轴字体大小
|
||
},
|
||
},
|
||
show: true,
|
||
maxInterval: 50000 //值坐标最大的数值间隔 最小同样min
|
||
}
|
||
],
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 0
|
||
}
|
||
},
|
||
show: false,
|
||
position: 'bottom',
|
||
},
|
||
{
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff", //X轴字体颜色
|
||
fontSize: "12", //X轴字体大小
|
||
},
|
||
},
|
||
position: 'bottom',
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '温度',
|
||
type: 'line',
|
||
color: colors[0],
|
||
barWidth: 18,
|
||
// xAxisIndex:1,
|
||
data: [82, 34, 90, 104, 31, 100, 82, 34, 90, 104, 31, 100],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
color: colors[0],
|
||
},
|
||
position: "top",
|
||
},
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '压力',
|
||
type: 'line',
|
||
color: colors[1],
|
||
// xAxisIndex:1,
|
||
data: [193, 234, 310, 121, 134, 181, 193, 234, 310, 121, 134, 181],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
color: colors[1],
|
||
},
|
||
position: "top",
|
||
},
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.historyInfo-div {
|
||
width: 100%;
|
||
height: 80%;
|
||
|
||
#line {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style> |