echarts各個配置項詳細說明總結


echarts 文檔參數說明 涉及了幾乎經常用到的參數 (缺少部分參數)

  1 theme = {
  2     // 全圖默認背景
  3     // backgroundColor: 'rgba(0,0,0,0)',
  4 
  5     // 默認色板
  6     color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
  7             '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
  8             '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
  9             '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
 10 
 11     // 圖表標題
 12     title: {
 13         x: 'left',                 // 水平安放位置,默認為左對齊,可選為:
 14                                    // 'center' ¦ 'left' ¦ 'right'
 15                                    // ¦ {number}(x坐標,單位px)
 16         y: 'top',                  // 垂直安放位置,默認為全圖頂端,可選為:
 17                                    // 'top' ¦ 'bottom' ¦ 'center'
 18                                    // ¦ {number}(y坐標,單位px)
 19         //textAlign: null          // 水平對齊方式,默認根據x設置自動調整
 20         backgroundColor: 'rgba(0,0,0,0)',
 21         borderColor: '#ccc',       // 標題邊框顏色
 22         borderWidth: 0,            // 標題邊框線寬,單位px,默認為0(無邊框)
 23         padding: 5,                // 標題內邊距,單位px,默認各方向內邊距為5,
 24                                    // 接受數組分別設定上右下左邊距,同css
 25         itemGap: 10,               // 主副標題縱向間隔,單位px,默認為10,
 26         textStyle: {
 27             fontSize: 18,
 28             fontWeight: 'bolder',
 29             color: '#333'          // 主標題文字顏色
 30         },
 31         subtextStyle: {
 32             color: '#aaa'          // 副標題文字顏色
 33         }
 34     },
 35 
 36     // 圖例
 37     legend: {
 38         orient: 'horizontal',      // 布局方式,默認為水平布局,可選為:
 39                                    // 'horizontal' ¦ 'vertical'
 40         x: 'center',               // 水平安放位置,默認為全圖居中,可選為:
 41                                    // 'center' ¦ 'left' ¦ 'right'
 42                                    // ¦ {number}(x坐標,單位px)
 43         y: 'top',                  // 垂直安放位置,默認為全圖頂端,可選為:
 44                                    // 'top' ¦ 'bottom' ¦ 'center'
 45                                    // ¦ {number}(y坐標,單位px)
 46         backgroundColor: 'rgba(0,0,0,0)',
 47         borderColor: '#ccc',       // 圖例邊框顏色
 48         borderWidth: 0,            // 圖例邊框線寬,單位px,默認為0(無邊框)
 49         padding: 5,                // 圖例內邊距,單位px,默認各方向內邊距為5,
 50                                    // 接受數組分別設定上右下左邊距,同css
 51         itemGap: 10,               // 各個item之間的間隔,單位px,默認為10,
 52                                    // 橫向布局時為水平間隔,縱向布局時為縱向間隔
 53         itemWidth: 20,             // 圖例圖形寬度
 54         itemHeight: 14,            // 圖例圖形高度
 55         textStyle: {
 56             color: '#333'          // 圖例文字顏色
 57         }
 58     },
 59 
 60     // 值域
 61     dataRange: {
 62         orient: 'vertical',        // 布局方式,默認為垂直布局,可選為:
 63                                    // 'horizontal' ¦ 'vertical'
 64         x: 'left',                 // 水平安放位置,默認為全圖左對齊,可選為:
 65                                    // 'center' ¦ 'left' ¦ 'right'
 66                                    // ¦ {number}(x坐標,單位px)
 67         y: 'bottom',               // 垂直安放位置,默認為全圖底部,可選為:
 68                                    // 'top' ¦ 'bottom' ¦ 'center'
 69                                    // ¦ {number}(y坐標,單位px)
 70         backgroundColor: 'rgba(0,0,0,0)',
 71         borderColor: '#ccc',       // 值域邊框顏色
 72         borderWidth: 0,            // 值域邊框線寬,單位px,默認為0(無邊框)
 73         padding: 5,                // 值域內邊距,單位px,默認各方向內邊距為5,
 74                                    // 接受數組分別設定上右下左邊距,同css
 75         itemGap: 10,               // 各個item之間的間隔,單位px,默認為10,
 76                                    // 橫向布局時為水平間隔,縱向布局時為縱向間隔
 77         itemWidth: 20,             // 值域圖形寬度,線性漸變水平布局寬度為該值 * 10
 78         itemHeight: 14,            // 值域圖形高度,線性漸變垂直布局高度為該值 * 10
 79         splitNumber: 5,            // 分割段數,默認為5,為0時為線性漸變
 80         color:['#1e90ff','#f0ffff'],//顏色 
 81         //text:['高','低'],         // 文本,默認為數值文本
 82         textStyle: {
 83             color: '#333'          // 值域文字顏色
 84         }
 85     },
 86 
 87     toolbox: {
 88         orient: 'horizontal',      // 布局方式,默認為水平布局,可選為:
 89                                    // 'horizontal' ¦ 'vertical'
 90         x: 'right',                // 水平安放位置,默認為全圖右對齊,可選為:
 91                                    // 'center' ¦ 'left' ¦ 'right'
 92                                    // ¦ {number}(x坐標,單位px)
 93         y: 'top',                  // 垂直安放位置,默認為全圖頂端,可選為:
 94                                    // 'top' ¦ 'bottom' ¦ 'center'
 95                                    // ¦ {number}(y坐標,單位px)
 96         color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
 97         backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景顏色
 98         borderColor: '#ccc',       // 工具箱邊框顏色
 99         borderWidth: 0,            // 工具箱邊框線寬,單位px,默認為0(無邊框)
100         padding: 5,                // 工具箱內邊距,單位px,默認各方向內邊距為5,
101                                    // 接受數組分別設定上右下左邊距,同css
102         itemGap: 10,               // 各個item之間的間隔,單位px,默認為10,
103                                    // 橫向布局時為水平間隔,縱向布局時為縱向間隔
104         itemSize: 16,              // 工具箱圖形寬度
105         featureImageIcon : {},     // 自定義圖片icon
106         featureTitle : {
107             mark : '輔助線開關',
108             markUndo : '刪除輔助線',
109             markClear : '清空輔助線',
110             dataZoom : '區域縮放',
111             dataZoomReset : '區域縮放后退',
112             dataView : '數據視圖',
113             lineChart : '折線圖切換',
114             barChart : '柱形圖切換',
115             restore : '還原',
116             saveAsImage : '保存為圖片'
117         }
118     },
119 
120     // 提示框
121     tooltip: {
122         trigger: 'item',           // 觸發類型,默認數據觸發,見下圖,可選為:'item' ¦ 'axis'
123         showDelay: 20,             // 顯示延遲,添加顯示延遲可以避免頻繁切換,單位ms
124         hideDelay: 100,            // 隱藏延遲,單位ms
125         transitionDuration : 0.4,  // 動畫變換時間,單位s
126         backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景顏色,默認為透明度為0.7的黑色
127         borderColor: '#333',       // 提示邊框顏色
128         borderRadius: 4,           // 提示邊框圓角,單位px,默認為4
129         borderWidth: 0,            // 提示邊框線寬,單位px,默認為0(無邊框)
130         padding: 5,                // 提示內邊距,單位px,默認各方向內邊距為5,
131                                    // 接受數組分別設定上右下左邊距,同css
132         axisPointer : {            // 坐標軸指示器,坐標軸觸發有效
133             type : 'line',         // 默認為直線,可選為:'line' | 'shadow'
134             lineStyle : {          // 直線指示器樣式設置
135                 color: '#48b',
136                 width: 2,
137                 type: 'solid'
138             },
139             shadowStyle : {                       // 陰影指示器樣式設置
140                 width: 'auto',                   // 陰影大小
141                 color: 'rgba(150,150,150,0.3)'  // 陰影顏色
142             }
143         },
144         textStyle: {
145             color: '#fff'
146         }
147     },
148 
149     // 區域縮放控制器
150     dataZoom: {
151         orient: 'horizontal',      // 布局方式,默認為水平布局,可選為:
152                                    // 'horizontal' ¦ 'vertical'
153         // x: {number},            // 水平安放位置,默認為根據grid參數適配,可選為:
154                                    // {number}(x坐標,單位px)
155         // y: {number},            // 垂直安放位置,默認為根據grid參數適配,可選為:
156                                    // {number}(y坐標,單位px)
157         // width: {number},        // 指定寬度,橫向布局時默認為根據grid參數適配
158         // height: {number},       // 指定高度,縱向布局時默認為根據grid參數適配
159         backgroundColor: 'rgba(0,0,0,0)',       // 背景顏色
160         dataBackgroundColor: '#eee',            // 數據背景顏色
161         fillerColor: 'rgba(144,197,237,0.2)',   // 填充顏色
162         handleColor: 'rgba(70,130,180,0.8)'     // 手柄顏色
163     },
164 
165     // 網格
166     grid: {
167         x: 80,
168         y: 60,
169         x2: 80,
170         y2: 60,
171         // width: {totalWidth} - x - x2,
172         // height: {totalHeight} - y - y2,
173         backgroundColor: 'rgba(0,0,0,0)',
174         borderWidth: 1,
175         borderColor: '#ccc'
176     },
177 
178     // 類目軸
179     categoryAxis: {
180         position: 'bottom',    // 位置
181         nameLocation: 'end',   // 坐標軸名字位置,支持'start' | 'end'
182         boundaryGap: true,     // 類目起始和結束兩端空白策略
183         axisLine: {            // 坐標軸線
184             show: true,        // 默認顯示,屬性show控制顯示與否
185             lineStyle: {       // 屬性lineStyle控制線條樣式
186                 color: '#48b',
187                 width: 2,
188                 type: 'solid'
189             }
190         },
191         axisTick: {            // 坐標軸小標記
192             show: true,       // 屬性show控制顯示與否,默認不顯示
193             interval: 'auto',
194             // onGap: null,
195             inside : false,    // 控制小標記是否在grid里 
196             length :5,         // 屬性length控制線長
197             lineStyle: {       // 屬性lineStyle控制線條樣式
198                 color: '#333',
199                 width: 1
200             }
201         },
202         axisLabel: {           // 坐標軸文本標簽,詳見axis.axisLabel
203             show: true,
204             interval: 'auto',
205             rotate: 0,
206             margin: 8,
207             // formatter: null,
208             textStyle: {       // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
209                 color: '#333'
210             }
211         },
212         splitLine: {           // 分隔線
213             show: true,        // 默認顯示,屬性show控制顯示與否
214             // onGap: null,
215             lineStyle: {       // 屬性lineStyle(詳見lineStyle)控制線條樣式
216                 color: ['#ccc'],
217                 width: 1,
218                 type: 'solid'
219             }
220         },
221         splitArea: {           // 分隔區域
222             show: false,       // 默認不顯示,屬性show控制顯示與否
223             // onGap: null,
224             areaStyle: {       // 屬性areaStyle(詳見areaStyle)控制區域樣式
225                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
226             }
227         }
228     },
229 
230     // 數值型坐標軸默認參數
231     valueAxis: {
232         position: 'left',      // 位置
233         nameLocation: 'end',   // 坐標軸名字位置,支持'start' | 'end'
234         nameTextStyle: {},     // 坐標軸文字樣式,默認取全局樣式
235         boundaryGap: [0, 0],   // 數值起始和結束兩端空白策略
236         splitNumber: 5,        // 分割段數,默認為5
237         axisLine: {            // 坐標軸線
238             show: true,        // 默認顯示,屬性show控制顯示與否
239             lineStyle: {       // 屬性lineStyle控制線條樣式
240                 color: '#48b',
241                 width: 2,
242                 type: 'solid'
243             }
244         },
245         axisTick: {            // 坐標軸小標記
246             show: false,       // 屬性show控制顯示與否,默認不顯示
247             inside : false,    // 控制小標記是否在grid里 
248             length :5,         // 屬性length控制線長
249             lineStyle: {       // 屬性lineStyle控制線條樣式
250                 color: '#333',
251                 width: 1
252             }
253         },
254         axisLabel: {           // 坐標軸文本標簽,詳見axis.axisLabel
255             show: true,
256             rotate: 0,
257             margin: 8,
258             // formatter: null,
259             textStyle: {       // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
260                 color: '#333'
261             }
262         },
263         splitLine: {           // 分隔線
264             show: true,        // 默認顯示,屬性show控制顯示與否
265             lineStyle: {       // 屬性lineStyle(詳見lineStyle)控制線條樣式
266                 color: ['#ccc'],
267                 width: 1,
268                 type: 'solid'
269             }
270         },
271         splitArea: {           // 分隔區域
272             show: false,       // 默認不顯示,屬性show控制顯示與否
273             areaStyle: {       // 屬性areaStyle(詳見areaStyle)控制區域樣式
274                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
275             }
276         }
277     },
278 
279     polar : {
280         center : ['50%', '50%'],    // 默認全局居中
281         radius : '75%',
282         startAngle : 90,
283         splitNumber : 5,
284         name : {
285             show: true,
286             textStyle: {       // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
287                 color: '#333'
288             }
289         },
290         axisLine: {            // 坐標軸線
291             show: true,        // 默認顯示,屬性show控制顯示與否
292             lineStyle: {       // 屬性lineStyle控制線條樣式
293                 color: '#ccc',
294                 width: 1,
295                 type: 'solid'
296             }
297         },
298         axisLabel: {           // 坐標軸文本標簽,詳見axis.axisLabel
299             show: false,
300             textStyle: {       // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
301                 color: '#333'
302             }
303         },
304         splitArea : {
305             show : true,
306             areaStyle : {
307                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
308             }
309         },
310         splitLine : {
311             show : true,
312             lineStyle : {
313                 width : 1,
314                 color : '#ccc'
315             }
316         }
317     },
318 
319     // 柱形圖默認參數
320     bar: {
321         barMinHeight: 0,          // 最小高度改為0
322         // barWidth: null,        // 默認自適應
323         barGap: '30%',            // 柱間距離,默認為柱形寬度的30%,可設固定值
324         barCategoryGap : '20%',   // 類目間柱形距離,默認為類目間距的20%,可設固定值
325         itemStyle: {
326             normal: {
327                 // color: '各異',
328                 barBorderColor: '#fff',       // 柱條邊線
329                 barBorderRadius: 0,           // 柱條邊線圓角,單位px,默認為0
330                 barBorderWidth: 1,            // 柱條邊線線寬,單位px,默認為1
331                 label: {
332                     show: false
333                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
334                     //           'inside'|'left'|'right'|'top'|'bottom'
335                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
336                 }
337             },
338             emphasis: {
339                 // color: '各異',
340                 barBorderColor: 'rgba(0,0,0,0)',   // 柱條邊線
341                 barBorderRadius: 0,                // 柱條邊線圓角,單位px,默認為0
342                 barBorderWidth: 1,                 // 柱條邊線線寬,單位px,默認為1
343                 label: {
344                     show: false
345                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
346                     //           'inside'|'left'|'right'|'top'|'bottom'
347                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
348                 }
349             }
350         }
351     },
352 
353     // 折線圖默認參數
354     line: {
355         itemStyle: {
356             normal: {
357                 // color: 各異,
358                 label: {
359                     show: false
360                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
361                     //           'inside'|'left'|'right'|'top'|'bottom'
362                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
363                 },
364                 lineStyle: {
365                     width: 2,
366                     type: 'solid',
367                     shadowColor : 'rgba(0,0,0,0)', //默認透明
368                     shadowBlur: 5,
369                     shadowOffsetX: 3,
370                     shadowOffsetY: 3
371                 }
372             },
373             emphasis: {
374                 // color: 各異,
375                 label: {
376                     show: false
377                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
378                     //           'inside'|'left'|'right'|'top'|'bottom'
379                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
380                 }
381             }
382         },
383         //smooth : false,
384         //symbol: null,         // 拐點圖形類型
385         symbolSize: 2,          // 拐點圖形大小
386         //symbolRotate : null,  // 拐點圖形旋轉控制
387         showAllSymbol: false    // 標志圖形默認只有主軸顯示(隨主軸標簽間隔隱藏策略)
388     },
389 
390     // K線圖默認參數
391     k: {
392         // barWidth : null          // 默認自適應
393         // barMaxWidth : null       // 默認自適應 
394         itemStyle: {
395             normal: {
396                 color: '#fff',          // 陽線填充顏色
397                 color0: '#00aa11',      // 陰線填充顏色
398                 lineStyle: {
399                     width: 1,
400                     color: '#ff3200',   // 陽線邊框顏色
401                     color0: '#00aa11'   // 陰線邊框顏色
402                 }
403             },
404             emphasis: {
405                 // color: 各異,
406                 // color0: 各異
407             }
408         }
409     },
410 
411     // 散點圖默認參數
412     scatter: {
413         //symbol: null,      // 圖形類型
414         symbolSize: 4,       // 圖形大小,半寬(半徑)參數,當圖形為方向或菱形則總寬度為symbolSize * 2
415         //symbolRotate : null,  // 圖形旋轉控制
416         large: false,        // 大規模散點圖
417         largeThreshold: 2000,// 大規模閥值,large為true且數據量>largeThreshold才啟用大規模模式
418         itemStyle: {
419             normal: {
420                 // color: 各異,
421                 label: {
422                     show: false
423                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
424                     //           'inside'|'left'|'right'|'top'|'bottom'
425                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
426                 }
427             },
428             emphasis: {
429                 // color: '各異'
430                 label: {
431                     show: false
432                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
433                     //           'inside'|'left'|'right'|'top'|'bottom'
434                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
435                 }
436             }
437         }
438     },
439 
440     // 雷達圖默認參數
441     radar : {
442         itemStyle: {
443             normal: {
444                 // color: 各異,
445                 label: {
446                     show: false
447                 },
448                 lineStyle: {
449                     width: 2,
450                     type: 'solid'
451                 }
452             },
453             emphasis: {
454                 // color: 各異,
455                 label: {
456                     show: false
457                 }
458             }
459         },
460         //symbol: null,         // 拐點圖形類型
461         symbolSize: 2           // 可計算特性參數,空數據拖拽提示圖形大小
462         //symbolRotate : null,  // 圖形旋轉控制
463     },
464 
465     // 餅圖默認參數
466     pie: {
467         center : ['50%', '50%'],    // 默認全局居中
468         radius : [0, '75%'],
469         clockWise : false,          // 默認逆時針
470         startAngle: 90,
471         minAngle: 0,                // 最小角度改為0
472         selectedOffset: 10,         // 選中是扇區偏移量
473         itemStyle: {
474             normal: {
475                 // color: 各異,
476                 borderColor: '#fff',
477                 borderWidth: 1,
478                 label: {
479                     show: true,
480                     position: 'outer'
481                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
482                 },
483                 labelLine: {
484                     show: true,
485                     length: 20,
486                     lineStyle: {
487                         // color: 各異,
488                         width: 1,
489                         type: 'solid'
490                     }
491                 }
492             },
493             emphasis: {
494                 // color: 各異,
495                 borderColor: 'rgba(0,0,0,0)',
496                 borderWidth: 1,
497                 label: {
498                     show: false
499                     // position: 'outer'
500                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
501                 },
502                 labelLine: {
503                     show: false,
504                     length: 20,
505                     lineStyle: {
506                         // color: 各異,
507                         width: 1,
508                         type: 'solid'
509                     }
510                 }
511             }
512         }
513     },
514 
515     map: {
516         mapType: 'china',   // 各省的mapType暫時都用中文
517         mapLocation: {
518             x : 'center',
519             y : 'center'
520             // width    // 自適應
521             // height   // 自適應
522         },
523         showLegendSymbol : true,       // 顯示圖例顏色標識(系列標識的小圓點),存在legend時生效
524         itemStyle: {
525             normal: {
526                 // color: 各異,
527                 borderColor: '#fff',
528                 borderWidth: 1,
529                 areaStyle: {
530                     color: '#ccc'//rgba(135,206,250,0.8)
531                 },
532                 label: {
533                     show: false,
534                     textStyle: {
535                         color: 'rgba(139,69,19,1)'
536                     }
537                 }
538             },
539             emphasis: {                 // 也是選中樣式
540                 // color: 各異,
541                 borderColor: 'rgba(0,0,0,0)',
542                 borderWidth: 1,
543                 areaStyle: {
544                     color: 'rgba(255,215,0,0.8)'
545                 },
546                 label: {
547                     show: false,
548                     textStyle: {
549                         color: 'rgba(139,69,19,1)'
550                     }
551                 }
552             }
553         }
554     },
555 
556     force : {
557         // 數據map到圓的半徑的最小值和最大值
558         minRadius : 10,
559         maxRadius : 20,
560         density : 1.0,
561         attractiveness : 1.0,
562         // 初始化的隨機大小位置
563         initSize : 300,
564         // 向心力因子,越大向心力越大
565         centripetal : 1,
566         // 冷卻因子
567         coolDown : 0.99,
568         // 分類里如果有樣式會覆蓋節點默認樣式
569         itemStyle: {
570             normal: {
571                 // color: 各異,
572                 label: {
573                     show: false
574                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
575                 },
576                 nodeStyle : {
577                     brushType : 'both',
578                     color : '#f08c2e',
579                     strokeColor : '#5182ab'
580                 },
581                 linkStyle : {
582                     strokeColor : '#5182ab'
583                 }
584             },
585             emphasis: {
586                 // color: 各異,
587                 label: {
588                     show: false
589                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
590                 },
591                 nodeStyle : {},
592                 linkStyle : {}
593             }
594         }
595     },
596 
597     chord : {
598         radius : ['65%', '75%'],
599         center : ['50%', '50%'],
600         padding : 2,
601         sort : 'none', // can be 'none', 'ascending', 'descending'
602         sortSub : 'none', // can be 'none', 'ascending', 'descending'
603         startAngle : 90,
604         clockWise : false,
605         showScale : false,
606         showScaleText : false,
607         itemStyle : {
608             normal : {
609                 label : {
610                     show : true
611                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
612                 },
613                 lineStyle : {
614                     width : 0,
615                     color : '#000'
616                 },
617                 chordStyle : {
618                     lineStyle : {
619                         width : 1,
620                         color : '#666'
621                     }
622                 }
623             },
624             emphasis : {
625                 lineStyle : {
626                     width : 0,
627                     color : '#000'
628                 },
629                 chordStyle : {
630                     lineStyle : {
631                         width : 2,
632                         color : '#333'
633                     }
634                 }
635             }
636         }
637     },
638 
639     island: {
640         r: 15,
641         calculateStep: 0.1  // 滾輪可計算步長 0.1 = 10%
642     },
643 
644     markPoint : {
645         symbol: 'pin',         // 標注類型
646         symbolSize: 10,        // 標注大小,半寬(半徑)參數,當圖形為方向或菱形則總寬度為symbolSize * 2
647         //symbolRotate : null, // 標注旋轉控制
648         itemStyle: {
649             normal: {
650                 // color: 各異,
651                 // borderColor: 各異,     // 標注邊線顏色,優先於color 
652                 borderWidth: 2,            // 標注邊線線寬,單位px,默認為1
653                 label: {
654                     show: true,
655                     position: 'inside' // 可選為'left'|'right'|'top'|'bottom'
656                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
657                 }
658             },
659             emphasis: {
660                 // color: 各異
661                 label: {
662                     show: true
663                     // position: 'inside'  // 'left'|'right'|'top'|'bottom'
664                     // textStyle: null     // 默認使用全局文本樣式,詳見TEXTSTYLE
665                 }
666             }
667         }
668     },
669 
670     markLine : {
671         // 標線起始和結束的symbol介紹類型,如果都一樣,可以直接傳string
672         symbol: ['circle', 'arrow'],  
673         // 標線起始和結束的symbol大小,半寬(半徑)參數,當圖形為方向或菱形則總寬度為symbolSize * 2
674         symbolSize: [2, 4],
675         // 標線起始和結束的symbol旋轉控制
676         //symbolRotate : null,
677         itemStyle: {
678             normal: {
679                 // color: 各異,           // 標線主色,線色,symbol主色
680                 // borderColor: 隨color,     // 標線symbol邊框顏色,優先於color 
681                 borderWidth: 2,          // 標線symbol邊框線寬,單位px,默認為2
682                 label: {
683                     show: false,
684                     // 可選為 'start'|'end'|'left'|'right'|'top'|'bottom'
685                     position: 'inside',  
686                     textStyle: {         // 默認使用全局文本樣式,詳見TEXTSTYLE
687                         color: '#333'
688                     }
689                 },
690                 lineStyle: {
691                     // color: 隨borderColor, // 主色,線色,優先級高於borderColor和color
692                     // width: 隨borderWidth, // 優先於borderWidth
693                     type: 'solid',
694                     shadowColor : 'rgba(0,0,0,0)', //默認透明
695                     shadowBlur: 5,
696                     shadowOffsetX: 3,
697                     shadowOffsetY: 3
698                 }
699             },
700             emphasis: {
701                 // color: 各異
702                 label: {
703                     show: false
704                     // position: 'inside' // 'left'|'right'|'top'|'bottom'
705                     // textStyle: null    // 默認使用全局文本樣式,詳見TEXTSTYLE
706                 },
707                 lineStyle : {}
708             }
709         }
710     },
711 
712     textStyle: {
713         decoration: 'none',
714         fontFamily: 'Arial, Verdana, sans-serif',
715         fontFamily2: '微軟雅黑',    // IE8- 字體模糊並且不支持不同字體混排,額外指定一份
716         fontSize: 12,
717         fontStyle: 'normal',
718         fontWeight: 'normal'
719     },
720 
721     // 默認標志圖形類型列表
722     symbolList : [
723       'circle', 'rectangle', 'triangle', 'diamond',
724       'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
725     ],
726     loadingText : 'Loading...',
727     // 可計算特性配置,孤島,提示顏色
728     calculable: false,              // 默認關閉可計算特性
729     calculableColor: 'rgba(255,165,0,0.6)',       // 拖拽提示邊框顏色
730     calculableHolderColor: '#ccc', // 可計算占位提示顏色
731     nameConnector: ' & ',
732     valueConnector: ' : ',
733     animation: true,
734     animationThreshold: 2500,       // 動畫元素閥值,產生的圖形原素超過2500不出動畫
735     addDataAnimation: true,         // 動態數據接口是否開啟動畫效果
736     animationDuration: 2000,
737     animationEasing: 'ExponentialOut'    //BounceOut
738 }

 

(轉載自https://blog.csdn.net/sinat_34492035/article/details/70258557


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM