// 全圖預設背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 預設色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa5 ...
// 全圖預設背景
// 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: 'left', // 水平安放位置，預設為左對齊，可選為：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐標，單位px）
y: 'top', // 垂直安放位置，預設為全圖頂端，可選為：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（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: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主標題文字顏色
},
subtextStyle: {
color: '#aaa' // 副標題文字顏色
}
},
// 圖例
legend: {
orient: 'horizontal', // 佈局方式，預設為水平佈局，可選為：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，預設為全圖居中，可選為：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐標，單位px）
y: 'top', // 垂直安放位置，預設為全圖頂端，可選為：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（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: {
color: '#333' // 圖例文字顏色
}
},
// 值域
dataRange: {
orient: 'vertical', // 佈局方式，預設為垂直佈局，可選為：
// 'horizontal' ¦ 'vertical'
x: 'left', // 水平安放位置，預設為全圖左對齊，可選為：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐標，單位px）
y: 'bottom', // 垂直安放位置，預設為全圖底部，可選為：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（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: {
color: '#333' // 值域文字顏色
}
},
toolbox: {
orient: 'horizontal', // 佈局方式，預設為水平佈局，可選為：
// 'horizontal' ¦ 'vertical'
x: 'right', // 水平安放位置，預設為全圖右對齊，可選為：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐標，單位px）
y: 'top', // 垂直安放位置，預設為全圖頂端，可選為：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（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 : {
mark : '輔助線開關',
markUndo : '刪除輔助線',
markClear : '清空輔助線',
dataZoom : '區域縮放',
dataZoomReset : '區域縮放後退',
dataView : '數據視圖',
lineChart : '折線圖切換',
barChart : '柱形圖切換',
restore : '還原',
saveAsImage : '保存為圖片'
}
},
// 提示框
tooltip: {
trigger: 'item', // 觸發類型，預設數據觸發，見下圖，可選為：'item' ¦ 'axis'
showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
hideDelay: 100, // 隱藏延遲，單位ms
transitionDuration : 0.4, // 動畫變換時間，單位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景顏色，預設為透明度為0.7的黑色
borderColor: '#333', // 提示邊框顏色
borderRadius: 4, // 提示邊框圓角，單位px，預設為4
borderWidth: 0, // 提示邊框線寬，單位px，預設為0（無邊框）
padding: 5, // 提示內邊距，單位px，預設各方向內邊距為5，
// 接受數組分別設定上右下左邊距，同css
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'line', // 預設為直線，可選為：'line' | 'shadow'
lineStyle : { // 直線指示器樣式設置
color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle : { // 陰影指示器樣式設置
width: 'auto', // 陰影大小
color: 'rgba(150,150,150,0.3)' // 陰影顏色
}
},
textStyle: {
color: '#fff'
}
},
// 區域縮放控制器
dataZoom: {
orient: 'horizontal', // 佈局方式，預設為水平佈局，可選為：
// 'horizontal' ¦ 'vertical'
// x: {number}, // 水平安放位置，預設為根據grid參數適配，可選為：
// {number}（x坐標，單位px）
// y: {number}, // 垂直安放位置，預設為根據grid參數適配，可選為：
// {number}（y坐標，單位px）
// width: {number}, // 指定寬度，橫向佈局時預設為根據grid參數適配
// height: {number}, // 指定高度，縱向佈局時預設為根據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: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
// 類目軸
categoryAxis: {
position: 'bottom', // 位置
nameLocation: 'end', // 坐標軸名字位置，支持'start' | 'end'
boundaryGap: true, // 類目起始和結束兩端空白策略
axisLine: { // 坐標軸線
show: true, // 預設顯示，屬性show控制顯示與否
lineStyle: { // 屬性lineStyle控制線條樣式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐標軸小標記
show: true, // 屬性show控制顯示與否，預設不顯示
interval: 'auto',
// onGap: null,
inside : false, // 控制小標記是否在grid里
length :5, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: '#333',
width: 1
}
},
axisLabel: { // 坐標軸文本標簽，詳見axis.axisLabel
show: true,
interval: 'auto',
rotate: 0,
margin: 8,
// formatter: null,
textStyle: { // 其餘屬性預設使用全局文本樣式，詳見TEXTSTYLE
color: '#333'
}
},
splitLine: { // 分隔線
show: true, // 預設顯示，屬性show控制顯示與否
// onGap: null,
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔區域
show: false, // 預設不顯示，屬性show控制顯示與否
// onGap: null,
areaStyle: { // 屬性areaStyle（詳見areaStyle）控制區域樣式
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
}
},
// 數值型坐標軸預設參數
valueAxis: {
position: 'left', // 位置
nameLocation: 'end', // 坐標軸名字位置，支持'start' | 'end'
nameTextStyle: {}, // 坐標軸文字樣式，預設取全局樣式
boundaryGap: [0, 0], // 數值起始和結束兩端空白策略
splitNumber: 5, // 分割段數，預設為5
axisLine: { // 坐標軸線
show: true, // 預設顯示，屬性show控制顯示與否
lineStyle: { // 屬性lineStyle控制線條樣式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐標軸小標記
show: false, // 屬性show控制顯示與否，預設不顯示
inside : false, // 控制小標記是否在grid里
length :5, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: '#333',
width: 1
}
},
axisLabel: { // 坐標軸文本標簽，詳見axis.axisLabel
show: true,
更多相關文章
-
Skip to content This repository Search Pull requests Issues Marketplace Explore @VIVI863628 Sign out Unwatch 1 Star 0 Fork 0 VIVI863628/PouchDB Code I... ...
-
JavaScript數組去重 1、原型去重法。通過prototype找到數組的源性對象Array，在數組的原型上添加unique()方法。需要使用的時候使用 點 “ . ” 進行連接。 優點：擴展性比較高，復用性比較高。 缺點：通過給數組對象擴展，新增方法，導致數組結構中有新增了一個方法。此時如果用 ...
-
個人JavaScript小工具，每天熟記一點點。多練習，達到熟練的效果。 ...
-
閉包算是javascript中一個比較難理解的概念，想要深入理解閉包的原理，首先需要搞清楚其他幾個概念： 一、棧記憶體和堆記憶體 學過C/C++的同學可能知道，電腦系統將記憶體分為棧和堆兩部分（大學的基礎課，忘掉的趕緊重新撿起來）。 棧記憶體（連續的存儲空間，類似數據結構中的棧）：主要用來存放數值、字元、 ...
-
Vue.js之路由 以前的跳轉都是使用a標簽，a標簽里有一個屬性叫href，給他一個對應的網路地址或者一個路徑的話，它就會幫助跳轉到對應的頁面。 Vue.js的路由，其實跟我們的a標簽實現的功能是一樣的，我們也是實現一個對應的跳轉，只不過路由的性能更優化，a標簽不管點擊多少次，都會發生對應的網路請求 ...
-
偽元素和偽類之所以這麼容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。 :Pseudo-classes ::Pseudo-elements 但因為相容性的問題，所以現在大部分還是統一的單冒號，但是拋開相容性 ...
-
預設字體大小是16px 在<html>中設置字體大小 與em的區別： em是在父級設置字體大小受影響 移動端適配 首先獲取屏幕的寬度 計算當前屏幕寬度和640的比例 計算出font-size的值 改變html的font-size的值 <!DOCTYPE html> <html lang="en" s ...
-
在我們程式員的日常開發中，總會時不時的需要用到地圖開發，我也在多次碰到之後，寫下我對地圖開發的理解經驗和總結。 一、地圖的選擇 回想一下我們生活中用到的地圖工具，數了一下，百度地圖，高德地圖，騰訊地圖，谷歌地圖，其他。 1、作為開發者，我們應該選擇普遍被大眾認可的地圖平臺，所以其他這個選項中，除去最 ...
