<template>
<div class="content">
<div class="tittle">
<span> 标题 </span>
</div>
<div class="main" id="maina"></div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
myChart: undefined,
timer: null,
};
},
watch: {
arr: function (one, old) {
if (one !== old) {
this.createEcharts();
}
},
},
props: {
arr: {
type: Array,
},
},
methods: {
createEcharts() {
this.myChart = this.echarts.init(document.getElementById("maina"));
var option = {
grid: {
top: 30,
left: 70,
right: 20,
bottom: 35,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
axisLabel: {
textStyle: {
color: "#01B4FF",
},
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
},
},
axisLine: {
lineStyle: {
color: "#0A156E",
width: 1, //这里是为了突出显示加上的
},
},
},
yAxis: {
type: "value",
name: "单位(με)",
min: function (value) {
return value.min;
},
nameTextStyle: {
color: "#2BB6FF",
fontSize: 12,
},
axisLabel: {
textStyle: {
color: "#01B4FF",
},
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
},
},
axisLine: {
lineStyle: {
color: "#0A156E",
width: 1, //这里是为了突出显示加上的
},
},
},
series: [
{
data: this.list,
type: "line",
areaStyle: {},
symbol: "none",
smooth: true,
lineStyle: {
color: "#0090FF",
width: 2,
},
itemStyle: {
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0336FF",
},
{
offset: 1,
color: "rgba(0,144,255,0.1)",
},
]),
},
},
],
};
window.addEventListener("resize", () => {
this.myChart.resize();
});
// *********************重点代码********开始*****************
this.timer = setInterval(() => {
this.list = [];
this.arr.forEach((item) => {
this.list.push(item);
});
this.myChart.setOption({
series: [
{
data: this.list,
},
],
});
}, 1000);
// *********************重点代码********结束*****************
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(option);
},
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
},
};
</script>
<style lang="less" scoped>
.content {
margin-top: 17px;
width: 100%;
height: 30%;
background: url("../../assets/image/scienceBg.png") 0 0 no-repeat;
background-size: 100% 100%;
.main {
height: calc(100% - 43px);
width: 100%;
// border: 1px solid red;
}
.tittle {
background: url("../../assets/image/title.png") 0 0 no-repeat;
background-size: 100% 100%;
width: 80%;
height: 43px;
padding-top: 20px;
// position: absolute;
// left: 50%;
// top: 0;
// transform: translate(-50%);
margin: 0 auto;
text-align: center;
line-height: 0px;
position: relative;
span {
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #0096ff;
background: linear-gradient(
92deg,
#0072ff 0%,
#00eaff 48.8525390625%,
#01aaff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
</style>
eCharts 动态数据曲线时时变化
最新推荐文章于 2022-09-08 15:32:49 发布