Echarts markPoint

Echarts折线图标识基础版

1.每个点位都设置

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：

symbol：'image://http://example.website/a/b.png'

URL 为 dataURI 例如：

symbol：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

引入本地地址需要给图片一个变量 例如：

import imgUrl from '@/assets/image/home/echartsImg.png'

symbol:`image://${imgUrl }`

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    markPoint: {
      data: [{
         coord: [0, 820],
         value:820,
        label: {
          show: true,
        }
      },
      { coord: [1, 932],
       value:932,
        label: {
          show: true,
        },
       
      },
      {coord: [2, 901],
        value:901,
        label: {
          show: true,
        },
      },
      {coord: [3, 934],
        value:934,
        label: {
          show: true,
        },
      },
      {coord: [4, 1290],value:1290,
        label: {
          show: true,
        },},
      {coord: [5, 1330],value:1330,
        label: {
          show: true,
        },},
      {coord: [6, 1320],value:1320,
        label: {
          show: true,
        },},
      ],
      symbol: "rect",
      symbolRotate: 0,
      symbolSize: 50,
      symbolOffset: [0, -30],
       
    },
    
  }]
}

2.设置最大值 ，最小值，平均值

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    markPoint: {
      data: [{
        type: "max",// min:最小值 max:最大值 average:平均值 

        label: {
          show: true,
          position: "inside"
        },
        symbolOffset: [0, -30]
      }],
      symbol: "circle"
    }
  }]
}