vue3+echarts實現雙折線漸變圖

echarts中文官網：https://echarts.apache.org/examples/zh/index.html

效果圖展示：
整體代碼如下：

<template><div id="lineChart" style="width:100%;height:400px;"></div>
</template><script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";// 橫坐標data數據
const xData = ["05-01","05-02","05-03","05-04","05-05","05-06","05-07","05-08","05-09","05-10","05-11","05-12","05-13","05-14","05-15","05-16","05-17","05-18","05-19","05-20",
];// 雙折線漸變圖data數據
const lineData = [[782, 859, 578, 564, 615, 787, 623, 606, 750, 610, 703, 501, 675, 598, 721,550, 767, 600, 692, 987,],[780, 589, 703, 510, 714, 503, 474, 621, 692, 512, 700, 876, 686, 780, 614,781, 489, 700, 621, 600,],
];onMounted(() => {const myLineChart = echarts.init(document.getElementById("lineChart"));const lineOption = {tooltip: {trigger: "axis",type: "line",axisPointer: {lineStyle: {color: "rgba(69, 173, 175, 1)",},},backgroundColor: "rgba(7,18,26, 1)",borderWidth: 0,textStyle: {color: "#fff",fontSize: 14,},},// 圖例legend: {icon: "rect", // circle圓形;rect方形;roundRect圓角方形;triangle三角形;diamond菱形;pin定位點;arrow導航三角指針data: ["實際用量", "計劃用量"],itemWidth: 8,itemHeight: 8,itemGap: 15, // 間隔right: "50%",top: "8%",textStyle: {fontSize: 12,color: "#fff",},},// 圖表位置grid: {left: "1%",right: "2%",top: "27%",bottom: "3%",containLabel: true, // 是否包含坐標刻度},xAxis: [{type: "category",boundaryGap: false, // 散點圖的留白策略axisLine: {lineStyle: {color: "#415264",width: 2,type: "solid",},},axisLabel: {color: "#A6C6E1",fontSize: 12,},axisTick: {show: false,},data: xData,},],yAxis: [{type: "value",axisTick: {show: false,},axisLine: {lineStyle: {color: "#284556",},},axisLabel: {//  改變y軸字體顏色和大小// formatter: '{value}間 ', //  給y軸添加單位color: "#9FA3A8",fontSize: 12,},splitLine: {lineStyle: {color: "#284556",type: "dashed",},},},],series: [{name: "實際用量",type: "line",smooth: true, // 是否為平滑曲線lineStyle: {width: 2,},symbol: "circle",symbolSize: 5,showSymbol: false, // 是否顯示數據點areaStyle: {// 設置漸變色color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(18,166,254,0.6)",},{offset: 0.8,color: "rgba(7,18,26,0.1)",},],false),},itemStyle: {color: "#12A6FE",borderWidth: 1,},data: lineData[0],},{name: "計劃用量",type: "line",smooth: true,symbol: "circle",symbolSize: 5,showSymbol: false,lineStyle: {width: 2,},areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(51,181,107,0.6)",},{offset: 0.8,color: "rgba(7,18,26,0.5)",},],false),},itemStyle: {color: "#33B56B",borderWidth: 1,},data: lineData[1],},],};myLineChart.setOption(lineOption);
});
</script>

Genuine effort turns challenges into stepping stones for real growth.?