官網鏈接：http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html?

theme = {// 全圖默認背景// 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，// 接受數組分別設定上右下左邊距，同cssitemGap: 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，// 接受數組分別設定上右下左邊距，同cssitemGap: 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，// 接受數組分別設定上右下左邊距，同cssitemGap: 10, // 各個item之間的間隔，單位px，默認為10，// 橫向布局時為水平間隔，縱向布局時為縱向間隔itemWidth: 20, // 值域圖形寬度，線性漸變水平布局寬度為該值 * 10itemHeight: 14, // 值域圖形高度，線性漸變垂直布局高度為該值 * 10splitNumber: 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，// 接受數組分別設定上右下左邊距，同cssitemGap: 10, // 各個item之間的間隔，單位px，默認為10，// 橫向布局時為水平間隔，縱向布局時為縱向間隔itemSize: 16, // 工具箱圖形寬度featureImageIcon : {}, // 自定義圖片iconfeatureTitle : {mark : '輔助線開關',markUndo : '刪除輔助線',markClear : '清空輔助線',dataZoom : '區域縮放',dataZoomReset : '區域縮放后退',dataView : '數據視圖',lineChart : '折線圖切換',barChart : '柱形圖切換',restore : '還原',saveAsImage : '保存為圖片'}},// 提示框tooltip: {trigger: 'item', // 觸發類型，默認數據觸發，見下圖，可選為：'item' | 'axis'showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位mshideDelay: 100, // 隱藏延遲，單位mstransitionDuration : 0.4, // 動畫變換時間，單位sbackgroundColor: 'rgba(0,0,0,0.7)', // 提示背景顏色，默認為透明度為0.7的黑色borderColor: '#333', // 提示邊框顏色borderRadius: 4, // 提示邊框圓角，單位px，默認為4borderWidth: 0, // 提示邊框線寬，單位px，默認為0（無邊框）padding: 5, // 提示內邊距，單位px，默認各方向內邊距為5，// 接受數組分別設定上右下左邊距，同cssaxisPointer : { // 坐標軸指示器，坐標軸觸發有效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.axisLabelshow: true,interval: 'auto',rotate: 0,margin: 8,// formatter: null,textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEcolor: '#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, // 分割段數，默認為5axisLine: { // 坐標軸線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.axisLabelshow: true,rotate: 0,margin: 8,// formatter: null,textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEcolor: '#333'}},splitLine: { // 分隔線show: true, // 默認顯示，屬性show控制顯示與否lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式color: ['#ccc'],width: 1,type: 'solid'}},splitArea: { // 分隔區域show: false, // 默認不顯示，屬性show控制顯示與否areaStyle: { // 屬性areaStyle（詳見areaStyle）控制區域樣式color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}}},polar : {center : ['50%', '50%'], // 默認全局居中radius : '75%',startAngle : 90,splitNumber : 5,name : {show: true,textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEcolor: '#333'}},axisLine: { // 坐標軸線show: true, // 默認顯示，屬性show控制顯示與否lineStyle: { // 屬性lineStyle控制線條樣式color: '#ccc',width: 1,type: 'solid'}},axisLabel: { // 坐標軸文本標簽，詳見axis.axisLabelshow: false,textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEcolor: '#333'}},splitArea : {show : true,areaStyle : {color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}},splitLine : {show : true,lineStyle : {width : 1,color : '#ccc'}}},// 柱形圖默認參數bar: {barMinHeight: 0, // 最小高度改為0// barWidth: null, // 默認自適應barGap: '30%', // 柱間距離，默認為柱形寬度的30%，可設固定值barCategoryGap : '20%', // 類目間柱形距離，默認為類目間距的20%，可設固定值itemStyle: {normal: {// color: '各異',barBorderColor: '#fff', // 柱條邊線barBorderRadius: 0, // 柱條邊線圓角，單位px，默認為0barBorderWidth: 1, // 柱條邊線線寬，單位px，默認為1label: {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}}}},// 折線圖默認參數line: {itemStyle: {normal: {// color: 各異,label: {show: false// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE},lineStyle: {width: 2,type: 'solid',shadowColor : 'rgba(0,0,0,0)', //默認透明shadowBlur: 5,shadowOffsetX: 3,shadowOffsetY: 3}},emphasis: {// color: 各異,label: {show: false// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE}}},//smooth : false,//symbol: null, // 拐點圖形類型symbolSize: 2, // 拐點圖形大小//symbolRotate : null, // 拐點圖形旋轉控制showAllSymbol: false // 標志圖形默認只有主軸顯示（隨主軸標簽間隔隱藏策略）},// K線圖默認參數k: {// barWidth : null // 默認自適應// barMaxWidth : null // 默認自適應 itemStyle: {normal: {color: '#fff', // 陽線填充顏色color0: '#00aa11', // 陰線填充顏色lineStyle: {width: 1,color: '#ff3200', // 陽線邊框顏色color0: '#00aa11' // 陰線邊框顏色}},emphasis: {// color: 各異,// color0: 各異}}},// 散點圖默認參數scatter: {//symbol: null, // 圖形類型symbolSize: 4, // 圖形大小，半寬（半徑）參數，當圖形為方向或菱形則總寬度為symbolSize * 2//symbolRotate : null, // 圖形旋轉控制large: false, // 大規模散點圖largeThreshold: 2000,// 大規模閥值，large為true且數據量>largeThreshold才啟用大規模模式itemStyle: {normal: {// color: 各異,label: {show: false// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE}},emphasis: {// color: '各異'label: {show: false// position: 默認自適應，水平布局為'top'，垂直布局為'right'，可選為// 'inside'|'left'|'right'|'top'|'bottom'// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE}}}},// 雷達圖默認參數radar : {itemStyle: {normal: {// color: 各異,label: {show: false},lineStyle: {width: 2,type: 'solid'}},emphasis: {// color: 各異,label: {show: false}}},//symbol: null, // 拐點圖形類型symbolSize: 2 // 可計算特性參數，空數據拖拽提示圖形大小//symbolRotate : null, // 圖形旋轉控制},// 餅圖默認參數pie: {center : ['50%', '50%'], // 默認全局居中radius : [0, '75%'],clockWise : false, // 默認逆時針startAngle: 90,minAngle: 0, // 最小角度改為0selectedOffset: 10, // 選中是扇區偏移量itemStyle: {normal: {// color: 各異,borderColor: '#fff',borderWidth: 1,label: {show: true,position: 'outer'// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE},labelLine: {show: true,length: 20,lineStyle: {// color: 各異,width: 1,type: 'solid'}}},emphasis: {// color: 各異,borderColor: 'rgba(0,0,0,0)',borderWidth: 1,label: {show: false// position: 'outer'// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE},labelLine: {show: false,length: 20,lineStyle: {// color: 各異,width: 1,type: 'solid'}}}}},map: {mapType: 'china', // 各省的mapType暫時都用中文mapLocation: {x : 'center',y : 'center'// width // 自適應// height // 自適應},showLegendSymbol : true, // 顯示圖例顏色標識（系列標識的小圓點），存在legend時生效itemStyle: {normal: {// color: 各異,borderColor: '#fff',borderWidth: 1,areaStyle: {color: '#ccc'//rgba(135,206,250,0.8)},label: {show: false,textStyle: {color: 'rgba(139,69,19,1)'}}},emphasis: { // 也是選中樣式// color: 各異,borderColor: 'rgba(0,0,0,0)',borderWidth: 1,areaStyle: {color: 'rgba(255,215,0,0.8)'},label: {show: false,textStyle: {color: 'rgba(139,69,19,1)'}}}}},force : {// 數據map到圓的半徑的最小值和最大值minRadius : 10,maxRadius : 20,density : 1.0,attractiveness : 1.0,// 初始化的隨機大小位置initSize : 300,// 向心力因子，越大向心力越大centripetal : 1,// 冷卻因子coolDown : 0.99,// 分類里如果有樣式會覆蓋節點默認樣式itemStyle: {normal: {// color: 各異,label: {show: false// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE},nodeStyle : {brushType : 'both',color : '#f08c2e',strokeColor : '#5182ab'},linkStyle : {strokeColor : '#5182ab'}},emphasis: { // color: 各異,label: {show: false// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE},nodeStyle : {},linkStyle : {}}}},chord : {radius : ['65%', '75%'],center : ['50%', '50%'],padding : 2,sort : 'none', // can be 'none', 'ascending', 'descending'sortSub : 'none', // can be 'none', 'ascending', 'descending'startAngle : 90,clockWise : false,showScale : false,showScaleText : false,itemStyle : {normal : {label : {show : true// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE},lineStyle : {width : 0,color : '#000'},chordStyle : {lineStyle : {width : 1,color : '#666'}}},emphasis : {lineStyle : {width : 0,color : '#000'},chordStyle : {lineStyle : {width : 2,color : '#333'}}}}},island: {r: 15,calculateStep: 0.1 // 滾輪可計算步長 0.1 = 10%},markPoint : {symbol: 'pin', // 標注類型symbolSize: 10, // 標注大小，半寬（半徑）參數，當圖形為方向或菱形則總寬度為symbolSize * 2//symbolRotate : null, // 標注旋轉控制itemStyle: {normal: {// color: 各異，// borderColor: 各異, // 標注邊線顏色，優先于color borderWidth: 2, // 標注邊線線寬，單位px，默認為1label: {show: true,position: 'inside' // 可選為'left'|'right'|'top'|'bottom'// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE}},emphasis: {// color: 各異label: {show: true// position: 'inside' // 'left'|'right'|'top'|'bottom'// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE}}}},markLine : {// 標線起始和結束的symbol介紹類型，如果都一樣，可以直接傳stringsymbol: ['circle', 'arrow'], // 標線起始和結束的symbol大小，半寬（半徑）參數，當圖形為方向或菱形則總寬度為symbolSize * 2symbolSize: [2, 4],// 標線起始和結束的symbol旋轉控制//symbolRotate : null,itemStyle: {normal: {// color: 各異, // 標線主色，線色，symbol主色// borderColor: 隨color, // 標線symbol邊框顏色，優先于color borderWidth: 2, // 標線symbol邊框線寬，單位px，默認為2label: {show: false,// 可選為 'start'|'end'|'left'|'right'|'top'|'bottom'position: 'inside', textStyle: { // 默認使用全局文本樣式，詳見TEXTSTYLEcolor: '#333'}},lineStyle: {// color: 隨borderColor, // 主色，線色，優先級高于borderColor和color// width: 隨borderWidth, // 優先于borderWidthtype: 'solid',shadowColor : 'rgba(0,0,0,0)', //默認透明shadowBlur: 5,shadowOffsetX: 3,shadowOffsetY: 3}},emphasis: {// color: 各異label: {show: false// position: 'inside' // 'left'|'right'|'top'|'bottom'// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE},lineStyle : {}}}},textStyle: {decoration: 'none',fontFamily: 'Arial, Verdana, sans-serif',fontFamily2: '微軟雅黑', // IE8- 字體模糊并且不支持不同字體混排，額外指定一份fontSize: 12,fontStyle: 'normal',fontWeight: 'normal'},// 默認標志圖形類型列表symbolList : ['circle', 'rectangle', 'triangle', 'diamond','emptyCircle', 'emptyRectangle', 'emptyTriangle', '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}

?

總結

以上是生活随笔為你收集整理的Echarts API说明文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。