echarts中幾種漸變方式的具體實現(xiàn)方式
更新時間：2022年11月14日 11:37:24 作者：iuvc
在使用echarts繪制圖表時,有的時候需要使用漸變色,下面這篇文章主要給大家介紹了關(guān)于echarts中幾種漸變方式的具體實現(xiàn)方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
在echarts 中實現(xiàn)漸變的具體幾種方式
在我們?nèi)粘Ｊ褂肊charts圖表過程中，會遇到一些要求我們的echarts圖表能實現(xiàn)顏色漸變，以下幾種方式就能滿足你的需求。文檔參考 ECharts option 文檔 。
方式一：
線性漸變：new echarts.graphic.LinearGradient(x,y,x2,y2,offset,boolean)
- x,y,x2,y2，包圍框中的百分比，數(shù)值范圍 0-1；
- offset，類似顏色線性梯度，數(shù)值范圍 0-1；
- boolean，默認(rèn)false，若最后參數(shù)為true，前四個參數(shù)將使用像素位置。
徑向漸變：new echarts.graphic.RadialGradient(x,y,r,offset,boolean)
- x,y，代表圓心，數(shù)值范圍 0-1；
- r，代表半徑，數(shù)值范圍 0-1；
- offset，類似顏色線性梯度，數(shù)值范圍 0-1；
- boolean，默認(rèn)false，若最后參數(shù)為true，前四個參數(shù)將使用像素位置。
采用圖片顯示：new echarts.graphic.Pattern(imageDom,repeat)
- imageDom，僅支持 HTMLImageElement 和 HTMLCanvasElement形式圖片；
- repeat，默認(rèn)’repeat’，可取值還有’repeat-x’, ‘repeat-y’, or ‘no-repeat’；
代碼示例：
// 創(chuàng)建 HTMLImageElement
// HTMLCanvasElement請自行研究去
var imageDom = new Image(); // Image 構(gòu)造函數(shù)
imageDom.src = '/static/img/map_bg.png'; // 圖片路徑
imageDom.alt = '這是一張圖片';
// 應(yīng)用如下
// color:{
// image: imageDom, // 支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串
// repeat: 'repeat' // 是否平鋪，可以是 'repeat-x', 'repeat-y', 'no-repeat'
// }
方式二：colorStops
線性漸變：colorStops - linear
- type：‘linear’，線性漸變
- x,y,x2,y2，代表包圍框中的百分比，數(shù)值范圍 0-1；
- colorStops，類似顏色線性梯度，數(shù)值范圍 0-1；
- global，默認(rèn)false
徑向漸變：colorStops - radial
- type：‘radial’，徑向漸變
- x,y，代表圓心，數(shù)值范圍 0-1；
- r，代表半徑，數(shù)值范圍 0-1；
- colorStops，類似顏色線性梯度，數(shù)值范圍 0-1；
- global，默認(rèn)false
效果圖：
代碼如下：
var imageDom = new Image(); // Image 構(gòu)造函數(shù)
imageDom.src = 'https://github.com/iuvc/magicJs/blob/main/public/images/issues/blue-white-background.jpg?raw=true';
imageDom.alt = '測試';
option = {
title: {
text: 'echarts 漸變',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/> : {c} (vvxyksv9kd%)'
},
legend: {
top: 40,
left: 0,
orient: 'vertical',
data: [
'線性漸變區(qū)域 LinearGradient',
'徑向漸變區(qū)域 RadialGradient',
'線性漸變區(qū)域 ColorStep-linear',
'徑向漸變區(qū)域 ColorStep-radial',
'圖片顯示'
]
},
series: [
{
name: 'Radius Mode',
type: 'pie',
radius: [20, '70%'],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
show: true
},
emphasis: {
label: {
show: true
}
},
data: [
{
value: 40,
name: '線性漸變區(qū)域 LinearGradient',
itemStyle: {
// 線性漸變方式一 ======================================================
// LinearGradient前四個分參數(shù)別代表右，下，左，上，數(shù)值0-1
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255,174,19,0.7)'
},
{
offset: 1,
color: 'rgba(255,174,19,0.05)'
}
])
}
},
{
value: 40,
name: '徑向漸變區(qū)域 RadialGradient',
itemStyle: {
// 徑向漸變方式一 ======================================================
// RadialGradient前三個分參數(shù)別代表圓心（x,y），半徑（數(shù)值0-1）
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [
{
offset: 0,
color: 'rgba(255,154,119,1)'
},
{
offset: 1,
color: 'rgba(255,154,119,0.05)'
}
])
}
},
{
value: 33,
name: '線性漸變區(qū)域 ColorStep-linear',
itemStyle: {
// 線性漸變方式二 ======================================================
// x,y,x2,y2數(shù)值同LinearGradient前四個參數(shù)分別代表右，下，左，上，數(shù)值0-1
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(60,216,208,0.7)' // 0% 處的顏色
},
{
offset: 1,
color: 'rgba(60,216,208,0.05)' // 100% 處的顏色
}
],
global: false // 缺省為 false
}
}
},
{
value: 28,
name: '徑向漸變區(qū)域 ColorStep-radial',
itemStyle: {
// 徑向漸變方式二 ======================================================
// x 0.5 y 0.5 代表圓心，r 代表半徑
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
colorStops: [
{
offset: 0,
color: 'rgba(82,216,60, 0.7)' // 0% 處的顏色
},
{
offset: 1,
color: 'rgba(82,216,60, 0.05)' // 100% 處的顏色
}
],
global: false // 缺省為 false
}
}
},
{
value: 22,
name: '圖片顯示' ,
itemStyle: {
// 圖片顯示 ======================================================
color: {
image: imageDom, // 支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串
repeat: 'repeat' // 是否平鋪，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
}
}
]
}
]
};其他示例：
代碼如下：
option = {
title: {
text: '漸變區(qū)域圖'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
top: 15,
data: [
'線性漸變區(qū)域 LinearGradient',
'線性漸變區(qū)域 ColorStep-linear',
'徑向漸變區(qū)域 ColorStep-radial',
'徑向漸變區(qū)域 RadialGradient'
]
},
grid: {
top: 55,
left: 45,
right: 15,
bottom: 25
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLine: {
show: false,
onZero: true,
lineStyle: {
color: '#999999'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
data: [
'00:00',
'00:15',
'00:30',
'00:45',
'01:00',
'01:15',
'01:30',
'01:45',
'02:00',
'02:15',
'02:30',
'02:45',
'03:00',
'03:15',
'03:30',
'03:45',
'04:00',
'04:15',
'04:30',
'04:45',
'05:00',
'05:15',
'05:30',
'05:45',
'06:00',
'06:15',
'06:30',
'06:45',
'07:00',
'07:15',
'07:30',
'07:45',
'08:00',
'08:15',
'08:30',
'08:45',
'09:00',
'09:15',
'09:30',
'09:45',
'10:00',
'10:15',
'10:30',
'10:45',
'11:00',
'11:15'
]
}
],
yAxis: [
{
type: 'category',
boundaryGap: true,
axisLine: {
show: false,
onZero: true,
lineStyle: {
color: '#999999'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: [
{
name: '線性漸變區(qū)域 LinearGradient',
type: 'line',
stack: '總量',
data: [
1.67, 1.25, 1.02, 1.44, 1.81, 1.13, 1.58, 1.13, 1.56, 1.3, 1.9, 1.3,
1.55, 1.94, 1.69, 1.69, 1.8, 1.21, 1.29, 1.58, 1.04, 1.67, 1.07, 1.18,
1.57, 1.05, 1.63, 1.28, 1.28, 1.58, 1.88, 1.2, 1.63, 1.59, 1.43, 1.25,
1.68, 1.25, 1.12, 1.31, 1.6, 1.62, 1.57, 1.2, 1.02, 1.42, 1.91, 1.97,
1.32, 1.06, 1.3, 1.22, 1.74, 1.02, 1.75, 1.2
],
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255,174,19,0.7)'
},
{
offset: 1,
color: 'rgba(255,174,19,0.05)'
}
])
},
itemStyle: {
color: 'rgba(255,174,19,.1)'
},
lineStyle: {
color: 'rgba(255,174,19,.1)'
},
smooth: true,
smoothMonotone: 'x',
symbol: 'circle'
},
{
name: '線性漸變區(qū)域 ColorStep-linear',
type: 'line',
stack: '總量',
data: [
2.31, 2.27, 1.64, 1.56, 1.75, 1.62, 2.18, 2.12, 1.97, 2.45, 2.39, 2.3,
1.78, 1.82, 1.82, 1.76, 1.78, 1.63, 1.54, 1.6, 1.61, 1.68, 1.67, 1.67,
2.34, 1.69, 2.18, 2.25, 2.44, 2.4, 1.97, 2.05, 2.05, 2.46, 1.62, 1.66,
1.66, 1.87, 1.59, 1.99, 2.45, 2.05, 1.53, 2.39, 1.77, 1.99, 2.14, 2.33,
1.55, 1.87, 1.65, 2.02, 1.68, 2.13, 1.88, 2.19
],
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(60,216,208,0.7)' // 0% 處的顏色
},
{
offset: 1,
color: 'rgba(60,216,208,0.05)' // 100% 處的顏色
}
],
global: false // 缺省為 false
}
},
itemStyle: {
color: 'rgba(60,216,208,.1)'
},
lineStyle: {
color: 'rgba(60,216,208,.1)'
},
smooth: true,
smoothMonotone: 'x',
symbol: 'circle'
},
{
name: '徑向漸變區(qū)域 RadialGradient',
type: 'line',
stack: '總量',
label: {
normal: {
show: true,
position: 'top'
}
},
data: [
2.69, 2.47, 2.53, 3.31, 3.25, 3.12, 2.66, 2.58, 3.01, 3.21, 2.69, 2.72,
2.67, 3.34, 3.21, 2.79, 3.23, 3.07, 2.84, 2.46, 3.25, 2.92, 2.42, 2.61,
2.83, 3.29, 2.44, 3.38, 2.82, 2.56, 2.94, 2.42, 2.95, 2.82, 3.18, 2.6,
2.91, 3.07, 2.57, 2.45, 2.45, 2.94, 2.86, 3.12, 3.07, 3.02, 2.53, 2.64,
2.97, 2.62, 2.79, 2.68, 3.24, 3.38, 2.67, 3.17
],
areaStyle: {
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [
{
offset: 0,
color: 'rgba(255,154,119,.7)'
},
{
offset: 1,
color: 'rgba(255,154,119,0.05)'
}
])
},
itemStyle: {
color: 'rgba(255,154,119,.1)'
},
lineStyle: {
color: 'rgba(255,154,119,.1)'
},
smooth: true,
smoothMonotone: 'x',
symbol: 'circle'
},
{
name: '徑向漸變區(qū)域 ColorStep-radial',
type: 'line',
stack: '總量',
label: {
normal: {
show: true,
position: 'top'
}
},
data: [
2.79, 2.57, 2.63, 3.41, 3.35, 3.22, 2.76, 2.68, 3.11, 3.31, 2.79, 2.82,
2.77, 3.44, 3.31, 2.89, 3.33, 3.17, 2.94, 2.56, 3.35, 3.02, 2.52, 2.71,
2.93, 3.39, 2.54, 3.48, 2.92, 2.66, 3.04, 2.52, 3.05, 2.92, 3.28, 2.7,
3.01, 3.17, 2.67, 2.55, 2.55, 3.04, 2.96, 3.22, 3.17, 3.12, 2.63, 2.74,
3.07, 2.72, 2.89, 2.78, 3.34, 3.48, 2.77, 3.27
],
areaStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
colorStops: [
{
offset: 0,
color: 'rgba(82,216,60, 0.7)' // 0% 處的顏色
},
{
offset: 1,
color: 'rgba(82,216,60, 0.05)' // 100% 處的顏色
}
],
global: false // 缺省為 false
}
},
itemStyle: {
color: 'rgba(82,216,60,.1)'
},
lineStyle: {
color: 'rgba(82,216,60,.1)'
},
smooth: true,
smoothMonotone: 'x',
symbol: 'circle'
}
]
};總結(jié)
到此這篇關(guān)于echarts中幾種漸變方式的具體實現(xiàn)的文章就介紹到這了,更多相關(guān)echarts漸變方式實現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實現(xiàn)固定顯示區(qū)域內(nèi)自動縮放圖片的方法
這篇文章主要介紹了js實現(xiàn)固定顯示區(qū)域內(nèi)自動縮放圖片的方法,實例分析了javascript操作頁面元素及屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了qrcode生成二維碼微信長按無法識別問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
微信小程序如何實現(xiàn)radio單選框單擊打勾和取消
這篇文章主要介紹了微信小程序如何實現(xiàn)radio單選框單擊打勾和取消,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了JS實現(xiàn)的Select三級下拉菜單,涉及javascript動態(tài)創(chuàng)建下拉列表的技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
請指出一下代碼的性能問題，并經(jīng)行優(yōu)化。2010-07-07
在業(yè)務(wù)開發(fā)過程中，我們經(jīng)常會遇到多個異步任務(wù)并發(fā)執(zhí)行的情況，待所有異步任務(wù)結(jié)束之后再執(zhí)行我們的業(yè)務(wù)邏輯，那么js Promise并發(fā)控制數(shù)量是多少，本文就來介紹一下2021-08-08
javaScript(JS)替換節(jié)點實現(xiàn)思路介紹
獲取要替換的節(jié)點,這種方法只適用于IE瀏覽器以及適用于各種瀏覽器的寫法，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
js分頁腳本實現(xiàn)代碼。2009-05-05
Javascript 調(diào)用 ActionScript 的簡單方法
在Flex中，ActionScript調(diào)用Javascript是比較簡單的，說白了就是，在html里，怎么調(diào)用Javascript，在ActionScript就怎么調(diào)用就可以了。接下來通過本文給大家介紹js 調(diào)用 actionscript方法，感興趣的朋友一起看看吧2016-09-09