一、echarts自定義圖例css
echarts自定義圖例css，經(jīng)常用到的是修改圖例的字體大小、顏色、字體樣式等，如下面的代碼：
//修改圖例字體大小
.legend-text {
font-size: 14px;
}
//修改圖例字體顏色
.legend-text {
fill: #666666;
}
//修改圖例字體樣式
.legend-text {
font-family: sans-serif;
}
通過定義樣式類來修改圖例樣式，代碼中的.legend-text為樣式類名，可根據(jù)需求自行修改。
二、echarts自定義y軸刻度
在echarts中，默認情況下，y軸刻度是自動生成的，如果數(shù)據(jù)量過大，可能會出現(xiàn)刻度過多，影響數(shù)據(jù)的可視性，這時就需要自定義y軸刻度，如下所示：
option: {
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} K' //設(shè)置刻度格式
},
axisTick: {
show: false //隱藏刻度
},
splitLine: {
show: false //隱藏網(wǎng)格線
},
data: ['0K', '50K', '100K', '150K', '200K'] //設(shè)置刻度
}
}
由于y軸刻度是value類型，所以可通過給定特定的數(shù)值來設(shè)置刻度，也可通過axisLabel中的formatter屬性來設(shè)置刻度格式，需要注意的是，如果數(shù)據(jù)過多，刻度太密會影響可視性，可通過調(diào)整刻度間距或刪除部分刻度來解決。
三、echarts自定義圖例文本加圖標
有時候，需要在圖例文本中添加特定的圖標或符號，可以通過以下代碼來實現(xiàn)：
option: {
legend: {
data: [{
name: '男性會員',
textStyle: {
fontFamily: 'sans-serif',
fontSize: '14px',
color: '#333'
},
icon: 'image:///img/male.png' //添加圖標
}, {
name: '女性會員',
textStyle: {
fontFamily: 'sans-serif',
fontSize: '14px',
color: '#333'
},
icon: 'image:///img/female.png' //添加圖標
}]
},
}
代碼中，icon屬性的值為添加的圖標路徑，需先將圖標上傳至服務器，并替換代碼中的路徑。
四、echarts自定義圖例甘特圖
echarts自定義圖例甘特圖，可以通過以下代碼來實現(xiàn)：
option: {
legend: {
data: ['任務1', '任務2', '任務3', '任務4'],
textStyle: {
fontSize: 14,
fontWeight: 'bold'
},
top: '10'
},
xAxis: {
type: 'time',
splitLine: {
show: false
},
axisLine: {
onZero: false
}
},
yAxis: {
type: 'category',
data: ['任務1', '任務2', '任務3', '任務4'],
splitLine: {
show: false
},
},
series: [{
type: 'bar',
name: '任務1',
stack: '任務',
itemStyle: {
normal: {
color: '#3ba0ff',
barBorderRadius: [0, 5, 5, 0]
}
},
data: [{
value: [
new Date('2022-07-01'),
new Date('2022-07-07'),
],
itemStyle: {
normal: {
color: '#3ba0ff',
barBorderRadius: [0, 5, 5, 0]
}
}
}]
}, {
type: 'bar',
name: '任務2',
stack: '任務',
itemStyle: {
normal: {
color: '#6acf63',
barBorderRadius: [0, 5, 5, 0]
}
},
data: [{
value: [
new Date('2022-07-04'),
new Date('2022-07-08'),
],
itemStyle: {
normal: {
color: '#6acf63',
barBorderRadius: [0, 5, 5, 0]
}
}
}]
}, {
type: 'bar',
name: '任務3',
stack: '任務',
itemStyle: {
normal: {
color: '#fec42c',
barBorderRadius: [0, 5, 5, 0]
}
},
data: [{
value: [
new Date('2022-07-05'),
new Date('2022-07-10'),
],
itemStyle: {
normal: {
color: '#fec42c',
barBorderRadius: [0, 5, 5, 0]
}
}
}]
}, {
type: 'bar',
name: '任務4',
stack: '任務',
itemStyle: {
normal: {
color: '#f74e41',
barBorderRadius: [0, 5, 5, 0]
}
},
data: [{
value: [
new Date('2022-07-03'),
new Date('2022-07-06'),
],
itemStyle: {
normal: {
color: '#f74e41',
barBorderRadius: [0, 5, 5, 0]
}
}
}]
}]
}
通過設(shè)置x軸為時間類型，y軸為分類類型，并設(shè)置各條甘特條目的起始時間和結(jié)束時間來實現(xiàn)自定義圖例甘特圖的繪制。
五、echarts自定義圖例文字
自定義圖例文字，可以通過以下代碼實現(xiàn)：
option: {
legend: {
data: [
{name:'蘋果'},
{name:'梨'},
{name:'桔子'}
],
formatter: function (name) {
if (name ==='蘋果') {
return 'This is an apple'
} else if (name === '梨') {
return 'This is a pear'
} else {
return 'This is an orange'
}
}
},
通過給定各個圖例的名稱，并在formatter中設(shè)置各個圖例對應的自定義文字即可實現(xiàn)自定義圖例文字的繪制。
六、echarts自定義圖例排列
echarts自定義圖例排列方式，默認是橫向排列，可通過以下代碼設(shè)置為縱向排列：
option: {
legend: {
data: ['蘋果', '梨', '桔子'],
orient: 'vertical' //縱向排列
}
}
通過將orient屬性的值設(shè)置為‘vertical’即可實現(xiàn)縱向排列的自定義圖例。
七、echarts自定義圖例帶合計
echarts自定義圖例帶合計，可通過以下代碼實現(xiàn)：
option: {
legend: {
data: ['蘋果', '梨', '桔子', {
name: '合計',
itemStyle: {
normal: {
color: '#f74e41'
}
}
}],
top: 20
},
series: [{
type: 'pie',
data: [{
name: '蘋果',
value: 12
}, {
name: '梨',
value: 13
}, {
name: '桔子',
value: 15
}],
label: {
show: false
}
}, {
type: 'pie',
center: ['75%', '50%'],
radius: [0, '40%'],
data: [{
name: '蘋果',
value: 12
}, {
name: '梨',
value: 13
}, {
name: '桔子',
value: 15
}],
label: {
show: false
}
}]
}
通過在legend中添加一個名稱為‘合計’的圖例，并設(shè)置該圖例的顏色，可在圖例中添加合計項，同時，通過在series中添加第二個餅圖來繪制合計部分的餅圖，并設(shè)置其在界面中的位置。
八、echarts自定義圖例含合計
除了在圖例中添加合計項外，也可以通過在餅圖中添加合計項的方式來繪制自定義圖例，具體實現(xiàn)代碼如下：
option: {
legend: {
data: ['蘋果', '梨', '桔子'],
top: 20
},
series: [{
type: 'pie',
data: [{
name: '蘋果',
value: 12
}, {
name: '梨',
value: 13
}, {
name: '桔子',
value: 15
}, {
name: '合計',
value: 40,
itemStyle: {
normal: {
color: '#f74e41'
}
}
}],
label: {
show: false
}
}]
}
通過在series中添加名稱為‘合計’的數(shù)據(jù)項，并設(shè)置其顏色，即可在餅圖中添加合計項，從而實現(xiàn)自定義圖例。
九、echarts圖例樣式
echarts圖例樣式，可以通過以下代碼實現(xiàn)：
option: {
legend: {
data: ['蘋果', '梨', '桔子'],
textStyle: {
fontWeight: 'bold',
fontSize: 16,
lineHeight: 40
},
backgroundColor: 'rgba(255, 255, 255, 0.9)',
borderRadius: 5,
padding: 10
},
}
通過設(shè)置textStyle屬性來修改文字樣式，設(shè)置backgroundColor屬性來修改圖例背景顏色，設(shè)置borderRadius屬性來修改圖例圓角，設(shè)置padding屬性來控制圖例內(nèi)部的間距。
十、echarts圖例位置設(shè)置
echarts圖例位置設(shè)置，可以通過以下代碼實現(xiàn)：
option: {
legend: {
data: ['蘋果', '梨', '桔子'],
orient: 'vertical',
left: 10, //圖例距離左邊距離
top: 20, //圖例距離上方距離
align: 'auto' //圖例水平對齊方式
},
}
通過設(shè)置left和top屬性來控制圖例與界面左上角的距離，align屬性來控制圖例的水平對齊方式，可根據(jù)自身需求自行調(diào)整。
京公網(wǎng)安備 11010802030320號