//监听window的onresize事件，当窗口大小发生改变，那么就resize图表
window.onresize = () => {
this.echartsDelayedChart.resize();
};
this.$nextTick(function () {
this.echartsDelayedChart = Echarts.init(
document.getElementById("echartsDelayed")
);
let option = {
tooltip: {
trigger: "axis",
},
grid: {
left: 50,
right: 10,
top: 50,
bottom: 20,
},
legend: {
top: 0,
right: 20,
icon: "roundRect", // 这个字段控制形状 类型包括： roundRect circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 20, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 40, // 设置间距
textStyle: {
fontSize: 13,
color: "#00b9e8",
},
data: ["视频时延", "关键帧时延", "信令时延"],
},
xAxis: {
type: "category",
axisTick: {
show: false, //隐藏x坐标轴刻度
},
//x轴颜色
axisLine: {
show: true,
lineStyle: {
color: "#00b9e8", //x轴下线
},
},
splitLine: {
show: false,
},
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
axisLine: {
lineStyle: {
color: "#00b9e8", //左侧y轴颜色
},
},
splitLine: {
show: false,
},
//y轴字体样式
axisLabel: {
// formatter: '{value} ml'
show: true,
textStyle: {
color: "#00b9e8",
fontSize: "12",
},
},
},
series: [
{
name: "视频时延",
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
showBackground: true,
z: 10,
// 设置折线上圆点大小
symbolSize: 6,
},
{
name: "关键帧时延",
data: [123, 932, 444, 222, 666, 677, 1456],
type: "line",
z: 10,
// 设置折线上圆点大小
symbolSize: 6,
},
{
name: "信令时延",
data: [820, 932, 234, 112, 666, 776, 1234],
type: "line",
z: 10,
// 设置折线上圆点大小
symbolSize: 6,
},
],
};
this.echartsDelayedChart.setOption(option);
