vue3中使用echarts的儀表盤(pán)組件時(shí)想要把儀表盤(pán)的刻度設(shè)置成為漸變效果，先上效果圖

官方只給出了階段的顏色配置

廢話少說(shuō)，直接上代碼

axisLine: {

           lineStyle: {

             width: 18,

             color: [

               [0.5, {

                 type: 'linear',

                 x: 0,

                 y: 0,

                 x2: 0,

                 y2: 1,

                 colorStops: [{

                   offset: 0, color: 'orange' 

                 }, {

                   offset: 1, color: 'green'

                 }],

                 global: false

               }],

               [1, {

                 type: 'linear',

                 x: 0,

                 y: 0,

                 x2: 0,

                 y2: 1,

                 colorStops: [{

                   offset: 0, color: 'orange'

                 }, {

                   offset: 1, color: 'red'

                 }],

                 global: false

               }]

             ]

           }

         }

儀表盤(pán)的軸線可以被分成不同顏色的多段。每段的結(jié)束位置和顏色可以通過(guò)一個(gè)數(shù)組來(lái)表示。

顏色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六進(jìn)制格式，比如 '#ccc'。除了純色之外顏色也支持漸變色和紋理填充

我們就可以把這里的顏色設(shè)置成為漸變色拉。

注意首尾的顏色要設(shè)置成為一樣的，才能看起來(lái)不會(huì)出現(xiàn)間斷