折线图 最大值显示白点，默认显示tooltip框框，自定义tooltip
效果图：
代码如下：（直接放整个vue文件了，省事）
<template>
<div>
<div style="width: 406px; height:220px" id="zz_r_two1"></div>
<div class="xsTitle">
<div class="fang"></div>
<span>今日峰值时段：11:00 - 13:00</span>
</div>
</div>
</template>
<script>
export default {
name: "zz_r_two1",
mounted() {
this.drawLine();
},
methods: {
// 自适应字体大小变化
WidthAdaptive(res) {
var windth = window.innerWidth;
let fontSize = windth / 1920;
return fontSize * res;
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("zz_r_two1"));
let xLabel = [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
];
let goOutSchool = [30, 12, 69, 36, 13, 58, 130, 10, 2, 33];
let maxNum = this.getMax(goOutSchool);
let allNum = this.getAll(goOutSchool);
let maxIndex = this.getMaxIndex(goOutSchool);
let getSD = xLabel[maxIndex];
let percentage = this.getPercentage(allNum, maxNum);
let option = {
backgroundColor: "transparent",
grid: {
top: "24%",
left: "10%",
right: "5%",
bottom: "15%",
// containLabel: true
},
tooltip: {
show: true,
backgroundColor: "rgba(67, 67, 67, 0.7)",
formatter: "{b0}<br />" + percentage,
},
xAxis: [
{
type: "category",
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.15)",
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "rgba(255, 255, 255, 0.65)",
fontSize: this.WidthAdaptive(14),
padding: this.WidthAdaptive(2),
},
formatter: function(data) {
return data;
},
},
splitLine: {
show: false,
lineStyle: {
color: "#192a44",
},
},
axisTick: {
show: false,
},
data: xLabel,
},
],
yAxis: [
{
splitLine: {
lineStyle: {
type: "solid",
color: "rgba(112,112,112,0.5)",
},
},
axisLine: {
show: false,
lineStyle: {
color: "#8C9493",
},
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(255, 255, 255, 0.65)",
fontSize: this.WidthAdaptive(14),
padding: this.WidthAdaptive(2),
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "峰值时段",
type: "line",
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: this.WidthAdaptive(2),
color: "rgba(25, 104, 255, 1)", // 线条颜色
},
borderColor: "rgba(0,0,0,.4)",
},
itemStyle: {
color: "rgba(25, 104, 255, 1)",
borderColor: "#646ace",
borderWidth: this.WidthAdaptive(20),
},
tooltip: {
show: true,
},
markPoint: {
data: [
{
type: "max",
name: getSD,
symbol: "circle",
symbolSize: this.WidthAdaptive(14),
itemStyle: {
color: "rgba(255,255,255,1)",
borderColor: "#fff",
borderWidth: this.WidthAdaptive(0),
},
label: { show: false, fontSize: 0 },
},
],
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(25, 104, 255, .5)",
},
{
offset: 1,
color: "rgba(25, 104, 255, 0)",
},
],
false
),
shadowColor: "rgba(61, 230, 255, 0.5)", //阴影颜色
shadowBlur: this.WidthAdaptive(20), //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data: goOutSchool,
},
],
};
window.onresize = function() {
myChart.resize();
};
myChart.setOption(option);
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0, // 显示第几个series
dataIndex: maxIndex, // 显示第几个数据
});
},
//获取最大值
getMax(arr) {
//假设最大值max 为arr[0]
var max = arr[0];
//遍历对比
for (var i = 0; i < arr.length; i++) {
//若max小于当前项 说明不是最大值 将当前项的值赋予max
// 继续遍历对比找到最大的值
if (max < arr[i]) {
max = arr[i];
}
}
return max;
},
// 获得总数
getAll(arr) {
let num = 0;
for (let i = 0; i < arr.length; i++) {
num += parseInt(arr[i]);
}
return num;
},
// 计算最大值所占百分比
getPercentage(all, max) {
return (max / all).toFixed(2) * 100 + "%";
},
// 获得最大值下标
getMaxIndex(arr) {
var max = arr[0];
//声明了个变量 保存下标值
var index = 0;
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
index = i;
}
}
return index;
},
},
};
</script>
<style scoped>
.xsTitle {
width: 100%;
height: 20px;
position: absolute;
left: 0;
top: 12px;
z-index: 999;
display: flex;
align-items: center;
}
.xsTitle > .fang {
width: 9px;
height: 9px;
margin-left: 17px;
margin-right: 9px;
background: url("../img/f1.png") no-repeat;
background-size: 100% 100%;
}
.xsTitle > span {
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: normal;
color: #63dbee;
}
</style>
