為什麼我的echarts字型樣式這麼醜？Echarts 柱狀圖、餅圖 等標籤、字型、樣式調整
阿新 • • 發佈：2019-01-23
在專案組做了兩個月的echarts，曾經小白的我現在對echarts的使用也算是得心應手，現將個人這段時間的個人筆記奉上，供大家品鑑、參考！
1、option下調圖形顏色，加： color: ['#ffd285','#ec4863', '#ff733f','#3AA6FF']2、調節echarts背景色，在option下加：backgroundColor: "#404A59",
3、標題樣式調節：
title: [{
text: '會議室飽和度',
left: '40%',
top: '6%',
textStyle: {
color: '#ffd285'
}
}]
4、調節echarts圖形位置，在legend下加：
grid: {
left: '10%',
right: '5%',
top: '16%',
bottom: '6%',
containLabel: true
}
5、調節legend 標籤的樣式：
legend: {
x: '40%',
bottom: '90%',
textStyle: {
color: '#ffd285',
},
data: ['已辦件數', '逾期數'],
textStyle: {
fontSize: 28 ,
color: '#3398DB'
}
}
6、調節X軸樣式：
xAxis: {
type: 'category',
"axisLine": {
lineStyle: {
color: '#c0576d'
}
},
"axisTick": {
"show": false
},
axisLabel: {
textStyle: {
color: '#ffd285'
}
},
boundaryGap: true, //false時X軸從0開始
data: data_x,
axisLabel: {
show: true,
// rotate:-10,
interval:0,
textStyle: {
color: '#fff',
fontWeight:'bold',
fontSize:26
}
}
}
7、調節Y軸樣式《一》：
yAxis: {
"axisLine": { //調節Y軸樣式、顏色
lineStyle: {
color: '#c0576d'
}
},
splitLine: { //調節網格線樣式、顏色
show: true,
lineStyle: {
color: '#c0576d'
}
},
"axisTick": {
"show": false
},
axisLabel: {
textStyle: {
color: '#ffd285'
}
},
type: 'value'
}
調節Y軸樣式《二》：
{
type: 'value',
name: '統計',
min: 0,
max: 250,
interval: 50, //調節Y軸刻度
axisLabel: {
formatter: '{value} ml' //刻度單位
}
}
8、調節柱狀圖樣式：
{
name: '已辦件數',
smooth: true,
type: 'bar',
barWidth : 40,
symbolSize: 8,
// symbol: 'circle',
data: zbsl
}
9、echarts工具箱：
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
}
10、餅圖樣式：
series : [
{
type: 'pie',
radius : '80%',
center: ['40%', '50%'],
textStyle: {
fontSize: '30',
fontWeight: 'bold'
},
data:pie_data,
label: {
normal: {
textStyle: {
fontSize: 25
}
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
11、tooltip 格式拼法：（滑鼠放在圖例上面顯示的樣式） （餅圖中間）
《一》: tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
}
《二》:
tooltip: {
trigger: 'item',
// formatter: "{a} <br/>{b} : {c} ({d}%)",
formatter: "{b} : {c} ({d}%)",
textStyle:{
fontSize:30
}
}
12、 圖例邊緣的結構字型樣式，展示結構，餅圖為例： （餅圖邊緣）
series: [{
// name: chartdata[0].name,
type: 'pie',
label: {
normal: {
formatter: function(params) {
return params.percent + "%\n\n" + params.name;//餅圖邊緣顯示的格式
},
textStyle:{
fontSize:30 //餅圖邊緣顯示的字型大小
}
}
},
labelLine: {
normal: {
length: 40,
length2: 30,
lineStyle: {
color: '#ccc'
}
}
},
// data: chartdata[0].data
data:data1
}],
13、