Echarts--markPoint属性

需求是在折线图上添加特殊标识的，比如每到1000标记一下，使用了这个属性，很好，很强大，能节省不少工作量，推荐使用。

一、介绍

地址：Examples - Apache ECharts

使用很简单，在series对象中添加markPoint对象即可，属性可以设置官方提供的几种基本图形，也可以自己添加对应的图案使用，文本属性也可以设置，同其他一样。至于具体位置的使用在其的data中：

二、使用方法（多个属性同时存在时，优先级按上述的顺序。）

1、使用x、y坐标

在markPoint-data中通过 xAxis，yAxis 属性指定相对容器的屏幕坐标。

data: [{ name: '周最低', value:'打标1', xAxis: 1, yAxis: -1.5 },
        { name: '周最低', value:'打标2', xAxis: 4, yAxis: 3 }]

2、 用 coord 属性指定数据在相应坐标系上的坐标位置

用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 ‘min’, ‘max’, ‘average’，以及自定义图片打标。例如（ symbol: "image://https://p9-passport.byteacctimg.com/img/mosaic-legacy/3796/2975850990~300x300.image",）

3、直接用 type 属性标注系列中的最大值，最小值

直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。

三、图例展示

 

 四、代码

option = {
  title: {
    text: 'Temperature Change in the Coming Week'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' },
       {
        coord: [4, 12],
        symbol: "image://https://p9-passport.byteacctimg.com/img/mosaic-legacy/3796/2975850990~300x300.image",
        symbolSize: 50,
        // value: '特殊标记',
        animation: true,
        label: {
          show: true,
          color: '#000'
        },
        // itemStyle: { color:'#0f0' }
      }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      markPoint: {
        data: [{ name: '周最低', value:'打标1', xAxis: 1, yAxis: -1.5 },
        { name: '周最低', value:'打标2', xAxis: 4, yAxis: 3 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};

五、标记方法记录

  let markGmv=[]//处理过w打标
                let arrayGmv=[]
                let markWatch=[]
                let arrayWatch=[]
                res.data.forEach((ele) => {
                  // console.log(ele);
                    //处理过百w打标
                    let markW=1000000
                    if(Math.floor(ele.gmv/markW)>0&&!arrayGmv.includes(Math.floor(ele.gmv/markW))){
                      arrayGmv.push(Math.floor(ele.gmv/markW))
                      markGmv.push({name:'',value:Math.floor(ele.gmv/markW)+'00w',xAxis:ele.time, yAxis:ele.gmv})
                    }
                     if(Math.floor(ele.watchPeopleCnt/markW)>0&&!arrayWatch.includes(Math.floor(ele.watchPeopleCnt/markW))){
                      arrayWatch.push(Math.floor(ele.watchPeopleCnt/markW))
                      markWatch.push({name:'',value:Math.floor(ele.watchPeopleCnt/markW)+'00w',xAxis:ele.time, yAxis:ele.watchPeopleCnt})
                    }