常用配置詳解
阿新 • • 發佈：2021-11-08
echarts常用配置
標題元件：title
option = { title:{ text:"主標題測試", textStyle:{//主標題樣式 color:"red", fontStyle:"oblique", fontWeight:"bolder", fontFamily:"Kaiti", fontSize:20, lineHeight:20, }, subtext:"副標題測試", subtextStyle:{ color:"blue", fontStyle:"normal", fontWeight:"bold", fontFamily:"微軟雅黑", fontSize:16, lineHeight:20, }, textAlign:"center", left:"50%",//也可以是具體的數值：20，類似的還有top,bottom,right top:'40%', backgroundColor:'#fff',//(預設透明transparent) rgb,rgba,#fff都能用 shadowColor:'black', shadowBlur:15, //注意：此配置項生效的前提是，設定了 show: true 以及值不為 tranparent 的背景色 backgroundColor shadowOffsetX:5, shadowOffsetY:5, } };
效果圖
圖例元件：legend
option = { legend: {// left:"center", orient:'horizontal',//水平，垂直（vertical） itemGap:10, data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] //data中的名稱必須與series中的每個資料的name相對應， //如果series中的name未出現data中的資料名稱，則不顯示圖例，但資料會顯示 }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series:[ { name: 'Email', type: 'bar', stack: 'a', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Union Ads', type: 'bar', stack: 'a', data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video Ads', type: 'line', stack: 'b', data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Direct', type: 'line', stack: 'b', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '', type: 'line', stack: 'borderWidth', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] };
效果圖
網格元件：grid
option = { grid: { left: "5%", top: "5%", right: "5%", bottom: "10%" }, xAxis: [{ type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], axisTick: { alignWithLabel: true //類目軸中在 boundaryGap 為 true 的時候有效，可以保證刻度線和標籤對齊 } }], yAxis: [{ type: "value" }], series: [{ name: "直接訪問", type: "bar", barWidth: "60%", data: [10, 52, 200, 334, 390, 330, 220] }] };
效果圖
兩軸：xAxis,yAxis
option = {
xAxis: [{
name:'星期',
nameLocation:'end',
//'start','center','middle','end'
nameTextStyle:{
color:'blue',
fontSize:20,
//....
},
nameGap:30,//距離軸的距離
type: "category",
//'value':數值軸，適用於連續資料
//'category' 類目軸，適用於離散的類目資料。
data: [
{
value:"Mon",
textStyle:{
color:'red',
}
},
{
value:"Tue",
textStyle:{
color:'blue',
}
},
{
value:"Wed",
textStyle:{
color:'rgb(200,240,6)',
}
},
{
value:"Thu",
textStyle:{
color:'rgb(100,290,236)',
}
},
{
value:"Fri",
textStyle:{
color:'rgb(10,450,66)',
}
},
{
value:"Sat",
textStyle:{
color:'yellow',
}
},
{
value:"Sun",
textStyle:{
color:'black',
}
}
],
}],
yAxis: [{
name:'訪問量',
nameLocation:'center',
nameTextStyle:{
color:'blue',
fontSize:18,
padding:[111111110,40,30,400]//此時第一個數設定無效
//....
},
nameRotate:90,//當使用 nameLocation:'center'時預設為90
//當nameRotate:0，時padding：[0,0,30,400] 只有第2個值有效
type: "value",
min:40,//刻度最小值
max:450,//刻度最大值
axisLabel:{//標籤刻度樣式
rotate:50,//刻度標籤旋轉的角度,
//在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。
formatter:'{value} 個人',
backgroundColor:'rgb(2,233,44)',
//樣式設定基本都類似
}
}],
series: [{
name: "直接訪問",
type: "bar",
barWidth: "60%",
data: [50, 70, 200, 334, 390, 330, 220]
}]
}
效果圖
雷達座標：radar
option = {
radar: {
center:['50%', '50%'],//center: [400, 300],
shape: 'circle',//polygon(預設)
radius:200,//'75%' 圓的半徑
indicator: [//指標
{ name: '指標一', max: 6500 },
{ name: '指標二', max: 16000 },
{ name: '指標三', max: 30000 },
{ name: '指標四', max: 38000 },
{ name: '指標五', max: 52000 },
{ name: '指標六', max: 25000 }
],
name:{//指標名稱樣式
color:'rgb(20,33,232)',//black,#333
fontStyle:'normal',
//...fontWeight,fontFamily.......
},
nameGap:20,
axisTick:{//刻度
show:true,//預設關閉
//...和上面的例子中的用法基本類似
}
},
};
效果圖：
提示框元件：tooltip
option = {
tooltip:{
show:true,
trigger:'item',//觸發型別
//‘item’資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用
//'axis'座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
//'none',什麼都不觸發。
//showContent:true,//是否顯示提示框浮層，預設顯示
formatter:'{b}: {c}',
//模板變數有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，資料名，資料值等
//折線（區域）圖、柱狀（條形）圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）
axisPointer:{
type:'cross',//則此時座標系會自動選擇顯示哪個軸的 axisPointer
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
效果圖：
系列：series
option :{
series:[
{
type:'line',//折線;bar柱狀圖，pie餅圖，scatter散點，radar雷達圖
name:'系列名稱',//用於tooltip的顯示，legend 的圖例篩選
xAxisIndex:0,//預設為0
//使用的 x 軸的 index，在單個圖表例項中存在多個 x 軸的時候有用。
yAxisIndex:1,
//使用的 x 軸的 index，在單個圖表例項中存在多個 x 軸的時候有用
symbol:'circle',
symbolSize:4,
stack:'a',//資料堆疊，同個類目軸上系列配置相同的stack值後
//後一個系列的值會在前一個系列的值上相加。
label:{
//圖形上的文字標籤樣式可用於說明圖形的一些資料資訊，比如值，名稱等
show:true,
// 絕對的畫素值
position: [10, 10],
// 相對的百分比
//position: ['50%', '50%']
color:'#fff',
fontStyle:'oblique',
//.....
},
areaStyle:{//區域填充樣式
color:"#000"
},
lineStyle:{
type : 'solid',
},
emphasis:{ //折線圖的高亮狀態。\
focus:'none',//不淡出其它圖形(預設),
//'self' 只聚焦（不淡出）當前高亮的資料的圖形
//'series' 聚焦當前高亮的資料所在的系列的所有圖形。
label:{
//設定標籤樣式
},
},
data:[
{
name:'資料項名稱',
value:[],//單個數據項的數值
}
],
markLine:{
//圖表標線。
}
},
]
};
常用元件介紹到此結束，想知道更多元件詳情請移步：https://echarts.apache.org/zh/option.html#title