前端中間件Midway的使用教程
一、 關(guān)于midway
Midway 是阿里巴巴 - 淘寶前端架構(gòu)團(tuán)隊(duì)，基于漸進(jìn)式理念研發(fā)的 Node.js 框架，通過(guò)自研的依賴(lài)注入容器，搭配各種上層模塊，組合出適用于不同場(chǎng)景的解決方案。
Midway 基于 TypeScript 開(kāi)發(fā)，結(jié)合了面向?qū)ο螅∣OP + Class + IoC）與函數(shù)式（FP + Function + Hooks）兩種編程范式，并在此之上支持了 Web / 全棧 / 微服務(wù) / RPC / Socket / Serverless 等多種場(chǎng)景，致力于為用戶(hù)提供簡(jiǎn)單、易用、可靠的 Node.js 服務(wù)端研發(fā)體驗(yàn)。
1. 解決什么痛點(diǎn)
以往的開(kāi)發(fā)中，前端直接項(xiàng)目中直接調(diào)取后臺(tái)服務(wù)接口，就會(huì)從在過(guò)度依賴(lài)后臺(tái)數(shù)據(jù)，或者只能請(qǐng)求服務(wù)后再到渲染層進(jìn)行數(shù)據(jù)加工大大影響開(kāi)發(fā)效率，或者存在多個(gè)部門(mén)協(xié)同開(kāi)發(fā)，接口數(shù)據(jù)格式達(dá)不到統(tǒng)一，前端數(shù)據(jù)處理任務(wù)量加重等溝通問(wèn)題。
2. 期望達(dá)到什么效果
在項(xiàng)目/產(chǎn)品開(kāi)發(fā)中存在某種中間件進(jìn)行服務(wù)接口的二次加工或者轉(zhuǎn)發(fā)以達(dá)到前端所需的統(tǒng)一數(shù)據(jù)結(jié)構(gòu)。比如如下分工：
數(shù)據(jù)：負(fù)責(zé)數(shù)據(jù)開(kāi)發(fā)，對(duì)外提供服務(wù)數(shù)據(jù)接口
后端：負(fù)責(zé)業(yè)務(wù)邏輯開(kāi)發(fā)，對(duì)外提供服務(wù)業(yè)務(wù)邏輯接口
中間層：根據(jù)前端需要，調(diào)用多端不同的服務(wù)接口并進(jìn)行拼接、加工數(shù)據(jù)，對(duì)前端提供加工后接口
前端：負(fù)責(zé)數(shù)據(jù)渲染
二、創(chuàng)建應(yīng)用并使用
1. 創(chuàng)建midway應(yīng)用
$npm init midway
選擇 koa-v3 項(xiàng)目進(jìn)行初始化創(chuàng)建，項(xiàng)目名可以自定，比如 weather-sample。
現(xiàn)在可以啟動(dòng)應(yīng)用來(lái)體驗(yàn)下。
$ npm run dev
則創(chuàng)建了一個(gè)類(lèi)似下面結(jié)構(gòu)的文件
.
├── src ## midway 項(xiàng)目源碼
│ └── controller ## Web Controller 目錄
│ └── home.controller.ts
├── test
├── package.json
└── tsconfig.json
整個(gè)項(xiàng)目包括了一些最基本的文件和目錄。
• src 整個(gè) Midway 項(xiàng)目的源碼目錄，你之后所有的開(kāi)發(fā)源碼都將存放于此
• test 項(xiàng)目的測(cè)試目錄，之后所有的代碼測(cè)試文件都在這里
• package.json Node.js 項(xiàng)目基礎(chǔ)的包管理配置文件
• tsconfig.json TypeScript 編譯配置文件
2. 認(rèn)識(shí)Midway
2.1 目錄結(jié)構(gòu)
• controller Web Controller 目錄
• middleware 中間件目錄
• filter 過(guò)濾器目錄
• aspect 攔截器
• service 服務(wù)邏輯目錄
• entity 或 model 數(shù)據(jù)庫(kù)實(shí)體目錄
• config 業(yè)務(wù)的配置目錄
• util 工具類(lèi)存放的目錄
• decorator 自定義裝飾器目錄
• interface.ts 業(yè)務(wù)的 ts 定義文件
2.2 Controller
控制器常用于對(duì)用戶(hù)的請(qǐng)求參數(shù)做一些校驗(yàn)，轉(zhuǎn)換，調(diào)用復(fù)雜的業(yè)務(wù)邏輯，拿到相應(yīng)的業(yè)務(wù)結(jié)果后進(jìn)行數(shù)據(jù)組裝，然后返回。
在 Midway 中，控制器 也承載了路由的能力，每個(gè)控制器可以提供多個(gè)路由，不同的路由可以執(zhí)行不同的操作。
import { Controller, Get } from '@midwayjs/decorator';
@Controller('/')
export class WeatherController {
// 這里是裝飾器，定義一個(gè)路由
@Get('/weather')
async getWeatherInfo(): Promise<string> {
// 這里是 http 的返回，可以直接返回字符串，數(shù)字，JSON，Buffer 等
return 'Hello Weather!';
}
}@Controller 裝飾器告訴框架，這是一個(gè) Web 控制器類(lèi)型的類(lèi)，而 @Get 裝飾器告訴框架，被修飾的 home 方法，將被暴露為 / 這個(gè)路由，可以由 GET 請(qǐng)求來(lái)訪(fǎng)問(wèn)
通過(guò)訪(fǎng)問(wèn) /weather 接口返回?cái)?shù)據(jù)了；整個(gè)方法返回了一個(gè)字符串，在瀏覽器中你會(huì)收到 text/plain 的響應(yīng)類(lèi)型，以及一個(gè) 200 的狀態(tài)碼。
2.3 路由
上面創(chuàng)建了一個(gè) GET 路由。一般情況下，我們會(huì)有其他的 HTTP Method，Midway 提供了更多的路由方法裝飾器。
例如：
import { Controller, Get, Post } from '@midwayjs/decorator';
@Controller('/')
export class HomeController {
@Get('/')
async home() {
return 'Hello Midwayjs!';
}
@Post('/update')
async updateData() {
return 'This is a post method'
}
}Midway 還提供了其他的裝飾器， @Get 、 @Post 、 @Put() 、@Del() 、 @Patch() 、 @Options() 、 @Head() 和 @All() ，表示各自的 HTTP 請(qǐng)求方法。
@All 裝飾器比較特殊，表示能接受以上所有類(lèi)型的 HTTP Method。
你可以將多個(gè)路由綁定到同一個(gè)方法上。
@Get('/')
@Get('/main')
async home() {
return 'Hello Midwayjs!';
}返回內(nèi)容類(lèi)型將定義的內(nèi)容放在 src/interface.ts 文件中
例如：
export interface User {
id: number;
name: string;
age: number;
}使用：下方粗下劃線(xiàn)處
import { Controller, Get, Query } from "@midwayjs/decorator";
@Controller('/api/user')
export class UserController {
@Get('/')
async getUser(@Query('id') id: string): Promise<User> {
// xxxx
}
}2.4 獲取請(qǐng)求參數(shù)
請(qǐng)求的數(shù)據(jù)一般都是動(dòng)態(tài)的，會(huì)在 HTTP 的不同位置來(lái)傳遞，比如常見(jiàn)的 Query，Body 等。
第一種 query
@Query 裝飾器的有參數(shù)，可以傳入一個(gè)指定的字符串 key，獲取對(duì)應(yīng)的值，賦值給入?yún)?，如果不傳入，則默認(rèn)返回整個(gè) Query 對(duì)象。
// URL = /?id=1
async getUser(@Query('id') id: string) // id = 1
async getUser(@Query() queryData) // {"id": "1"}
如果通過(guò)api獲取query中的參數(shù)
import { Controller, Get, Inject } from "@midwayjs/decorator";
import { Context } from '@midwayjs/koa';
@Controller('/user')
export class UserController {
@Inject()
ctx: Context;
@Get('/')
async getUser(): Promise<User> {
const query = this.ctx.query;
// {
// uid: '1',
// sex: 'male',
// }
}
}注意：
當(dāng) Query String 中的 key 重復(fù)時(shí)，ctx.query 只取 key 第一次出現(xiàn)時(shí)的值，后面再出現(xiàn)的都會(huì)被忽略。
比如 GET /user?uid=1&uid=2 通過(guò) ctx.query 拿到的值是 { uid: ‘1’ }。
第二種 body
為什么要用body’傳遞參數(shù)？
• 瀏覽器中會(huì)對(duì) URL 的長(zhǎng)度有所限制，如果需要傳遞的參數(shù)過(guò)多就會(huì)無(wú)法傳遞。
• 服務(wù)端經(jīng)常會(huì)將訪(fǎng)問(wèn)的完整 URL 記錄到日志文件中，有一些敏感數(shù)據(jù)通過(guò) URL 傳遞會(huì)不安全。
注意：
框架內(nèi)置了 bodyParser 中間件來(lái)對(duì)這兩類(lèi)格式的請(qǐng)求 body 解析成 object 掛載到 ctx.request.body 上。HTTP 協(xié)議中并不建議在通過(guò) GET、HEAD 方法訪(fǎng)問(wèn)時(shí)傳遞 body，所以我們無(wú)法在 GET、HEAD 方法中按照此方法獲取到內(nèi)容。
框架對(duì) bodyParser 設(shè)置了一些默認(rèn)參數(shù)，配置好之后擁有以下特性：
• 當(dāng)請(qǐng)求的 Content-Type 為 application/json，application/json-patch+json，application/vnd.api+json 和 application/csp-report 時(shí)，會(huì)按照 json 格式對(duì)請(qǐng)求 body 進(jìn)行解析，并限制 body 最大長(zhǎng)度為 1mb。
• 當(dāng)請(qǐng)求的 Content-Type 為 application/x-www-form-urlencoded 時(shí)，會(huì)按照 form 格式對(duì)請(qǐng)求 body 進(jìn)行解析，并限制 body 最大長(zhǎng)度為 1mb。
• 如果解析成功，body 一定會(huì)是一個(gè) Object（可能是一個(gè)數(shù)組）。
獲取單個(gè) body
? // src/controller/user.ts
// POST /user/ HTTP/1.1
// Host: localhost:3000
// Content-Type: application/json; charset=UTF-8
//
// {"uid": "1", "name": "harry"}
import { Controller, Post, Body } from "@midwayjs/decorator";
@Controller('/user')
export class UserController {
@Post('/')
async updateUser(@Body('uid') uid: string): Promise<User> {
// id 等價(jià)于 ctx.request.body.uid
}
}獲取整個(gè) body
? // src/controller/user.ts
// POST /user/ HTTP/1.1
// Host: localhost:3000
// Content-Type: application/json; charset=UTF-8
//
// {"uid": "1", "name": "harry"}
import { Controller, Post, Body } from "@midwayjs/decorator";
@Controller('/user')
export class UserController {
@Post('/')
async updateUser(@Body() user: User): Promise<User> {
// user 等價(jià)于 ctx.request.body 整個(gè) body 對(duì)象
// => output user
// {
// uid: '1',
// name: 'harry',
// }
}
}從 API 獲取
? // src/controller/user.ts
// POST /user/ HTTP/1.1
// Host: localhost:3000
// Content-Type: application/json; charset=UTF-8
//
// {"uid": "1", "name": "harry"}
import { Controller, Post, Inject } from "@midwayjs/decorator";
import { Context } from '@midwayjs/koa';
@Controller('/user')
export class UserController {
@Inject()
ctx: Context;
@Post('/')
async getUser(): Promise<User> {
const body = this.ctx.request.body;
// {
// uid: '1',
// name: 'harry',
// }
}
}此外裝飾器還可以組合使用，獲取 query 和 body 參數(shù)
@Post('/')
async updateUser(@Body() user: User, @Query('pageIdx') pageIdx: number): Promise<User> {
// user 從 body 獲取
// pageIdx 從 query 獲取
}第三種 Params
如果路由上使用 :xxx 的格式來(lái)聲明路由，那么參數(shù)可以通過(guò) ctx.params 獲取到。
示例：從裝飾器獲取
// src/controller/user.ts
// GET /user/1
import { Controller, Get, Param } from "@midwayjs/decorator";
@Controller('/user')
export class UserController {
@Get('/:uid')
async getUser(@Param('uid') uid: string): Promise<User> {
// xxxx
}
}示例：從 API 獲取
// src/controller/user.ts
// GET /user/1
import { Controller, Get, Inject } from "@midwayjs/decorator";
import { Context } from '@midwayjs/koa';
@Controller('/user')
export class UserController {
@Inject()
ctx: Context;
@Get('/:uid')
async getUser(): Promise<User> {
const params = this.ctx.params;
// {
// uid: '1',
// }
}
}2.5 Web中間件
Web 中間件是在控制器調(diào)用 之前 和 之后（部分）調(diào)用的函數(shù)。 中間件函數(shù)可以訪(fǎng)問(wèn)請(qǐng)求和響應(yīng)對(duì)象。
import { IMiddleware } from '@midwayjs/core';
import { Middleware } from '@midwayjs/decorator';
import { NextFunction, Context } from '@midwayjs/koa';
@Middleware()
export class ReportMiddleware implements IMiddleware<Context, NextFunction> {
resolve() {
return async (ctx: Context, next: NextFunction) => {
// 控制器前執(zhí)行的邏輯
const startTime = Date.now();
// 執(zhí)行下一個(gè) Web 中間件，最后執(zhí)行到控制器
// 這里可以拿到下一個(gè)中間件或者控制器的返回值
const result = await next();
// 控制器之后執(zhí)行的邏輯
console.log(Date.now() - startTime);
// 返回給上一個(gè)中間件的結(jié)果
return result;
};
}
static getName(): string {
return 'report';
}
}例如：
export class ErrorMiddleware implements IWebMiddleware {
resolve() {
return async (ctx: Context, next: IMidwayWebNext) => {
try {
await next()
} catch (err: any) {
const errorInter = RestCode.INTERNAL_SERVER_ERROR;
console.info('錯(cuò)誤信息' + err.name, err.message, err.status);
const status = err.status || errorInter;
// 生產(chǎn)環(huán)境時(shí) 500 錯(cuò)誤的詳細(xì)錯(cuò)誤內(nèi)容不返回給客戶(hù)端，因?yàn)榭赡馨舾行畔?
const errorMsg = status === errorInter && ctx.app.config.env === 'prod' ?
'Internal Server Error' :
err.message;
ctx.body = {
code: err.name === 'ValidationError' ? RestCode.VALIDATE_ERROR : status,
error: errorMsg.replaceAll('\"',''),
}
if (status === 422) {
ctx.body.detail = err.errors;
}
ctx.status = 200
}
};
}
}全局使用中間件
所有的路由都會(huì)執(zhí)行的中間件，比如 cookie、session 等等
// src/configuration.ts
import { App, Configuration } from '@midwayjs/decorator';
import * as koa from '@midwayjs/koa';
import { ReportMiddleware } from './middleware/user.middleware';
@Configuration({
imports: [koa]
// ...
})
export class AutoConfiguration {
@App()
app: koa.Application;
async onReady() {
this.app.useMiddleware([ReportMiddleware1, ReportMiddleware2]);
}
}路由使用中間件
單個(gè)/部分路由會(huì)執(zhí)行的中間件，比如某個(gè)路由的前置校驗(yàn)，數(shù)據(jù)處理等等
import { Controller } from '@midwayjs/decorator';
import { ReportMiddleware } from '../middleware/report.middlweare';
@Controller('/', { middleware: [ ReportMiddleware ] })
export class HomeController {
}忽略和匹配路由
在中間件執(zhí)行時(shí)，我們可以添加路由忽略的邏輯。
ignore(ctx: Context): boolean {
// 下面的路由將忽略此中間件
return ctx.path === '/'
|| ctx.path === '/api/auth'
|| ctx.path === '/api/login';
}同理，也可以添加匹配的路由，只有匹配到的路由才會(huì)執(zhí)行該中間件。ignore 和 match 同時(shí)只有一個(gè)會(huì)生效。
match(ctx: Context): boolean {
// 下面的匹配到的路由會(huì)執(zhí)行此中間件
if (ctx.path === '/api/index') {
return true;
}
}2.6 組件使用
參數(shù)校驗(yàn)
Midway 提供了 Validate 組件。 配合 @Validate 和 @Rule 裝飾器，用來(lái)快速定義校驗(yàn)的規(guī)則，幫助用戶(hù)減少這些重復(fù)的代碼。
注意：從 v3 開(kāi)始，@Rule 和 @Validate 裝飾器從 @midwayjs/validate 中導(dǎo)出。
1、 安裝依賴(lài)：$ npm i @midwayjs/validate@3 –save
2、 開(kāi)啟組件：
在 configuration.ts 中增加組件。
import * as validate from ‘@midwayjs/validate';
import { join } from ‘path';
@Configuration({
imports: [ validate],
importConfigs: [join(__dirname, ‘./config')],
})
}3、 定義檢查規(guī)則：
為了方便后續(xù)處理，我們將 user 放到一個(gè) src/dto 目錄中。
例如：
// src/dto/user.ts
import { Rule, RuleType } from ‘@midwayjs/validate';
export class UserDTO {
@Rule(RuleType.number().required())
id: number;
@Rule(RuleType.string().required())
firstName: string;
@Rule(RuleType.string().max(10))
lastName: string;
@Rule(RuleType.number().max(60))
age: number;
}4、 應(yīng)用：
定義完類(lèi)型之后，就可以直接在業(yè)務(wù)代碼中使用了，開(kāi)啟校驗(yàn)?zāi)芰€需要 @Validate 裝飾器。
// src/controller/home.ts
import { Controller, Get, Provide } from ‘@midwayjs/decorator';
import { UserDTO } from ‘./dto/user';
@Controller(‘/api/user')
export class HomeController {
@Post(‘/')
async updateUser(@Body() user: UserDTO ) {
// user.id
}
}Swagger-ui
基于最新的 OpenAPI 3.0.3 實(shí)現(xiàn)了新版的 Swagger 組件。
1、 安裝依賴(lài)：
npm install @midwayjs/swagger@3 --save
npm install swagger-ui-dist --save-dev
2、 開(kāi)啟組件：
import { Configuration } from ‘@midwayjs/decorator';
import * as swagger from ‘@midwayjs/swagger';
@Configuration({
imports: [
{
component: swagger,
enabledEnvironment: [‘local'] //只在 local 環(huán)境下啟用
}]})
export class MainConfiguration {
}然后啟動(dòng)項(xiàng)目，訪(fǎng)問(wèn)地址：
• UI: http://127.0.0.1:7001/swagger-ui/index.html
• JSON: http://127.0.0.1:7001/swagger-ui/index.json
2.7 服務(wù)(service)
在業(yè)務(wù)中，只有控制器（Controller）的代碼是不夠的，一般來(lái)說(shuō)會(huì)有一些業(yè)務(wù)邏輯被抽象到一個(gè)特定的邏輯單元中，我們一般稱(chēng)為服務(wù)（Service）。
提供這個(gè)抽象有以下幾個(gè)好處：
• 保持 Controller 中的邏輯更加簡(jiǎn)潔。
• 保持業(yè)務(wù)邏輯的獨(dú)立性，抽象出來(lái)的 Service 可以被多個(gè) Controller 重復(fù)調(diào)用。
• 將邏輯和展現(xiàn)分離，更容易編寫(xiě)測(cè)試用例。
創(chuàng)建服務(wù)
一般會(huì)存放到 src/service 目錄中。我們來(lái)添加一個(gè) user 服務(wù)。
import { Provide, App, Inject } from '@midwayjs/decorator';
import { Application } from 'egg';
import { HttpService } from '@midwayjs/axios';
var fs = require('fs');
var path = require('path');
@Provide() //拋出服務(wù)
export class UserService {
@App()
app: Application;
@Inject() //依賴(lài)注入
httpService: HttpService;
async getUser(options: any) {
const url = 'https://172.30.154.46:9998/samp/v1/auth/login';
const { data } = await this.httpService.post(url, options);
return data;
}
}使用服務(wù)
在 Controller 處，我們需要來(lái)調(diào)用這個(gè)服務(wù)。傳統(tǒng)的代碼寫(xiě)法，我們需要初始化這個(gè) Class（new），然后將實(shí)例放在需要調(diào)用的地方。在 Midway 中，你不需要這么做，只需要編寫(xiě)我們提供的 “依賴(lài)注入” 的代碼寫(xiě)法。
import { Inject, Controller, Get, Provide, Query } from '@midwayjs/decorator';
import { UserService } from '../service/user';
@Controller('/api/user')
export class APIController {
@Inject()//引入服務(wù)
userService: UserService;
@Get('/')
async getUser(@Query('id') uid) {
const user = await this.userService.getUser(uid);
return {success: true, message: 'OK', data: user};
}
}三、寫(xiě)到最后
Midway 框架是在內(nèi)部已經(jīng)使用使用 5 年以上的 Node.js 框架，有著長(zhǎng)期投入和持續(xù)維護(hù)的團(tuán)隊(duì)做后盾，已經(jīng)在每年的大促場(chǎng)景經(jīng)過(guò)考驗(yàn)，穩(wěn)定性無(wú)須擔(dān)心，并且有著豐富的組件和擴(kuò)展能力，例如數(shù)據(jù)庫(kù)，緩存，定時(shí)任務(wù)，進(jìn)程模型，部署以及 Web，Socket 甚至 Serverless 等新場(chǎng)景的支持。一體化調(diào)用方案可以方便快捷和前端頁(yè)面協(xié)同開(kāi)發(fā)和良好的 TypeScript 定義支持。
所以在項(xiàng)目中應(yīng)用Midway, 能夠?yàn)閼?yīng)用提供更優(yōu)雅的架構(gòu)。
到此這篇關(guān)于前端中間件Midway的使用的文章就介紹到這了,更多相關(guān)Midway的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了Webpack 服務(wù)器端代碼打包的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
javascript:以前寫(xiě)的xmlhttp池,代碼
用javascript寫(xiě)的xmlhttp池代碼，最下面有調(diào)用方法2008-05-05
JavaScript實(shí)現(xiàn)郵箱地址自動(dòng)匹配功能代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)E-mail郵箱地址自動(dòng)匹配功能代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的打印表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
bootstrap模態(tài)框跳轉(zhuǎn)到當(dāng)前模板頁(yè)面 框消失了而背景存在問(wèn)題的解決方法
這篇文章主要介紹了bootstrap模態(tài)框跳轉(zhuǎn)到當(dāng)前模板頁(yè)面，框消失了，而背景依然存在問(wèn)題的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript中實(shí)現(xiàn)異步編程模式的4種方法
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)異步編程模式的4種方法,本文講解了回調(diào)函數(shù)、事件監(jiān)聽(tīng)、發(fā)布/訂閱、Promises對(duì)象4種方法,需要的朋友可以參考下2014-09-09
eval函數(shù)會(huì)將 obj 當(dāng)做代碼去執(zhí)行一遍，下面舉個(gè)例子為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
把input初始值不寫(xiě)value的具體實(shí)現(xiàn)方法
比如制作一個(gè)最常見(jiàn)的,input初始值,一般以前,我都只是寫(xiě)在input的value里,要把初始值單獨(dú)寫(xiě)出來(lái),就用<span>標(biāo)簽寫(xiě),定位在input上,讓它單擊和input獲焦上都消失2013-07-07
JS實(shí)現(xiàn)仿百度文庫(kù)評(píng)分功能
本文給大家分享基于js實(shí)現(xiàn)仿百度文庫(kù)評(píng)分功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
在默認(rèn)的餅狀圖里面,圖例legend顏色是黑色的,有時(shí)候根據(jù)ui需要,根據(jù)不同的背景色,下面這篇文章主要給大家介紹了關(guān)于echarts自定義legend樣式的相關(guān)資料,需要的朋友可以參考下2022-10-10