ECharts的屬性片段

2021-09-24 20:37:04 字數 4760 閱讀 5693

// 全圖預設背景 

backgroundcolor: 『rgba(0,0,0,0)』,

// 預設色板

color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',

'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',

'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',

'#6699ff','#ff6666','#3cb371','#b8860b','#30e0e0'],

// 圖表標題

title: (x座標,單位px)

y: 'top',              // 垂直安放位置,預設為全圖頂端,可選為:

// 'top' ¦ 'bottom' ¦ 'center'

// ¦ (y座標,單位px)

//textalign: null          // 水平對齊方式,預設根據x設定自動調整

backgroundcolor: 'rgba(0,0,0,0)',

bordercolor: '#ccc',          // 標題邊框顏色

borderwidth: 0,                   // 標題邊框線寬,單位px,預設為0(無邊框)

padding: 5,                         // 標題內邊距,單位px,預設各方向內邊距為5,

// 接受陣列分別設定上右下左邊距,同css

itemgap: 10,                     // 主副標題縱向間隔,單位px,預設為10,

textstyle: (x座標,單位px)

y: 'top',                          // 垂直安放位置,預設為全圖頂端,可選為:

// 'top' ¦ 'bottom' ¦ 'center'

// ¦ (y座標,單位px)

backgroundcolor: 'rgba(0,0,0,0)',

bordercolor: '#ccc',              // 圖例邊框顏色

borderwidth: 0,                    // 圖例邊框線寬,單位px,預設為0(無邊框)

padding: 5,                           // 圖例內邊距,單位px,預設各方向內邊距為5,

// 接受陣列分別設定上右下左邊距,同css

itemgap: 10,                         // 各個item之間的間隔,單位px,預設為10,

// 橫向布局時為水平間隔,縱向布局時為縱向間隔

itemwidth: 20,                     // 圖例圖形寬度

itemheight: 14,                    // 圖例圖形高度

textstyle: (x座標,單位px)

y: 'bottom',                  // 垂直安放位置,預設為全圖底部,可選為:

// 'top' ¦ 'bottom' ¦ 'center'

// ¦ (y座標,單位px)

backgroundcolor: 'rgba(0,0,0,0)',

bordercolor: '#ccc',             // 值域邊框顏色

borderwidth: 0,                 // 值域邊框線寬,單位px,預設為0(無邊框)

padding: 5,                    // 值域內邊距,單位px,預設各方向內邊距為5,

// 接受陣列分別設定上右下左邊距,同css

itemgap: 10,               // 各個item之間的間隔,單位px,預設為10,

// 橫向布局時為水平間隔,縱向布局時為縱向間隔

itemwidth: 20,             // 值域圖形寬度,線性漸變水平布局寬度為該值 * 10

itemheight: 14,            // 值域圖形高度,線性漸變垂直布局高度為該值 * 10

splitnumber: 5,            // 分割段數,預設為5,為0時為線性漸變

color:['#1e90ff','#f0ffff'],//顏色

//text:['高','低'],              // 文字,預設為數值文字

textstyle: (x座標,單位px)

y: 'top',               // 垂直安放位置,預設為全圖頂端,可選為:

// 'top' ¦ 'bottom' ¦ 'center'

// ¦ (y座標,單位px)

color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],

backgroundcolor: 'rgba(0,0,0,0)',    // 工具箱背景顏色

bordercolor: '#ccc',             // 工具箱邊框顏色

borderwidth: 0,                 // 工具箱邊框線寬,單位px,預設為0(無邊框)

padding: 5,                    // 工具箱內邊距,單位px,預設各方向內邊距為5,

// 接受陣列分別設定上右下左邊距,同css

itemgap: 10,                  // 各個item之間的間隔,單位px,預設為10,

// 橫向布局時為水平間隔,縱向布局時為縱向間隔

itemsize: 16,              // 工具箱圖形寬度

featureimageicon : {},            // 自定義icon

featuretitle : ,              // 水平安放位置,預設為根據grid引數適配,可選為:

// (x座標,單位px)

// y: ,              // 垂直安放位置,預設為根據grid引數適配,可選為:

// (y座標,單位px)

// width: ,           // 指定寬度,橫向布局時預設為根據grid引數適配

// height: ,          // 指定高度,縱向布局時預設為根據grid引數適配

backgroundcolor: 'rgba(0,0,0,0)',    // 背景顏色

databackgroundcolor: '#eee',       // 資料背景顏色

fillercolor: 'rgba(144,197,237,0.2)', // 填充顏色

handlecolor: 'rgba(70,130,180,0.8)'       // 手柄顏色

// 網格

grid: - x - x2,

// height: - y - y2,

backgroundcolor: 'rgba(0,0,0,0)',

borderwidth: 1,

bordercolor: '#ccc'

// 類目軸

categoryaxis: ,     // 座標軸文字樣式,預設取全域性樣式

boundarygap: [0, 0],    // 數值起始和結束兩端空白策略

splitnumber: 5,        // 分割段數,預設為5

axisline: ,

linkstyle : {}

chord :

textstyle: {

decoration: 'none',

fontfamily: 'arial, verdana, sans-serif',

fontfamily2: '微軟雅黑',    // ie8- 字型模糊並且不支援不同字型混排,額外指定乙份

fontsize: 12,

fontstyle: 'normal',

fontweight: 'normal'

// 預設標誌圖形型別列表

symbollist : [

'circle', 'rectangle', '********', 'diamond',

'emptycircle', 'emptyrectangle', 'empty********', 'emptydiamond'

loadingtext : 'loading...',

// 可計算特性配置,孤島,提示顏色

calculable: false,                       // 預設關閉可計算特性

calculablecolor: 'rgba(255,165,0,0.6)',       // 拖拽提示邊框顏色

calculableholdercolor: '#ccc',               // 可計算佔位提示顏色

nameconnector: ' & ',

valueconnector: ' : ',

animation: true,

animationthreshold: 2500,           // 動畫元素閥值,產生的圖形原素超過2500不出動畫

adddataanimation: true,         // 動態資料介面是否開啟動畫效果

animationduration: 2000,

animationeasing: 'exponentialout'             //bounceout

Mybatis Sql片段的應用

在乙個查詢裡,針對各種不同資料庫,有時候只是一部分 sql 是不相同的,為避免相同的部分複製多次,所以將不相同的部分進行適當的隔離,再重用就可以了。在 mybatis 裡宣告兩段 片段,它們分別對應不同資料庫 可以發現,id 屬性的值是相同的,而 databaseid 不同。在引用時將該 id 值賦...

echarts的適配問題

mychart.setoption option window.onresize function 如果多個 不觸發,可以監聽一下 window.addeventlistener resize 注意 一定要把echarts設定的寬度給去掉,不能寫死,要不不會觸發resize的。重點 如果以上方法不行...

echarts的基本配置

option 生成的和頂部的間距 grid 圖例 legend b formatter function name any 提示框 tooltip formatter function params axispointer global false 預設為 false x軸 xaxis axisla...