最近的项目要求,让数据大屏都动起来。线型图增加了流动的光点
![](https://i-blog.csdnimg.cn/blog_migrate/5994bedd6a1ec1f6ffacd424074df5f7.png)
<div class="echarts-box" id="echart1"></div>
mounted() {
this.echarts_1();
},
methods: {
getDateBetween(start, end) {
var result = [];
//使用传入参数的时间
var startTime = new Date(start);
var endTime = new Date(end);
while (endTime - startTime >= 0) {
let year = startTime.getFullYear();
let month = startTime.getMonth();
month = month < 9 ? "0" + (month + 1) : month + 1;
let day =
startTime.getDate().toString().length == 1
? "0" + startTime.getDate()
: startTime.getDate();
//加入数组
result.push(day);
//更新日期
startTime.setDate(startTime.getDate() + 1);
}
// console.log(result)
return result;
},
echarts_1() {
let that = this;
var start = new Date();
start.setDate(start.getDate() - 19);
var data1 = [
36.1,
30.3,
32.6,
34.6,
35.6,
34.0,
37.8,
36.7,
36.9,
30.1,
37.8,
33.6,
36.1,
30.3,
32.6,
33.6,
35.6,
36.0,
37.8,
33.7
]
var data2 = [
21.1,
22.3,
21.6,
20.6,
22.6,
23.0,
20.8,
21.7,
22.9,
21.1,
23.8,
20.6,
22.1,
20.3,
23.6,
21.6,
24.6,
21.0,
20.8,
24.7
]
var data3 = [
26.1,
25.3,
25.6,
26.6,
27.6,
26.0,
27.8,
26.7,
25.9,
26.1,
27.8,
25.6,
26.1,
28.3,
26.6,
28.6,
25.6,
27.0,
26.8,
28.7
]
let result1 = [];
let result2 = [];
let result3 = [];
let x_data = that.getDateBetween(start, new Date());
for(let index in x_data){
result1.push( [ ""+x_data[index]+"" , data1[index]] );
result2.push( [ ""+x_data[index]+"" , data2[index]] );
result3.push( [ ""+x_data[index]+"" , data3[index]] );
}
console.log('光点',result1);
// console.log(111111111, that.getDateBetween(start, new Date()));
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("echart1"));
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#FAFC6C"
},
{
offset: 0.5,
color: "#0318BA"
},
{
offset: 1,
color: "#0FFFFF"
}
],
global: false
}
}
}
},
legend: {
icon: "circle",
itemWidth: 6,
itemHeight: 6,
itemGap: 20,
data: ["患者", "标本", "物品"],
textStyle: {
color: "#fff",
fontSize: "12"
}
},
grid: {
top: "15%",
left: "5%",
right: "5%",
bottom: "15%",
containLabel: true
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)"
}
},
data: that.getDateBetween(start, new Date())
}
],
yAxis: [
{
min: 15,
max: 40,
interval: 5,
type: "value",
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
name: "患者",
type: "line",
showAllSymbol: true,
symbol: "circle",
symbolSize: 7, //圆圈大小
lineStyle: {
normal: {
color: "#FAFC6C"
}
},
itemStyle: {
color: "#FAFC6C",
borderColor: "#fff",
borderWidth: 0 //圆圈边框宽度
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
false
)
}
},
data: data1
},
{
name: "标本",
type: "line",
showAllSymbol: true,
symbol: "circle",
symbolSize: 7,
lineStyle: {
normal: {
color: "#0318BA"
}
},
itemStyle: {
color: "#0318BA",
borderColor: "#fff",
borderWidth: 0
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, false)
}
},
data: data2
},
{
name: "物品",
type: "line",
showAllSymbol: true,
symbol: "circle",
symbolSize: 7,
lineStyle: {
normal: {
color: "#0FFFFF"
}
},
itemStyle: {
color: "#0FFFFF",
borderColor: "#fff",
borderWidth: 0
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, false)
}
},
data: data3
},
// 光点
{
name: '光点',
type: 'lines',
coordinateSystem: 'cartesian2d',
symbolSize: 10,
polyline: true, // 多线段
effect: {
show: true,
period:5,
trailLength:0.1,
symbolSize: 6,
symbol: 'circle',
color: '#feffc1',
},
lineStyle: {
normal: {
width: 1,
opacity: 0
}
},
// 光点
data: [{
coords: result1
}]
},
// 光点2
{
name: '光点',
type: 'lines',
coordinateSystem: 'cartesian2d',
symbolSize: 10,
polyline: true, // 多线段
effect: {
show: true,
period:5,
trailLength:0.1,
symbolSize: 6,
symbol: 'circle',
color: '#001dff',
},
lineStyle: {
normal: {
width: 1,
opacity: 0
}
},
// 光点
data: [{
coords: result2
}]
},
// 光点
{
name: '光点',
type: 'lines',
coordinateSystem: 'cartesian2d',
symbolSize: 10,
polyline: true, // 多线段
effect: {
show: true,
period:5,
trailLength:0.1,
symbolSize: 6,
symbol: 'circle',
color: '#a2ffff',
},
lineStyle: {
normal: {
width: 1,
opacity: 0
}
},
// 光点
data: [{
coords: result3
}]
},
],
};
// 绘制图表
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
},
}