在刚刚的开发中有个需求，需求是这样的：需要一条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无关。
utils/index.js如下：
（可以通过 '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>
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();