# The combination of virtual reality and reality realized by echarts broken line statistical chart

Time：2022-5-4

1. Demand scenario: realize the broken line statistical chart. If it includes today, today is represented by dotted line, and the rest is represented by solid line
2. Implementation idea: cut a line, such as 20210909 today, and divide it into two sections from 20210901 to 20210909, 20210901-20210908-20210909
3. Specific code implementation:

//Method of setting today as dotted line
//Data is the y-axis display data to be processed, and datedata is the x-axis data date
setDottedLine(data,dateData){
//Today
let nowTime = new Date()
let chooseYear = nowTime.getFullYear()
let chooseMonth = nowTime.getMonth() + 1
let chooseDate = nowTime.getDate()
if (chooseMonth < 10) chooseMonth = '0' + chooseMonth
if (chooseDate < 10) chooseDate = '0' + chooseDate
let today = `\${chooseYear}-\${chooseMonth}-\${chooseDate}`;
//Yesterday
let oneday = new Date(nowTime - 1 * 24 * 3600 * 1000);
let chooseYearonedayago = oneday.getFullYear()
let chooseMonthonedayago = oneday.getMonth() + 1
let chooseDateonedayago = oneday.getDate()
if (chooseMonthonedayago < 10) chooseMonthonedayago = '0' + chooseMonthonedayago
if (chooseDateonedayago < 10) chooseDateonedayago = '0' + chooseDateonedayago
let yesterday = `\${chooseYearonedayago}-\${chooseMonthonedayago}-\${chooseDateonedayago}`;
if(dateData.includes(today)){
let newObj = {}
let arraySolid = [];
let arrayDotted = [];
for(let i=0; i<dateData.length; i++){
if(dateData[i]==yesterday){
arraySolid.push(data[i])
arrayDotted.push(data[i])
}else if(dateData[i]==today){
arraySolid.push(null)
arrayDotted.push(data[i])
}else{
arraySolid.push(data[i])
arrayDotted.push(null)
}
}
this.\$ Set (newobj, 'arraysolid', arraysolid) // solid line
this.\$ Set (newobj, 'arraydotted', arraydotted) // dotted line
return newObj
}else{
return data
}
}

//Call

let ljyhDataResult = this.setDottedLine(ljyhData,xAxisData);
this.option.series = [
{
Name: 'cumulative users',
data: ljyhDataResult.arraySolid?ljyhDataResult.arraySolid:ljyhDataResult,
type: 'line',
symbolSize: 2,
smooth: 0.5,
yAxisIndex: 0
},
{
Name: 'cumulative users',
data: ljyhDataResult.arrayDotted?ljyhDataResult.arrayDotted:ljyhDataResult,
type: 'line',
symbolSize: 2,
smooth: 0.5,
yAxisIndex: 0,
lineStyle:{
normal:{
type:'dotted'
}
}
}
],

The problem of prompt box display needs to be solved. If the above code is adopted, the user’s tooltip will be accumulated twice, which needs to be de duplicated

//Prompt box
tooltip: {
trigger: 'axis',
formatter:function(params){
let str = '';
let newarray = [];
let contentarray = [];
for(let i=0;i<params.length;i++){
newarray.push(params[i].axisValue+'<br>')
if(params[i].data==undefined){

}else{
If (['activation rate a', 'activation rate B']. Includes (params [i]. Seriesname)){
newarray.push(params[i].marker+params[i].seriesName+":"+params[i].data+"%<br>");
}else{
newarray.push(params[i].marker+params[i].seriesName+":"+params[i].data+"<br>");
}
}
}
for(let i=0; i<newarray.length; i++){
if(contentarray.indexOf(newarray[i])==-1){
contentarray.push(newarray[i])
}
}
for(let i=0; i<contentarray.length;i++){
str+=contentarray[i];
}
return str;
}
},

## How to use 360 free WiFi? Introduction to 360 free WIFI

The so-called free WiFi application is actually a software that uses the local wireless network card to create WiFi hotspots with one click! It is convenient for other devices to share the Internet. Systems above win7 can also create virtual APS and WiFi hotspots, but the process and use are relatively troublesome. The function of […]