echarts折线统计图实现虚实结合
1、需求场景： 实现折线统计图，如果包含今天，今天用虚线表示，其余用实线
2、实现思路： 将一条线进行切割，如今天是20210909，从20210901到20210909的区间将其分割为两段为20210901-20210908,20210908-20210909
3、具体代码实现：
//今天设为虚线的方法
//data需要处理的y轴显示数据，dateData为x轴数据-日期
setDottedLine(data,dateData){
//今天
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}`;
//昨天
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//调用
let ljyhDataResult = this.setDottedLine(ljyhData,xAxisData);
this.option.series = [
{
name: '累计用户',
data: ljyhDataResult.arraySolid?ljyhDataResult.arraySolid:ljyhDataResult,
type: 'line',
symbolSize: 2,
smooth: 0.5,
yAxisIndex: 0
},
{
name: '累计用户',
data: ljyhDataResult.arrayDotted?ljyhDataResult.arrayDotted:ljyhDataResult,
type: 'line',
symbolSize: 2,
smooth: 0.5,
yAxisIndex: 0,
lineStyle:{
normal:{
type:'dotted'
}
}
}
],
需要解决提示框显示的问题，采用以上代码会出现两次累计用户的tooltip，需要去重
// 提示框
tooltip: {
trigger: 'axis',
formatter:function(params){
let str = '';
let newarray = [];
let contentarray = [];
for(let i=0;
i【echarts折线统计图实现虚实结合】')
if(params[i].data=https://www.it610.com/article/=undefined){}else{
if(['激活率a','激活率b'].includes(params[i].seriesName)){
newarray.push(params[i].marker+params[i].seriesName+":"+params[i].data+"%
");
}else{
newarray.push(params[i].marker+params[i].seriesName+":"+params[i].data+"
");
}
}
}
for(let i=0;
i推荐阅读
- 杭电oj——2030汉字统计
- 概率论/统计学|随机变量 的 分布函数 与 概率密度函数 的区别
- 临床统计学学习日志
- 用python统计小说出现频率最高的词语
- iOS|iOS runtime应用整理
- 开始你的第一个Echarts图表（分享自知乎网）
- 12.新增腾讯的统计（以渠道来源说明）
- Python日志_20211019_1631
- 【精力管理实验】精力统计day3
- 不要轻易尝试用wc|不要轻易尝试用wc -l统计Windows系统出产文件的滋味