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}"/>

</template>

<script>

import Bus from "@/bus.js";

import { debounce } from "@/utils";

export default {

name: "Echarts2",

props: {

className: {

type: String,

default: "chart"

},

{

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");

/* var TargetValuetime =

( hourdata + ":" + (Number((Number(fendata) - (Number(fendata) % 15)))==0?'00':Number((Number(fendata) - (Number(fendata) % 15)))) + ":" + "00"); */

} else if (tampcutdown < 0) {

var TargetValuetime =

( hourdata + ":" + (Number((Number(fendata) - (Number(fendata) % 15)))==0?'00':Number((Number(fendata) - (Number(fendata) % 15)))) + ":" + "00");

}

/* alert(TargetValuetime); */

var time = [];

var ControlData = [];

var HistoryData = [];

var RealData = [];

var ForcastData=[]

var PmaxData=[]

var PminData=[]

var Targetpresurepointer = [];

var TargetValue = e.TargetValue;

/* var TargetValuetime = this.nextdiaodutimedata; */

/* var TargetValuetime = "15:15:00"; */

Targetpresurepointer.push(TargetValuetime, TargetValue);

var erweiArray = [];

erweiArray.push(Targetpresurepointer);

/* for (var i = 0; i < 1; i++) {

erweiArray.push(Targetpresurepointer)

} */

for (var i = 0; i < e.RealData.length; i++) {

RealData.push(e.RealData[i].Data);

time.push(e.RealData[i].Time);

}

for (var i = 0; i < e.ControlData.length; i++) {

ControlData.push(e.ControlData[i].Data);

}

for (var i = 0; i < e.HistoryData.length; i++) {

HistoryData.push(e.HistoryData[i].Data);

}

for (var i = 0; i < e.ForcastData.length; i++) {

ForcastData.push(e.ForcastData[i].Data);

}

for (var i = 0; i < e.PmaxData.length; i++) {

PmaxData.push(e.PmaxData[i].Data);

}

for (var i = 0; i < e.PminData.length; i++) {

PminData.push(e.PminData[i].Data);

}

console.log("pressurecontrolecharts1+ControlData");

console.log(ControlData);

console.log(RealData);

console.log(HistoryData);

console.log(time);

console.log(Targetpresurepointer);

console.log(erweiArray);

var a = {

ControlData,

RealData,

HistoryData,

ForcastData,

PmaxData,

PminData,

Targetpresurepointer,

TargetValuetime,

erweiArray,

time,

TargetValuetamp,

Result

};

this.chartData = a;

this.$nextTick(this.initChart());

});

if (this.autoResize) {

this.__resizeHandler = debounce(() => {

if (this.chart) {

this.chart.resize();

}

}, 100);

window.addEventListener("resize", this.__resizeHandler);

}

// 监听侧边栏的变化

this.sidebarElm = document.getElementsByClassName("sidebar-container")[0];

this.sidebarElm &&

this.sidebarElm.addEventListener(

"transitionend",

this.sidebarResizeHandler

);

},

beforeDestroy() {

if (!this.chart) {

return;

}

if (this.autoResize) {

window.removeEventListener("resize", this.__resizeHandler);

}

this.sidebarElm &&

this.sidebarElm.removeEventListener(

"transitionend",

this.sidebarResizeHandler

);

this.chart.dispose();

this.chart = null;

},

methods: {

sidebarResizeHandler(e) {

if (e.propertyName === "width") {

this.__resizeHandler();

}

},

setOptions(chartData) {

this.chart.setOption({

grid: {

height: 94,

760,

bottom: 20,

top: 35,

right: 1,

left: 49,

show: true,

/* backgroundColor: "#e5e8ec", */

borderColor: "#dfdfe1",

borderWidth: 1,

},

/* color: ["#a9b2bf", "#0060ff", "#b53f9a"], */

/* dataZoom: [

{

show: true,

realtime: true,

start: 0,

end: 100

},

{

type: "inside",

realtime: true,

start: 0,

end: 100

}

], */

legend: {

show: true,

orient: "horizontal",

right: 5,

600,

itemWidth: 15,

itemGap: 20,

data: [

{

name: "历史压力",

textStyle: {

fontSize: 12,

fontWeight: "bolder",

color: "#6e7b8b"

},

icon: "rect"

},

{

name: "控制压力",

textStyle: {

fontSize: 12,

fontWeight: "bolder",

color: "#6e7b8b"

},

icon: "rect"

},

{

name: "实际压力",

textStyle: {

fontSize: 12,

fontWeight: "bolder",

color: "#6e7b8b"

},

icon: "rect"

},

{

name: "预测压力",

textStyle: {

fontSize: 12,

fontWeight: "bolder",

color: "#6e7b8b"

},

icon: "rect"

},

{

name: "调度预测压力",

textStyle: {

fontSize: 12,

fontWeight: "bolder",

color: "#6e7b8b"

},

icon:

"path://M700.562286 447.049143c-15.36-49.005714-50.029714-91.867429-99.620572-116.004572-46.372571-22.528-98.742857-25.746286-147.456-8.923428-48.713143 16.822857-88.064 51.638857-110.592 98.011428-4.096 8.484571-7.606857 17.261714-10.386285 26.038858h-112.201143v117.174857h112.347428c15.506286 48.566857 50.029714 90.843429 99.328 114.834285 27.209143 13.165714 55.881143 19.456 84.260572 19.456 71.533714 0 140.580571-39.936 173.933714-108.544 4.242286-8.777143 7.753143-17.554286 10.678857-26.624v0.731429h117.174857v-117.028571h-117.174857v0.877714z m-63.195429 116.589714C614.107429 611.474286 566.125714 639.268571 516.242286 639.268571c-19.748571 0-39.789714-4.388571-58.660572-13.604571-66.706286-32.475429-94.500571-113.225143-62.025143-179.931429C411.062857 413.403429 438.564571 389.12 472.502857 377.417143c14.336-4.973714 29.257143-7.460571 44.032-7.460572 20.187429 0 40.228571 4.534857 58.806857 13.604572 66.706286 32.621714 94.500571 113.371429 62.025143 180.077714zM0 446.025143h117.174857V563.2H0zM906.825143 446.025143H1024V563.2h-117.174857z"

},

{

name: "上下限",

textStyle: {

fontSize: 12,

fontWeight: "bolder",

color: "#6e7b8b"

},

icon: "rect"

},

]

},

tooltip: {

trigger: "axis",

padding: [0, 10],

confine:true,

formatter: function(params) {

console.log("params");

console.log(params);

var res = "<div> <p> 时间：" + params[0].name+" </p> </div>";

for (var i = 0; i < params.length; i++) {

if (params[i].seriesName == "历史压力") {

res +=

"<p>" + params[i].seriesName + ":" + params[i].data + "</p>";

} else if (params[i].seriesName == "控制压力") {

res +=

"<p>" + params[i].seriesName + ":" + params[i].data + "</p>";

} else if (params[i].seriesName =="实际压力") {

res += "<p>" + "实际压力" + ":" + params[i].data + "</p>";

}else if (params[i].seriesName =="预测压力") {

res += "<p>" + "预测压力" + ":" + params[i].data + "</p>";

}else if (params[i].seriesName =="上下限") {

res += "<p>" + "上限" + ":" + params[i].data + "</p>";

}else if (params[i].seriesName =="下限") {

res += "<p>" + "下限" + ":" + params[i].data + "</p>";

}

else if (params[i].seriesName == "调度预测压力") {

res += "<p>" +"调度时间:"+chartData.Result+"<br>" + "调度预测压力" + ":" + params[i].data[1] + "</p>";

}

}

return res;

},

textStyle: {

align: "left"

}

},

xAxis: [

{

data: chartData.time,

axisLabel: {

inside: false,

textStyle: {

color: "#fff"

}

},

axisTick: {

show: false

},

axisLine: {

show: false

},

z: 10

}

],

yAxis: {

splitLine: {

show: false,

lineStyle: {

color: "#dfdfdf",

1,

type: "dashed"

}

},

axisLine: {

show: false

},

axisTick: {

show: false

},

axisLabel: {

textStyle: {

color: "#999"

}

}

},

series: [

{

name: "历史压力",

type: "line",

symbol: "none",

data: chartData.HistoryData,

zlevel: 999999,

itemStyle: {

normal: {

color: "#a9b2bf"

}

}

},

{

name: "控制压力",

type: "line",

symbol: "none",

data: chartData.ControlData,

zlevel: 999,

itemStyle: {

normal: {

borderColor: "#f03939",

color: "#f03939"

}

},

lineStyle: {

normal: {

2,

color: "#f03939"

}

}

},

{

name: "实际压力",

type: "line",

symbol: "none",

itemStyle: {

normal: {

color: "#0060ff"

}

},

zlevel: 1333,

data: chartData.RealData

},

{

name: "预测压力",

type: "line",

symbol: "none",

itemStyle: {

normal: {

color: "#8a13bc"

}

},

zlevel: 1333,

data: chartData.ForcastData

},

{

name: "下限",

stack: "上下限",

type: "line",

smooth:true,

symbol: "none",

itemStyle: {

normal: {

color: "rgba(255,255,255,0)"

}

},

 

zlevel: 1333,

data: chartData.PminData

},

{

name: "上下限",

type: "line",

smooth:true,

stack: "上下限",

symbol: "none",

itemStyle: {

normal: {

color: "#dfd7f6",

/* color: "rgba(255,255,255,0)" */

}

},

lineStyle:{

normal: {

color: "rgba(255,255,255,0)"

}

},

areaStyle: {

normal: {

color: "#dfd7f6"

}

},

zlevel: 1333,

data: chartData.PmaxData

},

 

{

name: "调度预测压力",

type: "scatter",

/* data: chartData.Targetpresurepointer, */

data: chartData.erweiArray,

/* 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", */

/* data: [["15:15:00", 0.134]], */

symbolSize: 8,

itemStyle: {

normal: {

color: "red",

borderColor: "#fff",

borderType: "solid",

borderWidth:1

}

},

zlevel: 333331333333,

markLine: {

silent: true,

symbol:['image://static/0.png', 'image://static/1.png'],

/* symbolSize: 10,

symbol:'image://http://121.40.242.176:9999/img/0.png', */

/* 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: [

{

name: "chartData.TargetValuetime",

/* type: 'average', */

 

/* 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"], */

xAxis: chartData.TargetValuetime,

lineStyle: {

normal: {

color: "#3c5da7"

}

}

}

]

}

}

]

});

},

initChart() {

this.chart = this.$echarts.init(this.$el, "macarons");

this.chart.clear();

this.setOptions(this.chartData);

}

}

};

</script>

 

utils/index.js如下：

export function debounce(func, wait, immediate) {

let timeout, args, context, timestamp, result

const later = function () {

// 据上一次触发时间间隔

const last = +new Date() - timestamp

// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait

if (last < wait && last > 0) {

timeout = setTimeout(later, wait - last)

} else {

timeout = null

// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用

if (!immediate) {

result = func.apply(context, args)

if (!timeout) context = args = null

}

}

}

return function (...args) {

context = this

timestamp = +new Date()

const callNow = immediate && !timeout

// 如果延时不存在，重新设定延时

if (!timeout) timeout = setTimeout(later, wait)

if (callNow) {

result = func.apply(context, args)

context = args = null

}

return result

}

}

bus.js

 

import Vue from 'vue'

export default new Vue();