1.创建一个具有宽高的盒子
2.获取到数据中的最后一个数据的索引index
3.option
let myChart2 = this.$echarts.getInstanceByDom(
document.getElementById("jhqBottom")
);
if (myChart2 == null) {
// 如果不存在,就进行初始化
myChart2 = this.$echarts.init(document.getElementById("jhqBottom"));
}
let option1 = {
unit: "日/人",
grid: {
top: "17",
bottom: "50",
},
xAxis: [
{
axisLabel: {
show: true,
// margin:-270,
color: "#fff",
fontSize: this.fontSize(8),
},
axisTick: {
show: true,
inside: true,
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#00c4a8", // 0% 处的颜色
},
{
offset: 1,
color: "#2eff91", // 100% 处的颜色
opacity: 1,
},
],
globalCoord: false, // 缺省为 false
},
},
},
type: "category",
boundaryGap: false,
data: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
],
},
],
yAxis: [
{
boundaryGap: [0, "20%"],
axisLabel: {
show: true,
color: "#fff",
fontSize: this.fontSize(10),
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.2)",
},
},
splitNumber: 5,
nameLocation: "center",
nameTextStyle: {
color: "#fff",
fontSize: 14,
},
},
],
series: [
{
type: "line",
data: this.arr2,
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 10,
color: "#00c4a8",
symbol: function (value,ind){
value;
if (index == ind.dataIndex) {
return "circle";
} else {
return "none";
}
},
smooth: false,
lineStyle: {
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#00c4a8", // 0% 处的颜色
},
{
offset: 1,
color: "#2eff91", // 100% 处的颜色
opacity: 1,
},
],
globalCoord: false, // 缺省为 false
},
},
},
{
data: [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
],
type: "line",
symbol: "none",
lineStyle: {
color: "rgba(46,255,145,0.4)",
width: 2,
},
},
],
};
myChart2.setOption(option1);
setTimeout(() => {
myChart2.resize();
}, 500);
})
.catch((err) => {
console.log(err);
});
重点代码
symbol: function (value,ind){
value;
if (index == ind.dataIndex) {
return "circle";
} else {
return "none";
}
可根据自己所需展示点的个数及形状