vue2使⽤echartsmarkLine中的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.6 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.2 label: {
formatter: function(val) {
return (val.value = "");
}
},
data:data
}
还是⽆法实现上述需求。
最后，查阅echarts官⽹⽂档，可以使⽤png图⽚，既然能引⼊png图⽚，那上述需求就能实现，因为png图⽚⽆法直接改变其颜⾊，不过⽤PS可以改的，我们的讨论和PS⽆关。
（可以通过 'image://url' 设置为图⽚，其中 URL 为图⽚的链接，或者 dataURI。
URL 为图⽚链接例如：
'image:///a/b.png'）
引⼊⽹络图⽚固然可⾏，但两个很⼩的png图⽚没必要放到服务器上，引⼊⽹络图⽚。
这样，就把两个箭头图⽚放到了vue项⽬的src/assets/img下了
但实际上，这种⽅式引⼊图⽚也不能实现上述需求，具体原因尚不明确。希望有知道原因的⼤神，希望不吝赐教！
既然能引⼊⽹络png图⽚，那我就把这两个png图⽚放到static/img下
这样就解决了上述问题。
附源码如下：
echarts.vue
<template>
<div :class="className" :/>
</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 => {
font weight boldervar _this = this;
_diaodutimedata = e;
console.log("nextdiaodutime");
console.log(e);
});
Bus.$on("pressurecontroltoechats1", e => {
console.log("pressurecontrolecharts1");
console.log(e);
var TargetValuetamp = diaodutimedata;
var nowtimestamp = Number(Date.parse(new Date())) / 1000; //获取的现在时间戳      var tampcutdown = Number(TargetValuetamp) - nowtimestamp;
var S = diaodutimedata,
T = new Date(1e3 * S),
Format = function(Q) {
return Q < 10 ? "0" + Q : Q;
},
Result =
Hours()) + ":" + Minutes()) + ":" + "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 (tam
pcutdown < 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 = diaodutimedata; */
/*  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) {
size();
}
}, 100);
window.addEventListener("resize", this.__resizeHandler);
}
// 监听侧边栏的变化
this.sidebarElm = ElementsByClassName("sidebar-container")[0];    this.sidebarElm &&
this.sidebarElm.addEventListener(
"transitionend",
this.sidebarResizeHandler
)
;
},
beforeDestroy() {
if (!this.chart) {
return;
}
if (this.autoResize) {
this.sidebarElm &&
veEventListener(
"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,
width: 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",

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。