# 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') if(params[i].data==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 ```
``` ```
``` ```
``` ```
``` ```
``` ```
``` ```
``` ```
``` 你可能感兴趣的 解读Servlet原理篇二---GenericServlet与HttpServlet 周凡杨 javaHttpServlet源理GenericService源码 MySQL性能优化 bijian1013 数据库mysql ThreadPool定时重试 dai_lm javaThreadPoolthreadtimertimertask Oracle 查看数据库的连接情况 周凡杨 sqloracle 连接 类的继承 朱辉辉33 java android 悬浮窗特效 肆无忌惮_ android hadoop伪分布式搭建 林鹤霄 hadoop gdb调试命令 aigo gdb 按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他 首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉 版权所有 IT知识库 CopyRight © 2000-2050 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号 ```