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条和第5条的效果图

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]
                  }
                }
              },

贴上日、周、月、季度部分的折线图代码：
数据模式定义：

saleLineCraph: {
        type: '季度',
        x: ['第一季度', '第二季度', '第三季度', '第四季度'], // 横坐标
        y: [
          {
            name: '销售重量',
            data: [120, 132, 101, 134]
          },
          {
            name: '销售金额',
            data: [120, 132, 101, 134]
          }
        ]
      }

图部分的代码部分：
val，为选择的曲线名字，比如说选择了销售金额、销售总量
type, 为日、周、月、季度的类型

// 指数看板折线图
    getSaleLineCraph(val, type) {
      this.loadingCheckbox = true
      const arrDay = []
      if (type === '1') {
        this.saleLineCraph.x.forEach((v, index) => {
          if (index % 5 === 0) {
            arrDay.push(v.toString())
          }
        })
      }
      setTimeout(() => {
        this.loadingCheckbox = false
        const seriesList = []
        this.saleLineCraph.y.forEach((v, index) => {
          if (val && val.includes(v.name)) {
            const obj = {
              smooth: true, // true 为平滑曲线，false为直线
              symbol: 'none', // 取消折点圆圈
              name: v.name,
              type: 'line',
              data: v.value
            }
            seriesList.push(obj)
          }
        })
        setTimeout(() => {
          var pie = echarts.init(document.getElementById('saleTimeLineCraph'))
          var option = {
            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
              }
            },
            color: ['#2B6BFF', '#FF584D', '#FFA94D', '#00AACC', '#826AF8'],
            legend: {
              left: 0,
              data: val
            },
            grid: { left: '3%', right: '3%', bottom: '0%', containLabel: true },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.saleLineCraph.x,
              left: 50,
              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]
                  }
                }
              },
              axisTick: {
                show: false // 去掉刻度线
              }
            },
            yAxis: {
              splitLine: {
                show: true // 取消网格线
              },
              axisTick: {
                show: false // 去掉刻度线
              },
              axisLabel: {
                show: false // 取消坐标值
              }
            },
            series: seriesList
          }
          pie.setOption(option)
          window.addEventListener('resize', () => {
            pie.resize()
          })
        }, 500)
      }, 200)
    },