Echarts中Option属性设置
一、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|600fontFamily: "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 bottomx: "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
四、grid--可用于調整圖例在整個容器中的占位
直角坐標系內繪圖網格,單個 grid 內最多可以放置上下兩個 X 軸,左右兩個 Y 軸。可以在網格上繪制折線圖,柱狀圖,散點圖(氣泡圖)。
也可用于調整圖例在整個容器中的占位
在 ECharts 2.x 里單個 echarts 實例中最多只能存在一個 grid 組件,在 ECharts 3 中可以存在任意個 grid 組件。
五、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,默認為0barBorderWidth: 1, // 柱條邊線線寬,單位px,默認為1label: { //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,默認為0barBorderWidth: 1, // 柱條邊線線寬,單位px,默認為1label: {show: false// position: 默認自適應,水平布局為'top',垂直布局為'right',可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認使用全局文本樣式,詳見TEXTSTYLE}}} }九、series-pie--餅圖
餅圖主要用于表現不同類目的數據在總和中的占比。每個的弧度表示數據數量的比例。
從 ECharts v4.6.0 版本起,我們提供了 'labelLine' 與 'edge' 兩種新的布局方式。詳情參見 label.alignTo。
總結
以上是生活随笔為你收集整理的Echarts中Option属性设置的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【干货】分库分表最佳实践
- 下一篇: 从源码层面带你实现一个自动注入注解