echart 折线图使用 markpoint

<template>
  <div ref="chart" :style="{ width, height }" class="container">00000</div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "500px",
    },
    height: {
      type: String,
      default: "300px",
    },
    data: {
      type: Array,
      required: true,
    },
    options: {
      required: true,
    },
  },
  data() {
    return {
      symbol:
        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
    };
  },
  mounted() {
    let option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        top: 0,
        containLabel: true,
      },
      series: [
        {
          data: [150, 100, 224, 218, 135, 147, 260],
          type: "line",
          markPoint: {
            symbol: "path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z", // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z,  path://m 0,0 h 48 v 20 h -34 l -6,10 l -6,-10 h -2 z
            symbolSize: 50,
            symbolOffset: ["34%", "-50%"],
            symbolKeepAspect: true, // 如果 symbol 是 path:// 的形式，是否在缩放时保持该图形的长宽比。
            label: {
              position: "insideTop",
              distance: 7,
            },
            data: [{
                value:100,//标记点的显示值 
                // coord: [x, y],
                coord: [1, 100], // 其中 5 表示 xAxis.data[5]，即 '230' 这个元素。 第二个值230对应y值
                // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
                                      // 注意，使用这种方式时，xAxis.data 不能写成 [number, number, ...]
                                      // 而只能写成 [string, string, ...]
            }]
          },
        },
      ],
    };
    //事件传递的是点击的数据点
    this.initChart(this.$refs.chart, option, (data) => {
      console.log(data);
    });
  },
  methods: {
    textSize(text, fontSize) {
      var span = document.createElement("span");
      var result = {
        width: span.offsetWidth,
        height: span.offsetHeight,
      };
      span.style.visibility = "hidden";
      span.style.fontSize = fontSize || "14px";
      document.body.appendChild(span);

      if (typeof span.textContent != "undefined")
        span.textContent = text || "国";
      else span.innerText = text || "国";

      result.width = span.offsetWidth - result.width;
      result.height = span.offsetHeight - result.height;
      span.parentNode.removeChild(span);
      return result;
    },

    toHSpeed(speed, fix) {
      if (isNaN(speed)) return speed;
      if (!fix && fix != 0) fix = 2;
      if (speed >= 125000000) {
        speed /= 125000000;
        speed = speed.toFixed(fix) + "Gbps";
      } else if (speed >= 125000) {
        speed /= 125000;
        speed = speed.toFixed(fix) + "Mbps";
      } else if (speed >= 125) {
        speed /= 125;
        speed = speed.toFixed(fix) + "Kbps";
      } else {
        speed *= 8;
        speed = speed.toFixed(fix) + "bps";
      }
      return speed;
    },
  },
};
</script>

<style  lang="scss" scoped >
.container {
  width: 500px;
  height: 300px;
}
</style>