簡述：在 ECharts 中，創建一個帶有多個 Y 軸的折線圖，并且將這些 Y 軸都集中顯示在圖表的左側，可以通過合理配置 yAxis 和 series 的屬性來實現。簡單記錄
一. 函數代碼
drawCarNumEcs() {// 初始化echarts圖表,并綁定到id為"cfog_four"的DOM元素上var myChart = this.$echarts.init(document.getElementById("cfog_four"));// 定義顏色數組,用于設置圖表中不同數據系列的顏色const colors = ["#e1c951", "#44cbb1", "#307ee2"];// 定義圖表的配置選項var option = {// 設置圖表的整體顏色方案color: colors,// 設置圖表的標題,包含多個標題對象title: [{// text: "車輛存量數", // 主標題文本(當前被注釋掉)padding: [15, 0, 0, 40], // 標題內邊距:[上, 右, 下, 左]left: "left", // 標題水平對齊方式:靠左對齊itemGap: 20, // 主副標題之間的間距textStyle: {// 主標題文本樣式color: "white", // 文字顏色:白色fontStyle: "normal", // 字體風格:正常fontWeight: "bold", // 字體粗細:粗體fontFamily: "宋體", // 字體系列:宋體fontSize: 18, // 字體大小:18像素},},{// text: "輛", // 副標題文本(當前被注釋掉)padding: [40, 0, 0, 90], // 副標題內邊距left: "left", // 副標題水平對齊方式:靠左對齊itemGap: 20, // 主副標題之間的間距textStyle: {// 副標題文本樣式color: "silver", // 文字顏色:銀色fontStyle: "normal", // 字體風格:正常fontWeight: "bold", // 字體粗細:粗體fontFamily: "宋體", // 字體系列:宋體fontSize: 12, // 字體大小:12像素},},{// text: "4小時預測", // 第二個標題文本(當前被注釋掉)padding: [50, 60, 0, 0], // 第二個標題內邊距right: "right", // 第二個標題水平對齊方式:靠右對齊textStyle: {// 第二個標題文本樣式color: "silver", // 文字顏色:銀色fontStyle: "normal", // 字體風格:正常fontWeight: "normal", // 字體粗細:正常fontFamily: "宋體", // 字體系列:宋體fontSize: 14, // 字體大小:14像素},},],// 設置圖表的網格布局grid: {//表示acharts填充占比left: "20%", // 網格左邊緣距離容器左邊緣的距離:20%// right: "3%", // 網格右邊緣距離容器右邊緣的距離(當前被注釋掉)// bottom: "3%", // 網格下邊緣距離容器下邊緣的距離(當前被注釋掉)top: "35%", // 網格上邊緣距離容器上邊緣的距離:35%// containLabel: true, // 防止標簽溢出容器(當前被注釋掉)},// 設置提示框配置tooltip: {trigger: "axis", // 觸發類型:坐標軸觸發},// 設置圖例legend: {right: "10%", // 圖例右對齊,距離右邊緣10%top: "10%", // 圖例頂部對齊,距離頂部10%data: ["濕度", "氣壓", "風力"], // 圖例項textStyle: {color: "white", // 圖例文字顏色:白色},},// 設置X軸xAxis: {type: "category", // 坐標軸類型:類目軸// 原始數據(當前被注釋)// data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], data:this.hyData1.length > 1? this.hyData1: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00","22:00", "00:00", "02:00", "04:00", "06:00", "08:00",],// 如果this.hyData1長度大于1,則使用this.hyData1作為數據,否則使用默認時間數據},// 設置Y軸(有三個Y軸)yAxis: [{type: "value", // 坐標軸類型:數值軸name: "濕度", // 坐標軸名稱position: "left", // 坐標軸位置:左側// max: 1000, // 坐標軸最大值(當前被注釋掉)// min: 59, // 坐標軸最小值(當前被注釋掉)// interval: 8.2, // 坐標軸刻度間隔(當前被注釋掉)offset: 0, // 坐標軸相對于默認位置的偏移:無偏移axisLine: {show: true, // 是否顯示坐標軸線lineStyle: {color: colors[0], // 坐標軸線顏色:使用顏色數組的第一個顏色},},splitLine: {show: true, // 是否顯示分隔線lineStyle: {// color: "red", // 分隔線顏色(當前被注釋掉)// width: 4, // 分隔線寬度(當前被注釋掉)type: "dotted", // 分隔線類型:點線},},},{type: "value", // 坐標軸類型:數值軸name: "氣壓", // 坐標軸名稱// max: 1000, // 坐標軸最大值(當前被注釋掉)// min: 59, // 坐標軸最小值(當前被注釋掉)// interval: 8.2, // 坐標軸刻度間隔(當前被注釋掉)position: "left", // 坐標軸位置:左側offset: 60, // 坐標軸相對于默認位置的偏移:60像素axisLine: {show: true, // 是否顯示坐標軸線lineStyle: {color: colors[1], // 坐標軸線顏色:使用顏色數組的第二個顏色},},splitLine: {show: false, // 是否顯示分隔線:不顯示lineStyle: {// color: "red", // 分隔線顏色(當前被注釋掉)// width: 4, // 分隔線寬度(當前被注釋掉)type: "dotted", // 分隔線類型:點線},},},{type: "value", // 坐標軸類型:數值軸name: "風力", // 坐標軸名稱// max: 1000, // 坐標軸最大值(當前被注釋掉)// min: 59, // 坐標軸最小值(當前被注釋掉)// interval: 8.2, // 坐標軸刻度間隔(當前被注釋掉)position: "left", // 坐標軸位置:左側offset: 120, // 坐標軸相對于默認位置的偏移:120像素axisLine: {show: true, // 是否顯示坐標軸線lineStyle: {color: colors[2], // 坐標軸線顏色:使用顏色數組的第三個顏色},},splitLine: {show: true, // 是否顯示網格線:不顯示lineStyle: {// color: "red", // 分隔線顏色(當前被注釋掉)// width: 4, // 分隔線寬度(當前被注釋掉)type: "dotted", // 分隔線類型:點線},},},],// 設置數據系列series: [{name: "濕度", // 系列名稱type: "line", // 圖表類型:折線圖data:this.hyData2.length > 1? this.hyData2: [18, 18, 24, 28, 25, 19, 16, 28, 22, 17, 27, 17, 28, 14, 18,25, 19, 16, 26, 23, 27, 27,],// 如果this.hyData2長度大于1,則使用this.hyData2作為數據,否則使用默認數據yAxisIndex: 0, // 使用的Y軸索引:第一個Y軸}, {name: "氣壓", // 系列名稱type: "line", // 圖表類型:折線圖data:this.peData2.length > 1? this.peData2: [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,18, 18, 18, 18, 18, 18,],// 如果this.peData2長度大于1,則使用this.peData2作為數據,否則使用默認數據yAxisIndex: 1, // 使用的Y軸索引:第二個Y軸},{name: "風力", // 系列名稱type: "line", // 圖表類型:折線圖data:this.wdData2.length > 1? this.wdData2: [18, 25, 19, 16, 26, 23, 27, 27, 18, 28, 22, 17, 27, 17, 28,14, 8, 24, 28, 25, 19, 16,],// 如果this.wdData2長度大于1,則使用this.wdData2作為數據,否則使用默認數據yAxisIndex: 2, // 使用的Y軸索引:第三個Y軸},],};// 使用配置項設置圖表option && myChart.setOption(option);// 添加窗口大小改變事件監聽器,在窗口大小變化時調整圖表大小window.addEventListener("resize", () => {myChart.resize();});},},二. 初始化渲染Echarts
// 組件掛載之后，才可以獲取到元素
mounted() {// 在組件掛載后調用繪制函數this.drawCarNumEcs()();// 這里再添加窗口大小改變時的重繪監聽器，防止報錯window.addEventListener("resize", () => {if (document.querySelector(".acdt_Ecs")) {this.drawCarNumEcs()();}});},},
三. 同樣，使用的是全局注冊，注意甄別
四. Echarts，更多操作
Echarts官網
https://echarts.apache.org/examples/zh/index.html#chart-type-line
