vue2使用echarts markLine中的symbol引入png图片路径问题解决过程

在刚刚的开发中有个需求，需求是这样的：需要一条markLine标记线，标记线的顶端形状为实心箭头，且颜色和markLine标记线颜色不一致，这个箭头的方向会有一个接口返回的参数控制箭头在markLine标记线的首端还是末端，

如下图所示：

刚开始用的是echarts提供的默认配置（ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none）

symbol:['arrow','arrow'],但无法让箭头和markLine标记线颜色不一致。

后来又用了svg图片，因为svg图片可以直接修改颜色和尺寸大小不会使图片失真，echarts引入svg图片的方法如下：

markLine: {

silent: true,

/* symbol: "none", */

/* symbol: ["path://M359.665 1021.432c-193.509 0-350.931-157.428-350.931-350.931s157.428-350.931 350.931-350.931 350.931 157.428 350.931 350.931-157.428 350.931-350.931 350.931zM359.665 366.367c-167.695 0-304.145 136.45-304.145 304.145s136.45 304.145 304.145 304.145c167.71 0 304.145-136.45 304.145-304.145s-136.435-304.145-304.145-304.145z","path://M359.665 1021.432c-193.509 0-350.931-157.428-350.931-350.931s157.428-350.931 350.931-350.931 350.931 157.428 350.931 350.931-157.428 350.931-350.931 350.931zM359.665 366.367c-167.695 0-304.145 136.45-304.145 304.145s136.45 304.145 304.145 304.145c167.71 0 304.145-136.45 304.145-304.145s-136.435-304.145-304.145-304.145z"], */

symbol: ['path://M851.56351056 616.51087917l-318.18515625-318.18515625-317.22099609 317.2209961z', 'path://M851.56351056 616.51087917l-318.18515625-318.18515625-317.22099609 317.2209961z'],

label: {

formatter: function(val) {

return (val.value = "");

}

},

data:data

}

还是无法实现上述需求。

最后，查阅echarts官网文档，可以使用png图片，既然能引入png图片，那上述需求就能实现，因为png图片无法直接改变其颜色，不过用PS可以改的，我们的讨论和PS无关。

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

URL 为图片链接例如：

'image://http://xxx.xxx.xxx/a/b.png'）
引入网络图片固然可行，但两个很小的png图片没必要放到服务器上，引入网络图片。
这样，就把两个箭头图片放到了vue项目的src/assets/img下了


但实际上，这种方式引入图片也不能实现上述需求，具体原因尚不明确。希望有知道原因的大神，希望不吝赐教！
既然能引入网络png图片，那我就把这两个png图片放到static/img下

这样就解决了上述问题。
附源码如下：
echarts.vue

<template>

<div :class="className" :style="{height:height,width:width}"/>

</template>

<script>

import Bus from "@/bus.js";

import { debounce } from "@/utils";

export default {

name: "Echarts2",

props: {

className: {

type: String,

default: "chart"

},

width: {

type: String,

default: "102%"

},

height: {

type: String,

default: "140px"

},

autoResize: {

type: Boolean,

default: true

}

/* chartData: {

type: Object,

required: true

} */

},

data() {

return {

chart: null,

sidebarElm: null,

nextdiaodutimedata: "",

/* ysechartsareaflowresdata: [], */

chartData: {}

};

},

watch: {

chartData: {

deep: true,

handler(val) {

this.setOptions(val);

}

}

},

mounted() {

Bus.$on("nextdiaodutime", e => {

var _this = this;

_this.nextdiaodutimedata = e;

console.log("nextdiaodutime");

console.log(e);

});

Bus.$on("pressurecontroltoechats1", e => {

console.log("pressurecontrolecharts1");

console.log(e);

var TargetValuetamp = this.nextdiaodutimedata;

var nowtimestamp = Number(Date.parse(new Date())) / 1000; //获取的现在时间戳

var tampcutdown = Number(TargetValuetamp) - nowtimestamp;

var S = this.nextdiaodutimedata,

T = new Date(1e3 * S),

Format = function(Q) {

return Q < 10 ? "0" + Q : Q;

},

Result =

Format(T.getHours()) + ":" + Format(T.getMinutes()) + ":" + "00";

var hourdata=Result.slice(0,2)

var fendata=Result.slice(3,5)

/* alert(Result);

alert(hourdata);*/

/* alert(fendata); */

if (tampcutdown > 0 || tampcutdown == 0) {

var TargetValuetime =(hourdata +":" +Number((Number(fendata) - (Number(fendata) % 15)) +15) +":" +"00");