业务场景：在数据量庞大的折叠折线图中，给其中一条添加两条水平的标线，标线的Y轴用户自定义，起点标记的图形用设计好的两个png小图片。
需求分析：方案一：使用图例，也就是重新画一条折线图，折线图的x轴对应相同的一个y轴值，并设置虚线，但是起始图标是个问题，该方案不可行。
方案二：使用折线图的 markline
，markline.data中放两个对象，一个对象表示一条水平线，markline.data.0.symbol
设置水平线的起始图标注意：这里不能直接导入静态的png图片,Echarts不能直接识别；
我的做法是将png上传到官方
示例，官方示例会将你上传的png转换成 symbol:
image://data:image/png;...
的图片，把它copy下来，放到你的项目中；
实现过程：
<div id="demo">
<!-- 折线图 -->
<div style="height: 496px; border: 1px solid #ebeef5;">
<v-chart id="performanceChart" :options="performanceOption" style="width: 100%; height: 100%;" />
</div>
</div>// 引包的代码我省略了，不是本文的重点
this.performanceOption = {
title: {
text: "数据准备中",
left: "center",
top: "center",
textStyle: {
fontSize: 16,
fontWeight: 400
}
},
legend: [
{
data: legends,
top: "2%",
left: "25%",
right: "10%",
selected: this.selectedLegend
},
{
data: ["数据4"],
top: "73%",
right: "0%"
}
],
dataZoom: [
{
id: "dataZoomX",
type: "slider",
xAxisIndex: [0, 1],
height: 20,
top: "65%",
right: 10,
left: 10,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "80%",
fillerColor: "rgba(255, 76, 31,.2)",
dataBackground: {
areaStyle: {
color: ""
},
lineStyle: {
opacity: 1,
color: "#FF4C1F"
}
},
handleStyle: {
color: "#FF4C1F"
},
filterMode: "weakFilter",
zoomOnMouseWheel: "false"
}
],
tooltip: {
trigger: "axis",
axisPointer: { type: "cross" },
formatter: function (datas) {
let res = datas[0].name + "<br/>";
let length = datas.length;
let i = 0;
for (; i < length; i++) {
res += `
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${datas[i].color
};"></span>
${datas[i].seriesName}: ${datas[i].value != null ? datas[i].value.toFixed(4) : "无数据"
}
<br/>
`;
}
return res;
}
},
axisPointer: {
// 坐标轴指示器
link: { xAxisIndex: "all" },
label: { backgroundColor: "#777" }
},
grid: [
{
top: 40,
left: 10,
right: 0,
bottom: 20,
height: "60%"
},
{
left: 10,
right: 0,
bottom: 15,
height: "20%"
}
],
xAxis: [
{
type: "category",
data: dts,
axisLine: {
show: true,
lineStyle: {
color: "#D8D8D8"
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
fontSize: 10,
color: "#222831"
}
},
splitLine: {
show: false
},
scale: true
},
{
type: "category",
gridIndex: 1,
data: dts,
axisLine: {
lineStyle: {
color: "#D8D8D8"
}
},
scale: true,
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false }
}
],
yAxis: [
{
scale: true,
splitArea: {
show: false
},
splitNumber: 4,
axisLabel: {
show: true,
textStyle: {
fontSize: 10,
color: "#808080",
align: "left"
}
},
axisLine: {
show: false,
lineStyle: {
color: "#D8D8D8"
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: "#F5F5F5"
}
}
},
{
type: "value",
gridIndex: 1,
offset: -10,
axisLabel: {
show: true,
textStyle: { fontSize: 10, color: "#808080", align: "left" }
},
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false }
}
],
series: [
...simulation, // 数据3
...fund_account, // 数据2
{
name: "数据1",
type: "line",
data: fundData.data,
color: "#FF7979",
symbol: false,
symbolSize: 0, // 拐点圆的大小
areaStyle: {
// 折线渐变阴影
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#FEE1E1"
},
{
offset: 0.76,
color: "#FFF8F8"
}
])
},
// 🔔重点看这🔔重点看这🔔重点看这
markLine: {
lineStyle: { width: 2 }, // 标线大小
symbol: "none", //去掉线最后面的箭头
data: [{
name: '水平线1',
yAxis: 1, // Y 值为给定值的标记线，用户自定义水平标线的值
lineStyle: { color: "#FFAE00" },
symbol: "image://data:image/png;base64,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",
symbolKeepAspect: true, // 是否在缩放时保持该图形的长宽比
symbolRotate: 1, // 起点标记的旋转角度
symbolSize: [25, 25] // 起点标记的大小
},
{
name: '水平线2',
yAxis: 0.9, // Y 值为给定值的标记线，用户自定义水平标线的值
lineStyle: { color: "#FF4A00" },
symbol: "image://data:image/png;base64,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",
symbolKeepAspect: true, // 是否在缩放时保持该图形的长宽比
symbolRotate: 1, // 起点标记的旋转角度
symbolSize: [25, 25] // 起点标记的大小
}
]
}
},
{
name: "数据4",
type: "line",
data: retracementData.data,
color: "#6C9EF8",
gridIndex: 1,
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 0, // 拐点圆的大小
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(115,156,250,0.05)"
},
{
offset: 0.76,
color: "rgba(115,156,250,0.25)"
}
])
}
}
]
};