echarts折线图汇总要点

1、过滤掉部分横坐标不展示


代码完整部分：

 xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
            axisLabel: {
              // 计算并展示部分横坐标
              formatter(name) {
                var showNames = [0, 6, 12, 18, 23]  // 界面上展示的小时时间为0,6，12,18,23 其他刻度均隐藏
                return (showNames.indexOf(Number(name)) === -1 ? '' : name)
              }
            },
            axisTick: {
              show: false // 去掉刻度线
            }
          },

2、总左边去掉网格线、刻度线、坐标值

yAxis: {
            splitLine: {
              show: true // 取消网格线
            },
            axisTick: {
              show: false // 去掉刻度线
            },
            axisLabel: {
              show: false // 取消坐标值
            }
          },

3、取消折点圆圈、是否为平滑曲线

 smooth: true, // true 为平滑曲线，false为直线
 symbol: 'none', // 取消折点圆圈

4、折线图的tooltip提示根据选择的年、月、日、季度进行变更

tooltip: {
              trigger: 'axis',
              formatter(params) {
                const num = ['第一季度', '第二季度', '第三季度', '第四季度']
                let html = ''
                if (type === '2') {
                  html += `<div>${moment(params[0].name).format('YYYY') + ' 第 ' + Number(moment(params[0].name).format('WW')) + ' 周'}</div>`
                }
                if (type === '3') {
                  html += `<div>${moment(params[0].name).format('YYYY') + '年' + Number(moment(params[0].name).format('M')) + '月'}</div>`
                }
                if (type === '4') {
                  html += `<div>${moment(params[0].name).format('YYYY') + '年' + num[moment(params[0].name).quarter() - 1]}</div>`
                }
                if (type === '1') {
                  html += `<div>${params[0].name }</div>`
                }
                params.forEach(v => {
                  html += `<div">
                            <div>
                                ${v.marker}
                                <span style="padding-left:15px; padding-right:10px;"> ${v.seriesName}:${v.value}</span>
                            </div>
                        </div>`
                })
                return html
              }
            },

5、计算并展示横坐标位置的值，年、月、日、季度
arrayDay为后端返回的横坐标值，自己再进行处理

axisLabel: {
                rotate: type === '1' ? 45 : 0,
                // 计算并展示部分横坐标
                formatter(name) {
                  if (type === '1') { //日
                    return (arrDay.indexOf(name.toString()) === -1 ? '' : name.substring(5, name.length))
                  }
                  if (type === '2') {
                    return moment(name).format('YYYY') + '年' + '\n' + ' 第 ' + Number(moment(name).format('WW')) + ' 周'
                  }
                  if (type === '3') {
                    return moment(name).format('YYYY') + '年' + '\n' + Number(moment(name).format('M')) + '月'
                  }
                  if (type === '4') {
                    const num = ['第一季度', '第二季度', '第三季度', '第四季度']
                    return moment(name).format('YYYY') + '年' + '\n' + num[moment(name).quarter() - 1]
                  }
                }
              },