一、echarts自定義圖例css
echarts自定義圖例css，經常用到的是修改圖例的字體大小、顏色、字體樣式等，如下面的代碼：
//修改圖例字體大小
.legend-text {
font-size: 14px;
}
//修改圖例字體顏色
.legend-text {
fill: #666666;
}
//修改圖例字體樣式
.legend-text {
font-family: sans-serif;
}
通過定義樣式類來修改圖例樣式，代碼中的.legend-text為樣式類名，可根據需求自行修改。
二、echarts自定義y軸刻度
在echarts中，默認情況下，y軸刻度是自動生成的，如果數據量過大，可能會出現刻度過多，影響數據的可視性，這時就需要自定義y軸刻度，如下所示：
option: {
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} K' //設置刻度格式
},
axisTick: {
show: false //隱藏刻度
},
splitLine: {
show: false //隱藏網格線
},
data: ['0K', '50K', '100K', '150K', '200K'] //設置刻度
}
}
由于y軸刻度是value類型，所以可通過給定特定的數值來設置刻度，也可通過axisLabel中的formatter屬性來設置刻度格式，需要注意的是，如果數據過多，刻度太密會影響可視性，可通過調整刻度間距或刪除部分刻度來解決。
三、echarts自定義圖例文本加圖標
有時候，需要在圖例文本中添加特定的圖標或符號，可以通過以下代碼來實現：
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自定義圖例甘特圖，可以通過以下代碼來實現：
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]
}
}
}]
}]
}
通過設置x軸為時間類型，y軸為分類類型，并設置各條甘特條目的起始時間和結束時間來實現自定義圖例甘特圖的繪制。
五、echarts自定義圖例文字
自定義圖例文字，可以通過以下代碼實現：
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中設置各個圖例對應的自定義文字即可實現自定義圖例文字的繪制。
六、echarts自定義圖例排列
echarts自定義圖例排列方式，默認是橫向排列，可通過以下代碼設置為縱向排列：
option: {
legend: {
data: ['蘋果', '梨', '桔子'],
orient: 'vertical' //縱向排列
}
}
通過將orient屬性的值設置為‘vertical’即可實現縱向排列的自定義圖例。
七、echarts自定義圖例帶合計
echarts自定義圖例帶合計，可通過以下代碼實現：
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中添加一個名稱為‘合計’的圖例，并設置該圖例的顏色，可在圖例中添加合計項，同時，通過在series中添加第二個餅圖來繪制合計部分的餅圖，并設置其在界面中的位置。
八、echarts自定義圖例含合計
除了在圖例中添加合計項外，也可以通過在餅圖中添加合計項的方式來繪制自定義圖例，具體實現代碼如下：
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中添加名稱為‘合計’的數據項，并設置其顏色，即可在餅圖中添加合計項，從而實現自定義圖例。
九、echarts圖例樣式
echarts圖例樣式，可以通過以下代碼實現：
option: {
legend: {
data: ['蘋果', '梨', '桔子'],
textStyle: {
fontWeight: 'bold',
fontSize: 16,
lineHeight: 40
},
backgroundColor: 'rgba(255, 255, 255, 0.9)',
borderRadius: 5,
padding: 10
},
}
通過設置textStyle屬性來修改文字樣式，設置backgroundColor屬性來修改圖例背景顏色，設置borderRadius屬性來修改圖例圓角，設置padding屬性來控制圖例內部的間距。
十、echarts圖例位置設置
echarts圖例位置設置，可以通過以下代碼實現：
option: {
legend: {
data: ['蘋果', '梨', '桔子'],
orient: 'vertical',
left: 10, //圖例距離左邊距離
top: 20, //圖例距離上方距離
align: 'auto' //圖例水平對齊方式
},
}
通過設置left和top屬性來控制圖例與界面左上角的距離，align屬性來控制圖例的水平對齊方式，可根據自身需求自行調整。
京公網安備 11010802030320號