关于echarts如何在折现图上展示异常点位

 

 echarts展示异常点位主要用到的markPoint

  // 为了重复绘图添加定位点位
      let markPointData=[]
      if(model.data[0].errorCount&&model.data[0].errorCount.length){
        let data=model.data[0].errorCount||[]
        data.forEach((item,index)=>{
          if(item.abnormalBatteryCount){
            markPointData.push({xAxis:index})
          }

        })

      }
      if(markPointData.length){

         markPointData=markPointData.map((item,index)=>{
        _this.$set(item,'yAxis',model.data[0].data[item.xAxis].value)
        return item
      })
      }

      let markPoint={
                symbol:'circle',
                symbolSize:10,
                itemStyle:{
                    color:'#FF5A3B',
                },
               data:markPointData
            // data: [
            //     {name: '周最低', xAxis: 1, yAxis: -2},
            //     {name: '周最低', xAxis: 3, yAxis: 5}
            // ]

        }

        _this.$set(model.data[0],'markPoint',markPoint) //在第一条折现图上添加异常点位
        console.log(model.data,markPoint,'结果')
      let drawChart = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function(params) {
            console.log(params,'params')
            let tooltipStr = "";
            let strArr = [];
            let dataIndex=params[0].dataIndex
            if (params.length) {
              params.forEach(item => {
                let itName=''

                if(item.seriesName.indexOf("series") != -1){
                  itName=item.name
                }else{
                  itName=item.seriesName
                }


                //多条 且 有比率
                if (item.seriesIndex == lastLenIndex && hasProportion) {
                  let proportion = item.value * 100 + "%";
                  strArr.push(
                    `${item.marker} ${itName} : ${proportion}`
                  );
                } else {
                // 数据为浮点类型保留两位小数，整型保留整数
                if(["报备中门店的单宝收益","报备中门店的总收益"].includes(itName)){
                  strArr.push(
                    `${item.marker} ${itName} : ￥${_this.formatMoney(
                      item.value,
                      Number.isInteger(item.value)?0:2
                    )}`
                  );
                }else{
                  strArr.push(
                    `${item.marker} ${itName} : ${_this.formatMoney(
                      item.value,
                      Number.isInteger(item.value)?0:2
                    )}`
                  );
                }

                }
              });
              //如果是
              // if(valueFlag){
              //   let sumNum=0 ;
              //   params.forEach(item => {
              //     sumNum+=item.value
              //   })
              //   strArr.unshift(`总计 : ${_this.formatMoney(sumNum,2)}`)
              // }else{
                //  strArr.unshift(params[0].axisValueLabel)dataDate
              // }
              strArr.unshift(_this.data[dataIndex].dataDate)//头部标题
              let abnormalBatteryCount=_this.data[dataIndex].abnormalBatteryCount
              let batteryMoreThanOne=_this.data[dataIndex].batteryMoreThanOne
               let batteryMoreThanThree=_this.data[dataIndex].batteryMoreThanThree

              if(_this.showAbnormalBatteryCount&&abnormalBatteryCount){
                let str='<span style="padding-left:20px;"></span>'+'位置异常设备总数'+abnormalBatteryCount+'：'
                if(batteryMoreThanOne){
                  str=str+'<span >'+batteryMoreThanOne+'台</span>>1km'+'<span style="padding-left:10px;"></span>'
                }
                  // if(batteryMoreThanThree){
                  str=str+'<span >'+batteryMoreThanThree+'台</span>>3km'+''
                // }
                 strArr.push(
                    str
                  );
              }

              tooltipStr = strArr.join(" <br/> ");
            }
            console.log(tooltipStr,'tooltipStr')
            return tooltipStr;
          }
        },
        title: {
          show: false
        },
        legend: {
          left: "center",
          itemWidth: 20,
          itemHeight: 5,
          // top: 20,
          bottom:10,
          data: _this.nameList
        },

        grid: {
          left: "3%",
          right: "7%",
          top: 70,
          bottom: 40,
          containLabel: true
        },

        series: model.data //重要节点
      };