echarts常用屬性解析
剛開始使用配置項(xiàng)手冊(cè)的時(shí)候最深的感受就是不知道哪個(gè)參數(shù)對(duì)應(yīng)哪個(gè)屬性银伟，什么鬼伍伤，于是開始看demo結(jié)合百度各種搜才能基本滿足設(shè)計(jì)圖的要求并徘，下面我總結(jié)了幾種典型的配置屬性以供參考，湊合看看扰魂，不是很下飯麦乞。
（以折線圖（Line）為例）
1. title（標(biāo)題組件：包含主標(biāo)題和副標(biāo)題）
標(biāo)題組件中一般包含主標(biāo)題和副標(biāo)題的文字屬性設(shè)置，添加超鏈接的設(shè)置阅爽，標(biāo)題組件的內(nèi)邊距路幸、主標(biāo)題與副標(biāo)題的間距設(shè)置荐开，標(biāo)題組件的位置設(shè)置付翁，背景，邊框晃听，陰影設(shè)置百侧，圖層值設(shè)置等砰识，廢話不多說(shuō)，請(qǐng)直接看圖：
title: {
text: '我是demo的標(biāo)題佣渴，我現(xiàn)在是可點(diǎn)擊的辫狼，\n點(diǎn)我之后會(huì)跳轉(zhuǎn)到百度的界面',
link: 'https://www.baidu.com/',
target: 'self',
textStyle: {
color: '#888',
fontStyle: 'italic',
fontWeight: 'lighter',
fontSize: 14
},
subtext: '我是副標(biāo)題',
sublink: 'https://www.baidu.com/',
subtarget: 'blank',
subtextStyle: {},
padding: [20, 20, 20, 0],
itemGap: 20,
left: 'center',
backgroundColor:'#fff'
}
2.legend（圖例組件）
圖例組件中一般包含圖例組件的類型，位置辛润，寬度膨处，排版模式，內(nèi)邊距砂竖，每項(xiàng)圖例之間的邊距真椿，寬高，是否在縮放時(shí)保持自身的長(zhǎng)寬比乎澄，格式化文本突硝，關(guān)閉圖例時(shí)的顏色， 圖例文字的相關(guān)設(shè)置置济，圖例形狀的相關(guān)設(shè)置解恰，組件背景顏色，組件邊框以及組件邊框圓度等的設(shè)置：
legend: {
type: 'scroll',
show: true,
left: 20,
top: '10%',
width: '80%',
orient: 'horizontal',
padding: [10, 10, 10, 5],
itemGap: 20,
itemWidth: 50,
itemHeight: 30,
symbolKeepAspect: true,
formatter: '測(cè)試 {name}',
selectedMode: true,
inactiveColor: 'red',
textStyle: {},
data: [
{
name: '郵件營(yíng)銷',
icon: 'bar',
textStyle: {}
},
'聯(lián)盟廣告',
'視頻廣告',
'直接訪問',
'郵件營(yíng)銷1',
'聯(lián)盟廣告1',
'視頻廣告1',
'直接訪問1'
],
backgroundColor: '#fff',
borderColor: 'red',
borderWidth: 2,
barBorderRadius: 20
}
3.grid（直角坐標(biāo)系內(nèi)繪圖網(wǎng)格）
繪圖網(wǎng)格組件一般包含位置浙于，背景顏色护盈，邊框顏色邊框?qū)挾鹊鹊脑O(shè)置：
grid: {
show: true,
left: 'center',
top: '10%',
width: '80%',
backgroundColor: '#fff',
borderColor: '#000',
borderWidth: 2
}
（以柱狀圖（Bar）為例）
4.xAxis（直角坐標(biāo)系grid的x軸）
該組件可設(shè)置x的標(biāo)簽，刻度路媚，軸線黄琼，網(wǎng)格，分隔區(qū)域整慎，高亮提示等部分脏款，具體可看案例：
xAxis: [
{
show: true,
position: 'bottom',
type : 'category',
name: '時(shí)間',
nameLocation: 'start',
nameTextStyle: {
color: '#666'
},
nameGap: 30,
inverse: false,
boundaryGap: true,
// min: 2,
axisLine: {
show: true,
lineStyle: {
color: '#FA8072',
width: 2,
type: 'dashed',
opacity: 0.5
}
},
axisTick: {
show: true,
alignWithLabel: true,
inside: true,
length: 100,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
show: true,
inside: true,
margin: 6,
color: '#fff',
fontStyle: 'italic',
align: 'center',
verticalAlign: 'bottom'
},
splitLine: {
show: true,
lineStyle: {
color: '#FFE4E1',
width: 2,
type: 'dashed'
}
},
splitArea: {
show: true,
areaStyle: {}
},
data: [
{
value: 'Mon',
textStyle: {
color: 'red'
}
},
{
value: 'Tue',
textStyle: {
color: 'red'
}
},
{
value: 'Wed',
textStyle: {
color: 'pink'
}
},
{
value: 'Thu',
textStyle: {
color: 'pink'
}
},
{
value: 'Fri',
textStyle: {
color: 'pink'
}
},
'sat',
'sun'
],
axisPointer: {
show: true,
type: 'shadow',
label: {},
lineStyle:{}
},
z: 2
}
]
以下圖片為設(shè)置xAxis組件基本信息，坐標(biāo)軸軸線設(shè)置裤园，刻度線設(shè)置撤师，刻度標(biāo)簽設(shè)置等信息：
以下圖片為設(shè)置xAxis組件網(wǎng)格線，分隔區(qū)域以及數(shù)據(jù)的相關(guān)設(shè)置：
5.dataZoom（框選型數(shù)據(jù)區(qū)域縮放組件）
可設(shè)置多個(gè)區(qū)域縮放組件拧揽，位于dataZoom數(shù)組內(nèi)剃盾，有兩種形式組件類型，slider和inside下文設(shè)置以slider為例：
dataZoom: {
type: 'slider',
show: true,
backgroundColor: '#87CEFA',
dataBackground: {
lineStyle: {
color: '#000'
},
areaStyle: {
color: 'red'
}
},
borderColor: 'green',
// handleIcon: 'image://http://xxx.xxx.xxx/a/b.png',
// handleSize: '100%',
textStyle: {
color: 'red'
},
orient: 'horizontal',
left: 'center'
}
以下為配置的效果圖說(shuō)明：
6.series（系列列表）：
系列圖可對(duì)各種類型的圖形按照設(shè)計(jì)圖的要求進(jìn)行具體配置淤袜，以下實(shí)例以line圖為例：
series: [
{
type:'line',
name:'模擬數(shù)據(jù)',
symbol: 'circle',
symbolSize: 10,
symbolOffset: [0, 0],
showSymbol: true,
legendHoverLink: true,
cursor: 'pointer',
step: false,
label: {
show: true,
position: 'top',
distance: 30,
color: '#87CEFA'
},
itemStyle: {
color: '#fff',
borderColor: '#000',
borderType: 'solid'
},
lineStyle: {
color: '#fff',
width: 15
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
},
emphasis: {
label: {
show: false,
color: 'green',
position: 'top'
}
},
smooth: true,
data: data,
markPoint: {
symbol: 'rect',
symbolSize: 50,
label: {},
itemStyle: {},
emphasis: {},
data: []
}
}
]
今天就寫到這里了痒谴，echarts配置項(xiàng)手冊(cè)還有很多很多內(nèi)容，遇到了就去翻翻手冊(cè)吧铡羡。
