目錄
一、title--標題元件
標題元件，包含主標題和副標題。
title:{
x:"left", // 'left' | 'right' | 'center' | '100px'
y:"4%", // 'top' | 'bottom' | 'center' | '100px'
// 標題
show: true, //是否顯示
text: "標題內容",
textStyle: {
color: "#fff", // 主標題文字的顏色。
fontStyle: "normal", // 主標題文字字型的風格。 'normal' 'italic' 'oblique'
fontWeight: "normal", // 主標題文字字型的粗細。 'normal' 'bold' 'bolder' 'lighter' 500|600
fontFamily: "sans-serif", // 主標題文字的字型系列。
fontSize: 18, // 字型大小
lineHeight: "30", // 行高
// width ... , // 文字塊的寬度
// height ... , // 文字塊的高度
textBorderColor: "transparent", // 文字本身的描邊顏色。
textBorderWidth: 0, // 文字本身的描邊寬度。
textShadowColor: "transparent", // 文字本身的陰影顏色。
textShadowBlur: 0, // 文字本身的陰影長度。
textShadowOffsetX: 0, // 文字本身的陰影 X 偏移。
textShadowOffsetY: 0, // 文字本身的陰影 Y 偏移。
},
subtext: "bb", // 副標題文字
subtextStyle: {
color: "red",
fontSize: "16",
}, //副標題樣式
textAlign: "auto", //水平對齊'auto'、'left'、'right'、'center'
textVerticalAlign: "auto", // 垂直對齊 'auto'、'top'、'bottom'、'middle'
triggerEvent: false, // 是否觸發事件
padding: 5, // 標題內邊距 5/[5,2,4,7]
itemGap: 10, //主副標題之間的間距
left: 10, // 距離 left top right bottom
x: "center", // 水平安放位置，預設為左對齊，可選為：'center' ¦ 'left' ¦ 'right' ¦ {number}（x座標，單位px）
y: "4%", // 垂直安放位置，預設為全圖頂端，可選為：// 'top' ¦ 'bottom' ¦ 'center'¦ {number}（y座標，單位px）
backgroundColor: "pink", // 標題背景色
borderColor: "#ccc", // 標題的邊框顏色
borderWidth: 5, // 標題的邊框線寬。
borderRadius: 2, // 圓角半徑
shadowBlur: 10, //圖形陰影的模糊大小
shadowColor: "rgba(0, 0, 0, 0.5)", // 陰影顏色
shadowOffsetX: 5, // 陰影水平方向上的偏移距離。
shadowOffsetY: 5, //陰影垂直方向上的偏移距離。
}
二、legend--圖例元件
圖例元件,展現了不同系列的標記(symbol)，顏色和名字。可以通過點選圖例控制哪些系列不顯示。
legend: {
show: true, //是否顯示
type: "plain", // 圖例的型別 'plain':普通圖例 'scroll':可滾動翻頁的圖例
zlevel: 1, // 所有圖形的 zlevel 值。
icon: "circle",
top: "5%", // bottom:"20%" // 元件離容器的距離
right: "5%", //left:"10%" // // 元件離容器的距離
width: "auto", // 圖例元件的寬度
height: "auto", // 圖例元件的高度
orient: "horizontal", // 圖例列表的佈局朝向。 'horizontal' 'vertical'
align: "auto", // 圖例標記和文字的對齊
padding: 5, // 圖例內邊距
itemWidth: 6, // 圖例標記的圖形寬度。
itemGap: 20, // 圖例每項之間的間隔。
itemHeight: 14, // 圖例標記的圖形高度。
symbolKeepAspect: true, // 如果圖示（可能來自系列的 symbol 或使用者自定義的 legend.data.icon）是 path:// 的形式，是否在縮放時保持該圖形的長寬比。
formatter: function (name) {
return '{a|text}{a| }{b|' + name + '}'
},
selectedMode: true, // 圖例選擇的模式，
inactiveColor: "#ccc", // 圖例關閉時的顏色。
textStyle: {
color: "#556677", // 文字的顏色。
fontStyle: "normal", // 文字字型的風格。
fontWeight: "normal", // 文字字型的粗細。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
fontFamily: "sans-serif", // 文字的字型系列。
fontSize: 12, // 文字的字型大小。
lineHeight: 20, // 行高。
backgroundColor: "transparent", // 文字塊背景色。
borderColor: "transparent", // 文字塊邊框顏色。
borderWidth: 0, // 文字塊邊框寬度。
borderRadius: 0, // 文字塊的圓角。
padding: 0, // 文字塊的內邊距
shadowColor: "transparent", // 文字塊的背景陰影顏色
shadowBlur: 0, // 文字塊的背景陰影長度。
shadowOffsetX: 0, // 文字塊的背景陰影 X 偏移。
shadowOffsetY: 0, // 文字塊的背景陰影 Y 偏移。
// width: 50, // 文字塊的寬度。 預設
// height: 40, // 文字塊的高度 預設
textBorderColor: "transparent", // 文字本身的描邊顏色。
textBorderWidth: 0, // 文字本身的描邊寬度。
textShadowColor: "transparent", // 文字本身的陰影顏色。
textShadowBlur: 0, // 文字本身的陰影長度。
textShadowOffsetX: 0, // 文字本身的陰影 X 偏移。
textShadowOffsetY: 0, // 文字本身的陰影 Y 偏移。
rich: {
a: {
color: "red",
lineHeight: 10,
},
b: {
color: "#fff",
lineHeight: 10,
},
}, // 自定富文字樣式
},
},
三、tooltip--提示框元件
提示框元件,可以設定在多種地方：
可以設定在全域性，即 tooltip
可以設定在座標系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以設定在系列中，即 series.tooltip
可以設定在系列的每個資料項中，即 series.data.tooltip
tooltip ={ //提示框元件
trigger: 'item', //觸發型別,'item'資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis'座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
triggerOn:"mousemove", //提示框觸發的條件,'mousemove'滑鼠移動時觸發。'click'滑鼠點選時觸發。'mousemove|click'同時滑鼠移動和點選時觸發。'none'不在 'mousemove' 或 'click' 時觸發
showContent:true, //是否顯示提示框浮層
alwaysShowContent:true, //是否永遠顯示提示框內容
showDelay:0, //浮層顯示的延遲，單位為 ms
hideDelay:100, //浮層隱藏的延遲，單位為 ms
enterable:false, //滑鼠是否可進入提示框浮層中
confine:false, //是否將 tooltip 框限制在圖表的區域內
transitionDuration:0.4, //提示框浮層的移動動畫過渡時間，單位是 s,設定為 0 的時候會緊跟著滑鼠移動
position:['50%', '50%'], //提示框浮層的位置，預設不設定時位置會跟隨滑鼠的位置,[10, 10],回掉函式，inside滑鼠所在圖形的內部中心位置，top、left、bottom、right滑鼠所在圖形上側，左側，下側，右側，
formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮層內容格式器，支援字串模板和回撥函式兩種形式,模板變數有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，資料名，資料值等
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
padding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]
textStyle:mytextStyle, //文字樣式
axisPointer: { // 滑鼠放在
type: 'cross', //預設為line，line直線，cross十字準星，shadow陰影
crossStyle: {
color: '#fff'
}
},
formatter: function (value) {
for (var i = 0; i < value.length; i++) {
return (
value[i].seriesName +
"<br/>" +
value[i].name +
unit +
"：" +
value[i].value +
"%"
);
}
},
};
四、grid--可用於調整圖例在整個容器中的佔位
直角座標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪製折線圖，柱狀圖，散點圖（氣泡圖）。
也可用於調整圖例在整個容器中的佔位
在 ECharts 2.x 裡單個 echarts 例項中最多隻能存在一個 grid 元件，在 ECharts 3 中可以存在任意個 grid 元件。
grid:{
x: 80, //top:"15%" | right:"3%" | left:"2%" | bottom:"12%"
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: ‘rgba(0,0,0,0)‘,
borderWidth: 1,
borderColor: '#ccc',
containLabel: true, //防止座標軸標籤溢位
}
五、xAxis--x 軸
直角座標系 grid 中的 x 軸，一般情況下單個 grid 元件最多隻能放上下兩個 x 軸，多於兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。
xAxis: {
boundaryGap: false,// 刻度離縱軸有無間隙，預設true有間距
type: 'category', //'value' 數值軸，適用於連續資料。 'category' 類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料。 'time' 時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。 'log' 對數軸。適用於對數資料。
position:'bottom', // 'bottom' | 'top'
name: '(ETD)',// 橫軸名稱
nameTextStyle:{
fontSize:12,
fontWeight:'bold',
color:'#ff0033',
//align:'left',
},
nameLocation:'middle',//座標軸的位置 'start' | 'center' | 'end'
nameGap:50,//座標軸名稱與軸線之間的距離
nameRotate:90,//座標軸名字旋轉角度值,
axisLabel : {//座標軸刻度標籤的相關設定。
// clickable:true,//並給圖表新增單擊事件 根據返回值判斷點選的是哪裡
interval: 0,
inside:false, // 標籤朝內還是朝外
rotate: 40,// 文字傾斜度
textStyle:{
color:'#fff,
fontSize:'20px',
align:'center'
}
},
axisLine:{
lineStyle:{
color:'red' //x軸顏色
},
symbol:['none','arrow'], //軸線兩邊的箭頭
symbolSize:[8, 12] //箭頭大小
},
data: ['2020-07-08 週三','2020-07-09 週四',].map((str) => {
return str.replace(' ','\n')
}),// 橫軸座標值
// data: [{value:'1',textStyle:{
color:'#ff0033',
}}, '2/7', '3', '4', '5', '6', '7']//每一項也可以是具體的配置項，此時取配置項中的 `value` 為類目名
splitLine: {
show: false，
lineStyle:{ //屬性lineStyle（詳見lineStyle）控制線條樣式
color:['#ccc'],
width:1,
type:'solid'
}
}, // 取消X軸的網格
splitArea:{ //分隔區域
show:true,
areaStyle:{
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
}
},
axisTick: { // 顯示隱藏刻度線
inside:true, //刻度朝內還是朝外
alignWithLabel: true // 刻度線是否顯示
}
}
六、yAxis-y 軸
直角座標系 grid 中的 y 軸，一般情況下單個 grid 元件最多隻能放左右兩個 y 軸，多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。
yAxis: {
type: 'value',
name: " 金額( 單位: 萬元 )",
nameTextStyle: {
color: '#ffffff'
},
axisLine: {
show: false,
lineStyle: {
type: 'dashed',
color: 'rgba(135,140,147,0.8)'
}，
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: "16",
},
formatter:function(value){ //設定Y軸顯示的名字，超出做..隱藏
var res = value;
if(res.length >7){
res = res.substring(0,6) + ".."
}
return res;
}
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //背景線為虛線
color: 'rgba(135,140,147,.8)' //左側顯示線
}
},
axisLabel: {
formatter: '{value}',
color: '#fff',
fontSize: 14
}
},
七、series-line--折線/面積圖
折線圖是用折線將各個資料點標誌連線起來的圖表，用於展現資料的變化趨勢。可用於直角座標系和極座標系上。
line: {
itemStyle: {
normal: {
// color: 各異,
label: {
show: false
// position: 預設自適應，水平佈局為'top'，垂直佈局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 預設使用全域性文字樣式，詳見TEXTSTYLE
},
lineStyle: {
width: 2,
type: 'solid',
normal: {
//線的漸變顏色
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
{
offset: 0,
color: "#24D5CC",
},
{
offset: 1,
color: "#7A50F1",
},
]),
opacity: 0.75,
},
shadowColor: 'rgba(0,0,0,0)', //預設透明 陰影
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3
}，
itemStyle: {
normal: {
lineStyle: {
width: 3, //設定線條粗細
},
},
},
areaStyle: { //折線圖覆蓋面積
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "rgba(255,80,124,0)",
},
{
offset: 1,
color: "rgba(255,80,124,0.35)",
},
]), //漸變色
},
},
emphasis: { // 滑鼠移入
// color: 各異,
label: {
show: false
// position: 預設自適應，水平佈局為'top'，垂直佈局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 預設使用全域性文字樣式，詳見TEXTSTYLE
}
}
},
//smooth : false, //是否平滑
//symbol: null, // 拐點圖形型別,可以自己設定圖片
symbolSize: 2, // 拐點圖形大小
symbolOffset: ["0", "-8"],//拐點位置
//symbolRotate : null, // 拐點圖形旋轉控制
showAllSymbol: false // 標誌圖形預設只有主軸顯示（隨主軸標籤間隔隱藏策略）
},
八、series-bar--柱狀圖
柱狀圖（或稱條形圖）是一種通過柱形的高度（橫向的情況下則是寬度）來表現資料大小的一種常用圖表型別。
bar:{
barMinHeight: 0, // 最小高度改為0
// barWidth: null, // 預設自適應
barGap: '30%', // 柱間距離，預設為柱形寬度的30%，可設固定值
barCategoryGap: '20%', // 類目間柱形距離，預設為類目間距的20%，可設固定值
itemStyle: {
normal: {
// color: '各異',
barBorderColor: '#fff', // 柱條邊線
barBorderRadius: 0, // 柱條邊線圓角，單位px，預設為0
barBorderWidth: 1, // 柱條邊線線寬，單位px，預設為1
label: { //z柱狀圖上顯示數字
show: false
// position: 預設自適應，水平佈局為'top'，垂直佈局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 預設使用全域性文字樣式，詳見TEXTSTYLE
}
},
emphasis: { // 滑鼠移入的樣式
// color: '各異',
barBorderColor: 'rgba(0,0,0,0)', // 柱條邊線
barBorderRadius: 0, // 柱條邊線圓角，單位px，預設為0
barBorderWidth: 1, // 柱條邊線線寬，單位px，預設為1
label: {
show: false
// position: 預設自適應，水平佈局為'top'，垂直佈局為'right'，可選為
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 預設使用全域性文字樣式，詳見TEXTSTYLE
}
}
}
}
九、series-pie--餅圖
餅圖主要用於表現不同類目的資料在總和中的佔比。每個的弧度表示資料數量的比例。
從 ECharts v4.6.0 版本起，我們提供了 'labelLine' 與 'edge' 兩種新的佈局方式。詳情參見 label.alignTo。
// 橫向柱狀圖
series: [
{
type: "pie",
radius: ["45%", "60%"],
center: this.center,
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: bgColor,
borderWidth: 2
}
},
labelLine: {
normal: {
length: 20,
// length2: 100,
lineStyle: {
color: "#999"
}
}
},
label: {
normal: {
//https://echarts.apache.org/zh/option.html#grid.tooltip.formatter
//{a},{b},{c},{d}各代表不同的值
// formatter: "{font|{b}}\n{hr|}\n{font|{d}%}",
formatter: params => {
return (
"{icon|●}{name|" +
params.name +
"}{value|" +
formatNumber(params.value) +
"}"
);
},
padding: [0, 0, 0, 0],
rich: {
icon: {
fontSize: 16
},
name: {
fontSize: 14,
padding: [0, 10, 0, 4],
color: "#666"
},
value: {
fontSize: 16,
fontWeight: "bold",
color: "#666"
},
hr: {
height: 0,
borderWidth: 1,
width: "100%",
borderColor: "#999"
}
}
}
}
}
]