Echarts折線圖屬性設置大全


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

 


免責聲明!

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



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