效果:

代码:

<template><div id="lineEchtar"><div id="lineEchtars" style="min-height: 300px; width: 100%"></div></div>
</template><script>
import * as echarts from "echarts";
//import { abc } from "@/api/a/index";//接口在这里计入数据export default {data() {return {myChart: null,xAxis: [],yAxis: []};},components: {},mounted() {this.getList();},methods: {getList() {abc().then(response => {//在这里获取数据  我这里先前端给了,后期res赋值就行this.xAxis =  ["2024-07-10","2024-07-09","2024-07-08","2024-07-07","2024-07-06","2024-07-05","2024-07-04"];this.yAxis = [150, 134, 224, 118, 235, 147, 260];this.interEchinterfun();   //得再接口异步执行后获取实例 要不获取不到});},
//Echarts图表方法interEchinterfun() {var chartDom = document.getElementById("lineEchtars");var myChart = echarts.init(chartDom);var option;option = {//图例显示区域tooltip: {trigger: "axis",backgroundColor: "rgba(8,11,21,0.5)",textStyle: {color: "#fff"}},xAxis: {type: "category",boundaryGap: false,data: this.xAxis},yAxis: {type: "value",splitLine: {show: true, // 设置为 false 隐藏 Y 轴线lineStyle: {color: "#65C6E7",opacity: 0.2}}},series: [{data: this.yAxis,type: "line",smooth: true,//控制折线图圆弧行拐弯的areaStyle: {//颜色渐变normal: {color: {x: 0,y: 0,x2: 0,y2: 1,//颜色过渡colorStops: [{offset: 0.1,color: "#00F4FD" // 线处的颜色},{offset: 0.9,color: "rgba(255,255,255,0.1)" // 坐标轴处的颜色}]}}}}]};option && myChart.setOption(option);}}
};
</script>