折线图展示任意位置数据

1.当时有个需求，需要展示最大值最小值，平均值以及，x轴等分，标点

由于平均值有箭头，使用了symbol:none仍然处理不了，于是考虑增加两个点，然后使用连线来解决平均值，以及标点会有水滴状背景，也做了处理

this.lineData = [
          {
            x: 1,
            y: 21,
          },
          {
            x: 41,
            y: 70,
          },
          {
            x: 57,
            y: 90,
          },
          {
            x: 60,
            y: 77,
          },
          {
            x: 121,
            y: 99,
          },
        ]
this.$nextTick(() => {
          this.getStuScoreLine(this.lineData,[{x: 1,y:80},{x: 121,y:80}],[{x: 1,y:40},{x: 121,y:40}])
        })
getStuScoreLine(lineData = [], year = [], personal = []) {
      var chartDom = document.getElementById('line');
      var myChart = echarts.init(chartDom);
      let data = []
      let yearAvg = []
      let personalAvg = []
      // 将数据处理一次 转换成与x轴对应的数据格式
      lineData.forEach(item => {
        data.push([(item.x-1)/8 + 1,item.y])
      })
      year.forEach(item => {
        yearAvg.push([(item.x-1)/8 + 1,item.y])
      })
      personal.forEach(item => {
        personalAvg.push([(item.x-1)/8 + 1,item.y])
      })
      let option = {
        color: ['#ffc935','#4e5486','#73cd18'],
        legend: {
          top: 10,
        },
        grid: {
          top: '30%',
          left: '10%',
          right: '5%',
          bottom: '10%',
        },
        tooltip: {
          trigger: 'axis',
          // 标点展示的数据
          formatter: function(a) {
            let list = []
            let listItem = ''
            for (var i = 0; i < a.length; i++) {
              list.push(
                '<span style="display: inline-block;padding: 5px 0;" >' +
                '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                a[i].color +
                ';border-radius: 50%;}"></i><span style="width:5px; display:inline-block;">' +
                '</span>' +
                a[i].seriesName +
                '&nbsp&nbsp' +
                a[i].data[1] +
                '</span>'
              )
            }
            listItem = list.join('<br/>')
            return '<div style="padding:6px;">' + listItem + '</div>'
          }
        },
        xAxis: {
          type: 'value',
          boundaryGap: false,
          // 将x轴数据处理成需要展示的字段 1 9 17累加8，初始值1
          splitNumber: 16,
          min: 1,
          max: 16,
          splitLine: {show: false},
          axisLabel: {
            formatter: function(value) {
              if(value == 1) {
                return 1;
              }else {
                return 1 + 8*(value - 1);
              }
            },
            rotate: 45
          },
        },
        yAxis: {
          type: 'value',
          splitNumber: 10,
          min: 0,
          max: 100,
          splitLine: {show: false},
        },
        series: [
          {
            name: '年级平均',
            type: 'line',
            symbol: 'circle',
            symbolSize: 2,
            data: yearAvg,
            showSymbol: false,
          },
          {
            name: '射击成绩',
            type: 'line',
            symbol: 'circle',
            showSymbol: false,
            data: data,
            // 最大值 最小值 
            markPoint: {
              symbol: 'circle',
              // 去除水滴状外观
              // 或者使用 itemStyle: {opacity: 0}
              symbolSize: [0,1],
              symbolOffset: [0, -10],
              label: {
                color: '#000'
              },
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
          },
          {
            name: '个人平均',
            type: 'line',
            symbol: 'circle',
            symbolSize: 2,
            data: personalAvg,
            showSymbol: false,
          },
        ]
      };
      option && myChart.setOption(option);
    },

实际效果图