每次接觸新知識的時候脚粟，總會有那么死去活來的兩天核无。不管多難的東西藕坯，只要自己不放棄自己炼彪，前途一片光明。
以下介紹Echarts一些基本的配置項(xiàng)
一辐马、標(biāo)題組件title
- 主表題樣式設(shè)置textStyle
1喜爷、color：主表題文字顏色
2、fontStyle：主標(biāo)題文字字體的風(fēng)格可選'normal''italic''oblique'
3术幔、fontWeight：主標(biāo)題文字字體的粗細(xì)
文字樣式方面湃密，上述屬性泛源，基本通用
title: {
text: '主表題 ',
subtext: ' 副標(biāo)題',
left: '控制標(biāo)題距離左邊距離',
top: '控制標(biāo)題右邊距離',
textStyle: {//主表題樣式設(shè)置
textAlign: 'center',
color: '#505D6F',
fontSize: 15,
},
subtextStyle: {//副標(biāo)題樣式設(shè)置
textAlign: 'center',
fontSize: 15,
},
},
image.png
二俩由、圖例組件legend
- 圖例的數(shù)據(jù)數(shù)組data
1癌蚁、name：圖例項(xiàng)的名稱，應(yīng)等于series中的某個name值
2碘梢、icon：ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
3煞躬、textStyle：圖例項(xiàng)的文本樣式。
legend: {
orient: 'horizontal',//圖例水平數(shù)值排列
itemGap: 25,//圖例每項(xiàng)之間的間隔
top: 0,//top在扰，left雷客，等控制圖例們的位置
textStyle: {//圖例文字樣式
color: '#666666',
fontSize: 15,
},
data: [
{
name:'一',
icon:'circle',//圖例樣式
},
{
name:'二',
icon:'circle',
},
{
name:'三',
icon:'circle',
},
{
name:'四',
icon:'',
}
],
},
image.png
三搅裙、圖表網(wǎng)格繪制grid（控制位置的）
grid: {
left: '3%',
right: '4%',
bottom: '0%',
top: '15%',
containLabel: true, //區(qū)域是否包含刻度圖標(biāo)
},
四部逮、直角坐標(biāo)系grid中的x軸xAxis
坐標(biāo)軸線相關(guān)設(shè)置axisLine
1、show：是否顯示
2掐禁、lineStyle：相關(guān)線條樣式設(shè)置坐標(biāo)刻度標(biāo)簽相關(guān)設(shè)置axisLabel
坐標(biāo)軸刻度相關(guān)設(shè)置axisTick
1蜈漓、show：是否顯示
2融虽、lineStyle：相關(guān)線條樣式設(shè)置類目數(shù)據(jù)data
1、單個類目名稱value
2般又、類目標(biāo)簽的文字樣式textStyle
xAxis: [
{
type: 'category',
axisLine: {
show: true,//坐標(biāo)軸線是否顯示
lineStyle: {//坐標(biāo)軸線樣式
color: '#888888',
width: 2,
},
},
axisLabel: {//坐標(biāo)刻度標(biāo)簽設(shè)置
show: true,
color: '#888888',
},
axisTick: {//坐標(biāo)軸刻度設(shè)置
show: true,
alignWithLabel: true, //刻度對齊方式
lineStyle: {
color: '#888888',
width: 2,
},
},
data: [
'1日',
'3日',
'5日',
'7日',
'9日',
'11日',
'13日',
'15日',
'17日',
'19日',
'21日',
'23日',
'25日',
'27日',
'29日',
],
},
],
image.png
五茴迁、直角坐標(biāo)系grid中的y軸yAxis
- 直角坐標(biāo)系 grid 中的 y 軸堕义，一般情況下單個 grid 組件最多只能放左右兩個 y 軸脆栋，多于兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。
yAxis: [
{
type: 'value',
name: '左側(cè)坐標(biāo)軸',
axisLine: {
show: true,
lineStyle: {
color: '#888888',
width: 1,
},
},
axisLabel: {
show: true,
color: '#888888',
},
axisTick: {
show: true,
lineStyle: {
color: '#888888',
width: 2,
},
},
splitLine: {//橫向分割線
lineStyle: {
type: 'solid',
color: '#888888',
},
},
},
{
type: 'value',
name: '右側(cè)坐標(biāo)軸',
min: 0,
max: 100,
interval: 20,
axisLine: {
show: true,
lineStyle: {
color: '#888888',
width: 1,
},
},
axisLabel: {
show: true,
color: '#888888',
},
axisTick: {
show: true,
lineStyle: {
color: '#888888',
width: 2,
},
},
splitLine: {
lineStyle: {
type: 'solid',
color: '#ccc',
},
}, //設(shè)置橫向分割線顏色
},
],
image.png
六、系列列表series
- type：可選line（折線圖）褐捻，pie（餅圖）柠逞，bar（柱狀圖）等等
- name：legend中的name與此處相同時顯示圖例
- stack：數(shù)據(jù)堆疊，同個類目軸上系列配置相同的stack值可以堆疊放置
- itemStyle：設(shè)置圖形樣式
series: [
{
name: '一',
type: 'bar',
stack: '廣告',
data: [40, 70, 100, 100, 130, 150, 170, 202, 240, 250, 206, 208, 200, 170],
itemStyle: {
color: '#00f',
},
barWidth: 22,
},
{
name: '二',
type: 'bar',
stack: '廣告',
data: [40, 50, 60, 80, 100, 130, 140, 150, 160, 160, 170, 190, 100, 150, 160],
itemStyle: {
normal: {
color: '#0f0',
},
},
barWidth: 22,
},
{
name: '三',
type: 'bar',
stack: '廣告',
data: [40, 50, 60, 80, 100, 100, 80, 70, 50, 30, 30, 60, 90, 80, 60],
itemStyle: {
normal: {
barBorderRadius: [40, 40, 0, 0],
color: '#f00',
},
},
barWidth: 22,
},
{
name: '四',
type: 'line',
color: '#9E86FF',
yAxisIndex: 0,
data: [150, 119, 213, 314, 215, 318, 425, 228, 133, 434, 335, 340, 150, 170, 180],
itemStyle: {
normal: {
lineStyle: {
width: 4,
shadowColor: '#9E86FF',
shadowBlur: 10,
shadowOffsetY: 0,
},
},
},
smooth: true,
symbol: '',
},
],
image.png
本文主要介紹了Echarts的基本用法以及大概模板，想要熟練掌握還需要多多練習(xí)慕购，想搞更多花樣還要自己閱讀官方的配置項(xiàng)手冊更多花樣將在其它文章中介紹茬底。
