echart markpoint 在线图上显示图标

  <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,
      default: () => [
        { name: "2016", value: 100 },
        { name: "2017", value: 200 },
        { name: "2018", value: 180 },
        { name: "2019", value: 300 },
        { name: "2020", value: 400 },
      ],
      //[{name: value:}]
    },
    color: {
      type: String,
      default: "#0984e3",
    },
    
  },
  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: this.data.map((v) => {
          return v.name;
        }),
        splitLine:{
                             show:false,//是否背景网格线
                          },
        axisTick:{
                            show:false,//是否显示刻度
                            lineStyle:{color:'#fff'}    // x轴刻度的颜色
                            },
         axisLabel: {
                               color: '#fff',// x轴字体颜色
                               interval:0//轴显示所有的数据
                            },
                           axisLine:{
                              lineStyle:{
                                  show:true,//是否显示坐标轴轴线，
                                  color:'#B2B9BF',//x轴轴线的颜色
                                  width:0,//x轴粗细
                              }
                           }
      },
      yAxis: {
        type: "value",
        show:false,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "30%",
        top: "20%",
        containLabel: true,
      },
      series: [
        {
          data:this.data.map((v) => {
          return v.value;
        }),
          type: "line",
          itemStyle: {
            color: this.color,
          },
          //提示点
          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:1000,//标记点的显示值 
                // coord: [x, y],
                coord: [4, 100], // 其中 5 表示 xAxis.data[5]，即 '230' 这个元素。 第二个值230对应y值
            }]
          },
        },
      ],
    };
    //事件传递的是点击的数据点
    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>