一、title--標(biāo)題組件

標(biāo)題組件，包含主標(biāo)題和副標(biāo)題。

title:{x:"left", // 'left' | 'right' | 'center' | '100px'y:"4%", // 'top' | 'bottom' | 'center' | '100px'// 標(biāo)題show: true, //是否顯示text: "標(biāo)題內(nèi)容",textStyle: {color: "#fff", // 主標(biāo)題文字的顏色。fontStyle: "normal", // 主標(biāo)題文字字體的風(fēng)格。 'normal' 'italic' 'oblique'fontWeight: "normal", // 主標(biāo)題文字字體的粗細(xì)。 'normal' 'bold' 'bolder' 'lighter' 500|600fontFamily: "sans-serif", // 主標(biāo)題文字的字體系列。fontSize: 18, // 字體大小lineHeight: "30", // 行高// width ... , // 文字塊的寬度// height ... , // 文字塊的高度textBorderColor: "transparent", // 文字本身的描邊顏色。textBorderWidth: 0, // 文字本身的描邊寬度。textShadowColor: "transparent", // 文字本身的陰影顏色。textShadowBlur: 0, // 文字本身的陰影長(zhǎng)度。textShadowOffsetX: 0, // 文字本身的陰影 X 偏移。textShadowOffsetY: 0, // 文字本身的陰影 Y 偏移。},subtext: "bb", // 副標(biāo)題文本subtextStyle: {color: "red",fontSize: "16",}, //副標(biāo)題樣式textAlign: "auto", //水平對(duì)齊'auto'、'left'、'right'、'center'textVerticalAlign: "auto", // 垂直對(duì)齊 'auto'、'top'、'bottom'、'middle'triggerEvent: false, // 是否觸發(fā)事件padding: 5, // 標(biāo)題內(nèi)邊距 5/[5,2,4,7]itemGap: 10, //主副標(biāo)題之間的間距l(xiāng)eft: 10, // 距離 left top right bottomx: "center", // 水平安放位置，默認(rèn)為左對(duì)齊，可選為：'center' | 'left' | 'right' | {number}（x坐標(biāo)，單位px）y: "4%", // 垂直安放位置，默認(rèn)為全圖頂端，可選為：// 'top' | 'bottom' | 'center'| {number}（y坐標(biāo)，單位px）backgroundColor: "pink", // 標(biāo)題背景色borderColor: "#ccc", // 標(biāo)題的邊框顏色borderWidth: 5, // 標(biāo)題的邊框線(xiàn)寬。borderRadius: 2, // 圓角半徑shadowBlur: 10, //圖形陰影的模糊大小shadowColor: "rgba(0, 0, 0, 0.5)", // 陰影顏色shadowOffsetX: 5, // 陰影水平方向上的偏移距離。shadowOffsetY: 5, //陰影垂直方向上的偏移距離。 }

二、legend--圖例組件

圖例組件,展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字?？梢酝ㄟ^(guò)點(diǎn)擊圖例控制哪些系列不顯示。

legend: {show: true, //是否顯示type: "plain", // 圖例的類(lèi)型 'plain':普通圖例 'scroll':可滾動(dòng)翻頁(yè)的圖例zlevel: 1, // 所有圖形的 zlevel 值。icon: "circle",top: "5%", // bottom:"20%" // 組件離容器的距離right: "5%", //left:"10%" // // 組件離容器的距離width: "auto", // 圖例組件的寬度height: "auto", // 圖例組件的高度orient: "horizontal", // 圖例列表的布局朝向。 'horizontal' 'vertical'align: "auto", // 圖例標(biāo)記和文本的對(duì)齊padding: 5, // 圖例內(nèi)邊距itemWidth: 6, // 圖例標(biāo)記的圖形寬度。itemGap: 20, // 圖例每項(xiàng)之間的間隔。itemHeight: 14, // 圖例標(biāo)記的圖形高度。symbolKeepAspect: true, // 如果圖標(biāo)（可能來(lái)自系列的 symbol 或用戶(hù)自定義的 legend.data.icon）是 path:// 的形式，是否在縮放時(shí)保持該圖形的長(zhǎng)寬比。formatter: function (name) {return '{a|text}{a| }{b|' + name + '}'},selectedMode: true, // 圖例選擇的模式，inactiveColor: "#ccc", // 圖例關(guān)閉時(shí)的顏色。textStyle: {color: "#556677", // 文字的顏色。fontStyle: "normal", // 文字字體的風(fēng)格。fontWeight: "normal", // 文字字體的粗細(xì)。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...fontFamily: "sans-serif", // 文字的字體系列。fontSize: 12, // 文字的字體大小。lineHeight: 20, // 行高。backgroundColor: "transparent", // 文字塊背景色。borderColor: "transparent", // 文字塊邊框顏色。borderWidth: 0, // 文字塊邊框?qū)挾?。borderRadius: 0, // 文字塊的圓角。padding: 0, // 文字塊的內(nèi)邊距shadowColor: "transparent", // 文字塊的背景陰影顏色shadowBlur: 0, // 文字塊的背景陰影長(zhǎng)度。shadowOffsetX: 0, // 文字塊的背景陰影 X 偏移。shadowOffsetY: 0, // 文字塊的背景陰影 Y 偏移。// width: 50, // 文字塊的寬度。 默認(rèn)// height: 40, // 文字塊的高度 默認(rèn)textBorderColor: "transparent", // 文字本身的描邊顏色。textBorderWidth: 0, // 文字本身的描邊寬度。textShadowColor: "transparent", // 文字本身的陰影顏色。textShadowBlur: 0, // 文字本身的陰影長(zhǎng)度。textShadowOffsetX: 0, // 文字本身的陰影 X 偏移。textShadowOffsetY: 0, // 文字本身的陰影 Y 偏移。rich: {a: {color: "red",lineHeight: 10,},b: {color: "#fff",lineHeight: 10,},}, // 自定富文本樣式},},

三、tooltip--提示框組件

提示框組件,可以設(shè)置在多種地方：

可以設(shè)置在全局，即 tooltip
可以設(shè)置在坐標(biāo)系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以設(shè)置在系列中，即 series.tooltip
可以設(shè)置在系列的每個(gè)數(shù)據(jù)項(xiàng)中，即 series.data.tooltip

tooltip ={ //提示框組件trigger: 'item', //觸發(fā)類(lèi)型,'item'數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類(lèi)目軸的圖表中使用。 'axis'坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線(xiàn)圖等會(huì)使用類(lèi)目軸的圖表中使用。triggerOn:"mousemove", //提示框觸發(fā)的條件,'mousemove'鼠標(biāo)移動(dòng)時(shí)觸發(fā)。'click'鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)。'mousemove|click'同時(shí)鼠標(biāo)移動(dòng)和點(diǎn)擊時(shí)觸發(fā)。'none'不在 'mousemove' 或 'click' 時(shí)觸發(fā)showContent:true, //是否顯示提示框浮層alwaysShowContent:true, //是否永遠(yuǎn)顯示提示框內(nèi)容showDelay:0, //浮層顯示的延遲，單位為 mshideDelay:100, //浮層隱藏的延遲，單位為 msenterable:false, //鼠標(biāo)是否可進(jìn)入提示框浮層中confine:false, //是否將 tooltip 框限制在圖表的區(qū)域內(nèi)transitionDuration:0.4, //提示框浮層的移動(dòng)動(dòng)畫(huà)過(guò)渡時(shí)間，單位是 s,設(shè)置為 0 的時(shí)候會(huì)緊跟著鼠標(biāo)移動(dòng)position:['50%', '50%'], //提示框浮層的位置，默認(rèn)不設(shè)置時(shí)位置會(huì)跟隨鼠標(biāo)的位置,[10, 10],回掉函數(shù)，inside鼠標(biāo)所在圖形的內(nèi)部中心位置，top、left、bottom、right鼠標(biāo)所在圖形上側(cè)，左側(cè)，下側(cè)，右側(cè)，formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式,模板變量有 {a}, ，{c}，ozvdkddzhkzd，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等backgroundColor:"transparent", //標(biāo)題背景色borderColor:"#ccc", //邊框顏色borderWidth:0, //邊框線(xiàn)寬padding:5, //圖例內(nèi)邊距，單位px 5 [5, 10] [5,10,5,10]textStyle:mytextStyle, //文本樣式axisPointer: { // 鼠標(biāo)放在type: 'cross', //默認(rèn)為line，line直線(xiàn)，cross十字準(zhǔn)星，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--可用于調(diào)整圖例在整個(gè)容器中的占位

直角坐標(biāo)系內(nèi)繪圖網(wǎng)格，單個(gè) grid 內(nèi)最多可以放置上下兩個(gè) X 軸，左右兩個(gè) Y 軸?？梢栽诰W(wǎng)格上繪制折線(xiàn)圖，柱狀圖，散點(diǎn)圖（氣泡圖）。
也可用于調(diào)整圖例在整個(gè)容器中的占位
在 ECharts 2.x 里單個(gè) echarts 實(shí)例中最多只能存在一個(gè) grid 組件，在 ECharts 3 中可以存在任意個(gè) 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, //防止坐標(biāo)軸標(biāo)簽溢出 }

五、xAxis--x 軸

直角坐標(biāo)系 grid 中的 x 軸，一般情況下單個(gè) grid 組件最多只能放上下兩個(gè) x 軸，多于兩個(gè) x 軸需要通過(guò)配置 offset 屬性防止同個(gè)位置多個(gè) x 軸的重疊。

xAxis: {boundaryGap: false,// 刻度離縱軸有無(wú)間隙，默認(rèn)true有間距type: 'category', //'value' 數(shù)值軸，適用于連續(xù)數(shù)據(jù)。 'category' 類(lèi)目軸，適用于離散的類(lèi)目數(shù)據(jù)，為該類(lèi)型時(shí)必須通過(guò) data 設(shè)置類(lèi)目數(shù)據(jù)。 'time' 時(shí)間軸，適用于連續(xù)的時(shí)序數(shù)據(jù)，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化，在刻度計(jì)算上也有所不同，例如會(huì)根據(jù)跨度的范圍來(lái)決定使用月，星期，日還是小時(shí)范圍的刻度。 'log' 對(duì)數(shù)軸。適用于對(duì)數(shù)數(shù)據(jù)。position:'bottom', // 'bottom' | 'top'name: '(ETD)',// 橫軸名稱(chēng)nameTextStyle:{fontSize:12,fontWeight:'bold',color:'#ff0033',//align:'left',},nameLocation:'middle',//坐標(biāo)軸的位置 'start' | 'center' | 'end'nameGap:50,//坐標(biāo)軸名稱(chēng)與軸線(xiàn)之間的距離nameRotate:90,//坐標(biāo)軸名字旋轉(zhuǎn)角度值,axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。// clickable:true,//并給圖表添加單擊事件 根據(jù)返回值判斷點(diǎn)擊的是哪里interval: 0,inside:false, // 標(biāo)簽朝內(nèi)還是朝外rotate: 40,// 文字傾斜度textStyle:{color:'#fff,fontSize:'20px',align:'center'}},axisLine:{lineStyle:{color:'red' //x軸顏色},symbol:['none','arrow'], //軸線(xiàn)兩邊的箭頭symbolSize:[8, 12] //箭頭大小},data: ['2020-07-08 周三','2020-07-09 周四',].map((str) => {return str.replace(' ','\n')}),// 橫軸坐標(biāo)值// data: [{value:'1',textStyle:{color:'#ff0033',}}, '2/7', '3', '4', '5', '6', '7']//每一項(xiàng)也可以是具體的配置項(xiàng)，此時(shí)取配置項(xiàng)中的 `value` 為類(lèi)目名splitLine: {show: false，lineStyle:{ //屬性lineStyle（詳見(jiàn)lineStyle）控制線(xiàn)條樣式color:['#ccc'],width:1,type:'solid'}}, // 取消X軸的網(wǎng)格splitArea:{ //分隔區(qū)域show:true,areaStyle:{color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],}},axisTick: { // 顯示隱藏刻度線(xiàn)inside:true, //刻度朝內(nèi)還是朝外alignWithLabel: true // 刻度線(xiàn)是否顯示} }

六、yAxis-y 軸

直角坐標(biāo)系 grid 中的 y 軸，一般情況下單個(gè) grid 組件最多只能放左右兩個(gè) y 軸，多于兩個(gè) y 軸需要通過(guò)配置 offset 屬性防止同個(gè)位置多個(gè) Y 軸的重疊。

yAxis: {type: 'value',name: " 金額( 單位: 萬(wàn)元 )",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){ //設(shè)置Y軸顯示的名字，超出做..隱藏var res = value;if(res.length >7){res = res.substring(0,6) + ".."}return res;}},},splitLine: {show: true,lineStyle: {type: 'dashed', //背景線(xiàn)為虛線(xiàn)color: 'rgba(135,140,147,.8)' //左側(cè)顯示線(xiàn)}},axisLabel: {formatter: '{value}',color: '#fff',fontSize: 14}},

七、series-line--折線(xiàn)/面積圖

折線(xiàn)圖是用折線(xiàn)將各個(gè)數(shù)據(jù)點(diǎn)標(biāo)志連接起來(lái)的圖表，用于展現(xiàn)數(shù)據(jù)的變化趨勢(shì)?？捎糜谥苯亲鴺?biāo)系和極坐標(biāo)系上。

line: {itemStyle: {normal: {// color: 各異,label: {show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見(jiàn)TEXTSTYLE},lineStyle: {width: 2,type: 'solid',normal: {//線(xiàn)的漸變顏色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)', //默認(rèn)透明 陰影shadowBlur: 5,shadowOffsetX: 3,shadowOffsetY: 3}，itemStyle: {normal: {lineStyle: {width: 3, //設(shè)置線(xiàn)條粗細(xì)},},},areaStyle: { //折線(xiàn)圖覆蓋面積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: { // 鼠標(biāo)移入// color: 各異,label: {show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見(jiàn)TEXTSTYLE}}},//smooth : false, //是否平滑//symbol: null, // 拐點(diǎn)圖形類(lèi)型,可以自己設(shè)置圖片symbolSize: 2, // 拐點(diǎn)圖形大小symbolOffset: ["0", "-8"],//拐點(diǎn)位置//symbolRotate : null, // 拐點(diǎn)圖形旋轉(zhuǎn)控制showAllSymbol: false // 標(biāo)志圖形默認(rèn)只有主軸顯示（隨主軸標(biāo)簽間隔隱藏策略） },

八、series-bar--柱狀圖

柱狀圖（或稱(chēng)條形圖）是一種通過(guò)柱形的高度（橫向的情況下則是寬度）來(lái)表現(xiàn)數(shù)據(jù)大小的一種常用圖表類(lèi)型。

bar:{barMinHeight: 0, // 最小高度改為0// barWidth: null, // 默認(rèn)自適應(yīng)barGap: '30%', // 柱間距離，默認(rèn)為柱形寬度的30%，可設(shè)固定值barCategoryGap: '20%', // 類(lèi)目間柱形距離，默認(rèn)為類(lèi)目間距的20%，可設(shè)固定值itemStyle: {normal: {// color: '各異',barBorderColor: '#fff', // 柱條邊線(xiàn)barBorderRadius: 0, // 柱條邊線(xiàn)圓角，單位px，默認(rèn)為0barBorderWidth: 1, // 柱條邊線(xiàn)線(xiàn)寬，單位px，默認(rèn)為1label: { //z柱狀圖上顯示數(shù)字show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見(jiàn)TEXTSTYLE}},emphasis: { // 鼠標(biāo)移入的樣式// color: '各異',barBorderColor: 'rgba(0,0,0,0)', // 柱條邊線(xiàn)barBorderRadius: 0, // 柱條邊線(xiàn)圓角，單位px，默認(rèn)為0barBorderWidth: 1, // 柱條邊線(xiàn)線(xiàn)寬，單位px，默認(rèn)為1label: {show: false// position: 默認(rèn)自適應(yīng)，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認(rèn)使用全局文本樣式，詳見(jiàn)TEXTSTYLE}}} }

九、series-pie--餅圖

餅圖主要用于表現(xiàn)不同類(lèi)目的數(shù)據(jù)在總和中的占比。每個(gè)的弧度表示數(shù)據(jù)數(shù)量的比例。
從 ECharts v4.6.0 版本起，我們提供了 'labelLine' 與 'edge' 兩種新的布局方式。詳情參見(jiàn) 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},,{c},ozvdkddzhkzd各代表不同的值// formatter: "{font|}\n{hr|}\n{font|ozvdkddzhkzd%}",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"}}}}}]

總結(jié)

以上是生活随笔為你收集整理的Echarts中Option属性设置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。