Echarts-各個配置項詳細說明總結【轉】


1、圖表標題

復制代碼
 1  title: {
 2         x: 'left',                 // 水平安放位置,默認為左對齊,可選為:
 3                                    // 'center' ¦ 'left' ¦ 'right'
 4                                    // ¦ {number}(x坐標,單位px)
 5         y: 'top',                  // 垂直安放位置,默認為全圖頂端,可選為:
 6                                    // 'top' ¦ 'bottom' ¦ 'center'
 7                                    // ¦ {number}(y坐標,單位px)
 8         //textAlign: null          // 水平對齊方式,默認根據x設置自動調整
 9         backgroundColor: 'rgba(0,0,0,0)',
10         borderColor: '#ccc',       // 標題邊框顏色
11         borderWidth: 0,            // 標題邊框線寬,單位px,默認為0(無邊框)
12         padding: 5,                // 標題內邊距,單位px,默認各方向內邊距為5,
13                                    // 接受數組分別設定上右下左邊距,同css
14         itemGap: 10,               // 主副標題縱向間隔,單位px,默認為10,
15         textStyle: {
16             fontSize: 18,
17             fontWeight: 'bolder',
18             color: '#333'          // 主標題文字顏色
19         },
20         subtextStyle: {
21             color: '#aaa'          // 副標題文字顏色
22         }
23     },
復制代碼

2、圖例

復制代碼
 1  legend: {
 2         orient: 'horizontal',      // 布局方式,默認為水平布局,可選為:
 3                                    // 'horizontal' ¦ 'vertical'
 4         x: 'center',               // 水平安放位置,默認為全圖居中,可選為:
 5                                    // 'center' ¦ 'left' ¦ 'right'
 6                                    // ¦ {number}(x坐標,單位px)
 7         y: 'top',                  // 垂直安放位置,默認為全圖頂端,可選為:
 8                                    // 'top' ¦ 'bottom' ¦ 'center'
 9                                    // ¦ {number}(y坐標,單位px)
10         backgroundColor: 'rgba(0,0,0,0)',
11         borderColor: '#ccc',       // 圖例邊框顏色
12         borderWidth: 0,            // 圖例邊框線寬,單位px,默認為0(無邊框)
13         padding: 5,                // 圖例內邊距,單位px,默認各方向內邊距為5,
14                                    // 接受數組分別設定上右下左邊距,同css
15         itemGap: 10,               // 各個item之間的間隔,單位px,默認為10,
16                                    // 橫向布局時為水平間隔,縱向布局時為縱向間隔
17         itemWidth: 20,             // 圖例圖形寬度
18         itemHeight: 14,            // 圖例圖形高度
19         textStyle: {
20             color: '#333'          // 圖例文字顏色
21         }
22     },
復制代碼

3、值域

復制代碼
 1   dataRange: {
 2         orient: 'vertical',        // 布局方式,默認為垂直布局,可選為:
 3                                    // 'horizontal' ¦ 'vertical'
 4         x: 'left',                 // 水平安放位置,默認為全圖左對齊,可選為:
 5                                    // 'center' ¦ 'left' ¦ 'right'
 6                                    // ¦ {number}(x坐標,單位px)
 7         y: 'bottom',               // 垂直安放位置,默認為全圖底部,可選為:
 8                                    // 'top' ¦ 'bottom' ¦ 'center'
 9                                    // ¦ {number}(y坐標,單位px)
10         backgroundColor: 'rgba(0,0,0,0)',
11         borderColor: '#ccc',       // 值域邊框顏色
12         borderWidth: 0,            // 值域邊框線寬,單位px,默認為0(無邊框)
13         padding: 5,                // 值域內邊距,單位px,默認各方向內邊距為5,
14                                    // 接受數組分別設定上右下左邊距,同css
15         itemGap: 10,               // 各個item之間的間隔,單位px,默認為10,
16                                    // 橫向布局時為水平間隔,縱向布局時為縱向間隔
17         itemWidth: 20,             // 值域圖形寬度,線性漸變水平布局寬度為該值 * 10
18         itemHeight: 14,            // 值域圖形高度,線性漸變垂直布局高度為該值 * 10
19         splitNumber: 5,            // 分割段數,默認為5,為0時為線性漸變
20         color:['#1e90ff','#f0ffff'],//顏色 
21         //text:['高','低'],         // 文本,默認為數值文本
22         textStyle: {
23             color: '#333'          // 值域文字顏色
24         }
25     },
26 
27     toolbox: {
28         orient: 'horizontal',      // 布局方式,默認為水平布局,可選為:
29                                    // 'horizontal' ¦ 'vertical'
30         x: 'right',                // 水平安放位置,默認為全圖右對齊,可選為:
31                                    // 'center' ¦ 'left' ¦ 'right'
32                                    // ¦ {number}(x坐標,單位px)
33         y: 'top',                  // 垂直安放位置,默認為全圖頂端,可選為:
34                                    // 'top' ¦ 'bottom' ¦ 'center'
35                                    // ¦ {number}(y坐標,單位px)
36         color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
37         backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景顏色
38         borderColor: '#ccc',       // 工具箱邊框顏色
39         borderWidth: 0,            // 工具箱邊框線寬,單位px,默認為0(無邊框)
40         padding: 5,                // 工具箱內邊距,單位px,默認各方向內邊距為5,
41                                    // 接受數組分別設定上右下左邊距,同css
42         itemGap: 10,               // 各個item之間的間隔,單位px,默認為10,
43                                    // 橫向布局時為水平間隔,縱向布局時為縱向間隔
44         itemSize: 16,              // 工具箱圖形寬度
45         featureImageIcon : {},     // 自定義圖片icon
46         featureTitle : {
47             mark : '輔助線開關',
48             markUndo : '刪除輔助線',
49             markClear : '清空輔助線',
50             dataZoom : '區域縮放',
51             dataZoomReset : '區域縮放后退',
52             dataView : '數據視圖',
53             lineChart : '折線圖切換',
54             barChart : '柱形圖切換',
55             restore : '還原',
56             saveAsImage : '保存為圖片'
57         }
58     },
復制代碼

4、提示框

復制代碼
 1   tooltip: {
 2         trigger: 'item',           // 觸發類型,默認數據觸發,見下圖,可選為:'item' ¦ 'axis'
 3         showDelay: 20,             // 顯示延遲,添加顯示延遲可以避免頻繁切換,單位ms
 4         hideDelay: 100,            // 隱藏延遲,單位ms
 5         transitionDuration : 0.4,  // 動畫變換時間,單位s
 6         backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景顏色,默認為透明度為0.7的黑色
 7         borderColor: '#333',       // 提示邊框顏色
 8         borderRadius: 4,           // 提示邊框圓角,單位px,默認為4
 9         borderWidth: 0,            // 提示邊框線寬,單位px,默認為0(無邊框)
10         padding: 5,                // 提示內邊距,單位px,默認各方向內邊距為5,
11                                    // 接受數組分別設定上右下左邊距,同css
12         axisPointer : {            // 坐標軸指示器,坐標軸觸發有效
13             type : 'line',         // 默認為直線,可選為:'line' | 'shadow'
14             lineStyle : {          // 直線指示器樣式設置
15                 color: '#48b',
16                 width: 2,
17                 type: 'solid'
18             },
19             shadowStyle : {                       // 陰影指示器樣式設置
20                 width: 'auto',                   // 陰影大小
21                 color: 'rgba(150,150,150,0.3)'  // 陰影顏色
22             }
23         },
24         textStyle: {
25             color: '#fff'
26         }
27     },
復制代碼

5、區域縮放控制器

復制代碼
 1 dataZoom: {
 2         orient: 'horizontal',      // 布局方式,默認為水平布局,可選為:
 3                                    // 'horizontal' ¦ 'vertical'
 4         // x: {number},            // 水平安放位置,默認為根據grid參數適配,可選為:
 5                                    // {number}(x坐標,單位px)
 6         // y: {number},            // 垂直安放位置,默認為根據grid參數適配,可選為:
 7                                    // {number}(y坐標,單位px)
 8         // width: {number},        // 指定寬度,橫向布局時默認為根據grid參數適配
 9         // height: {number},       // 指定高度,縱向布局時默認為根據grid參數適配
10         backgroundColor: 'rgba(0,0,0,0)',       // 背景顏色
11         dataBackgroundColor: '#eee',            // 數據背景顏色
12         fillerColor: 'rgba(144,197,237,0.2)',   // 填充顏色
13         handleColor: 'rgba(70,130,180,0.8)'     // 手柄顏色
14     },
復制代碼

6、網格

復制代碼
 1  grid: {
 2         x: 80,
 3         y: 60,
 4         x2: 80,
 5         y2: 60,
 6         // width: {totalWidth} - x - x2,
 7         // height: {totalHeight} - y - y2,
 8         backgroundColor: 'rgba(0,0,0,0)',
 9         borderWidth: 1,
10         borderColor: '#ccc'
11     },
復制代碼

7、類目軸

復制代碼
 1  categoryAxis: {
 2         position: 'bottom',    // 位置
 3         nameLocation: 'end',   // 坐標軸名字位置,支持'start' | 'end'
 4         boundaryGap: true,     // 類目起始和結束兩端空白策略
 5         axisLine: {            // 坐標軸線
 6             show: true,        // 默認顯示,屬性show控制顯示與否
 7             lineStyle: {       // 屬性lineStyle控制線條樣式
 8                 color: '#48b',
 9                 width: 2,
10                 type: 'solid'
11             }
12         },
13         axisTick: {            // 坐標軸小標記
14             show: true,       // 屬性show控制顯示與否,默認不顯示
15             interval: 'auto',
16             // onGap: null,
17             inside : false,    // 控制小標記是否在grid里 
18             length :5,         // 屬性length控制線長
19             lineStyle: {       // 屬性lineStyle控制線條樣式
20                 color: '#333',
21                 width: 1
22             }
23         },
24         axisLabel: {           // 坐標軸文本標簽,詳見axis.axisLabel
25             show: true,
26             interval: 'auto',
27             rotate: 0,
28             margin: 8,
29             // formatter: null,
30             textStyle: {       // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
31                 color: '#333'
32             }
33         },
34         splitLine: {           // 分隔線
35             show: true,        // 默認顯示,屬性show控制顯示與否
36             // onGap: null,
37             lineStyle: {       // 屬性lineStyle(詳見lineStyle)控制線條樣式
38                 color: ['#ccc'],
39                 width: 1,
40                 type: 'solid'
41             }
42         },
43         splitArea: {           // 分隔區域
44             show: false,       // 默認不顯示,屬性show控制顯示與否
45             // onGap: null,
46             areaStyle: {       // 屬性areaStyle(詳見areaStyle)控制區域樣式
47                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
48             }
49         }
50     },
復制代碼

8、數值型坐標軸默認參數

復制代碼
 1     valueAxis: {
 2         position: 'left',      // 位置
 3         nameLocation: 'end',   // 坐標軸名字位置,支持'start' | 'end'
 4         nameTextStyle: {},     // 坐標軸文字樣式,默認取全局樣式
 5         boundaryGap: [0, 0],   // 數值起始和結束兩端空白策略
 6         splitNumber: 5,        // 分割段數,默認為5
 7         axisLine: {            // 坐標軸線
 8             show: true,        // 默認顯示,屬性show控制顯示與否
 9             lineStyle: {       // 屬性lineStyle控制線條樣式
10                 color: '#48b',
11                 width: 2,
12                 type: 'solid'
13             }
14         },
15         axisTick: {            // 坐標軸小標記
16             show: false,       // 屬性show控制顯示與否,默認不顯示
17             inside : false,    // 控制小標記是否在grid里 
18             length :5,         // 屬性length控制線長
19             lineStyle: {       // 屬性lineStyle控制線條樣式
20                 color: '#333',
21                 width: 1
22             }
23         },
24         axisLabel: {           // 坐標軸文本標簽,詳見axis.axisLabel
25             show: true,
26             rotate: 0,
27             margin: 8,
28             // formatter: null,
29             textStyle: {       // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
30                 color: '#333'
31             }
32         },
33         splitLine: {           // 分隔線
34             show: true,        // 默認顯示,屬性show控制顯示與否
35             lineStyle: {       // 屬性lineStyle(詳見lineStyle)控制線條樣式
36                 color: ['#ccc'],
37                 width: 1,
38                 type: 'solid'
39             }
40         },
41         splitArea: {           // 分隔區域
42             show: false,       // 默認不顯示,屬性show控制顯示與否
43             areaStyle: {       // 屬性areaStyle(詳見areaStyle)控制區域樣式
44                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
45             }
46         }
47     },
48 
49     polar : {
50         center : ['50%', '50%'],    // 默認全局居中
51         radius : '75%',
52         startAngle : 90,
53         splitNumber : 5,
54         name : {
55             show: true,
56             textStyle: {       // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
57                 color: '#333'
58             }
59         },
60         axisLine: {            // 坐標軸線
61             show: true,        // 默認顯示,屬性show控制顯示與否
62             lineStyle: {       // 屬性lineStyle控制線條樣式
63                 color: '#ccc',
64                 width: 1,
65                 type: 'solid'
66             }
67         },
68         axisLabel: {           // 坐標軸文本標簽,詳見axis.axisLabel
69             show: false,
70             textStyle: {       // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
71                 color: '#333'
72             }
73         },
74         splitArea : {
75             show : true,
76             areaStyle : {
77                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
78             }
79         },
80         splitLine : {
81             show : true,
82             lineStyle : {
83                 width : 1,
84                 color : '#ccc'
85             }
86         }
87     },
復制代碼

9、柱形圖默認參數

復制代碼
 1 bar: {
 2         barMinHeight: 0,          // 最小高度改為0
 3         // barWidth: null,        // 默認自適應
 4         barGap: '30%',            // 柱間距離,默認為柱形寬度的30%,可設固定值
 5         barCategoryGap : '20%',   // 類目間柱形距離,默認為類目間距的20%,可設固定值
 6         itemStyle: {
 7             normal: {
 8                 // color: '各異',
 9                 barBorderColor: '#fff',       // 柱條邊線
10                 barBorderRadius: 0,           // 柱條邊線圓角,單位px,默認為0
11                 barBorderWidth: 1,            // 柱條邊線線寬,單位px,默認為1
12                 label: {
13                     show: false
14                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
15                     //           'inside'|'left'|'right'|'top'|'bottom'
16                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
17                 }
18             },
19             emphasis: {
20                 // color: '各異',
21                 barBorderColor: 'rgba(0,0,0,0)',   // 柱條邊線
22                 barBorderRadius: 0,                // 柱條邊線圓角,單位px,默認為0
23                 barBorderWidth: 1,                 // 柱條邊線線寬,單位px,默認為1
24                 label: {
25                     show: false
26                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
27                     //           'inside'|'left'|'right'|'top'|'bottom'
28                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
29                 }
30             }
31         }
32     },
復制代碼

10、折線圖默認參數

復制代碼
 1  line: {
 2         itemStyle: {
 3             normal: {
 4                 // color: 各異,
 5                 label: {
 6                     show: false
 7                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
 8                     //           'inside'|'left'|'right'|'top'|'bottom'
 9                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
10                 },
11                 lineStyle: {
12                     width: 2,
13                     type: 'solid',
14                     shadowColor : 'rgba(0,0,0,0)', //默認透明
15                     shadowBlur: 5,
16                     shadowOffsetX: 3,
17                     shadowOffsetY: 3
18                 }
19             },
20             emphasis: {
21                 // color: 各異,
22                 label: {
23                     show: false
24                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
25                     //           'inside'|'left'|'right'|'top'|'bottom'
26                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
27                 }
28             }
29         },
30         //smooth : false,
31         //symbol: null,         // 拐點圖形類型
32         symbolSize: 2,          // 拐點圖形大小
33         //symbolRotate : null,  // 拐點圖形旋轉控制
34         showAllSymbol: false    // 標志圖形默認只有主軸顯示(隨主軸標簽間隔隱藏策略)
35     },
復制代碼

11、K線圖默認參數

復制代碼
 1  k: {
 2         // barWidth : null          // 默認自適應
 3         // barMaxWidth : null       // 默認自適應 
 4         itemStyle: {
 5             normal: {
 6                 color: '#fff',          // 陽線填充顏色
 7                 color0: '#00aa11',      // 陰線填充顏色
 8                 lineStyle: {
 9                     width: 1,
10                     color: '#ff3200',   // 陽線邊框顏色
11                     color0: '#00aa11'   // 陰線邊框顏色
12                 }
13             },
14             emphasis: {
15                 // color: 各異,
16                 // color0: 各異
17             }
18         }
19     },
復制代碼

12、散點圖默認參數

復制代碼
 1  scatter: {
 2         //symbol: null,      // 圖形類型
 3         symbolSize: 4,       // 圖形大小,半寬(半徑)參數,當圖形為方向或菱形則總寬度為symbolSize * 2
 4         //symbolRotate : null,  // 圖形旋轉控制
 5         large: false,        // 大規模散點圖
 6         largeThreshold: 2000,// 大規模閥值,large為true且數據量>largeThreshold才啟用大規模模式
 7         itemStyle: {
 8             normal: {
 9                 // color: 各異,
10                 label: {
11                     show: false
12                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
13                     //           'inside'|'left'|'right'|'top'|'bottom'
14                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
15                 }
16             },
17             emphasis: {
18                 // color: '各異'
19                 label: {
20                     show: false
21                     // position: 默認自適應,水平布局為'top',垂直布局為'right',可選為
22                     //           'inside'|'left'|'right'|'top'|'bottom'
23                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
24                 }
25             }
26         }
27     },
復制代碼

13、雷達圖默認參數

復制代碼
 1   radar : {
 2         itemStyle: {
 3             normal: {
 4                 // color: 各異,
 5                 label: {
 6                     show: false
 7                 },
 8                 lineStyle: {
 9                     width: 2,
10                     type: 'solid'
11                 }
12             },
13             emphasis: {
14                 // color: 各異,
15                 label: {
16                     show: false
17                 }
18             }
19         },
20         //symbol: null,         // 拐點圖形類型
21         symbolSize: 2           // 可計算特性參數,空數據拖拽提示圖形大小
22         //symbolRotate : null,  // 圖形旋轉控制
23     },
復制代碼

14、餅圖默認參數

復制代碼
  1   pie: {
  2         center : ['50%', '50%'],    // 默認全局居中
  3         radius : [0, '75%'],
  4         clockWise : false,          // 默認逆時針
  5         startAngle: 90,
  6         minAngle: 0,                // 最小角度改為0
  7         selectedOffset: 10,         // 選中是扇區偏移量
  8         itemStyle: {
  9             normal: {
 10                 // color: 各異,
 11                 borderColor: '#fff',
 12                 borderWidth: 1,
 13                 label: {
 14                     show: true,
 15                     position: 'outer'
 16                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
 17                 },
 18                 labelLine: {
 19                     show: true,
 20                     length: 20,
 21                     lineStyle: {
 22                         // color: 各異,
 23                         width: 1,
 24                         type: 'solid'
 25                     }
 26                 }
 27             },
 28             emphasis: {
 29                 // color: 各異,
 30                 borderColor: 'rgba(0,0,0,0)',
 31                 borderWidth: 1,
 32                 label: {
 33                     show: false
 34                     // position: 'outer'
 35                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
 36                 },
 37                 labelLine: {
 38                     show: false,
 39                     length: 20,
 40                     lineStyle: {
 41                         // color: 各異,
 42                         width: 1,
 43                         type: 'solid'
 44                     }
 45                 }
 46             }
 47         }
 48     },
 49 
 50     map: {
 51         mapType: 'china',   // 各省的mapType暫時都用中文
 52         mapLocation: {
 53             x : 'center',
 54             y : 'center'
 55             // width    // 自適應
 56             // height   // 自適應
 57         },
 58         showLegendSymbol : true,       // 顯示圖例顏色標識(系列標識的小圓點),存在legend時生效
 59         itemStyle: {
 60             normal: {
 61                 // color: 各異,
 62                 borderColor: '#fff',
 63                 borderWidth: 1,
 64                 areaStyle: {
 65                     color: '#ccc'//rgba(135,206,250,0.8)
 66                 },
 67                 label: {
 68                     show: false,
 69                     textStyle: {
 70                         color: 'rgba(139,69,19,1)'
 71                     }
 72                 }
 73             },
 74             emphasis: {                 // 也是選中樣式
 75                 // color: 各異,
 76                 borderColor: 'rgba(0,0,0,0)',
 77                 borderWidth: 1,
 78                 areaStyle: {
 79                     color: 'rgba(255,215,0,0.8)'
 80                 },
 81                 label: {
 82                     show: false,
 83                     textStyle: {
 84                         color: 'rgba(139,69,19,1)'
 85                     }
 86                 }
 87             }
 88         }
 89     },
 90 
 91     force : {
 92         // 數據map到圓的半徑的最小值和最大值
 93         minRadius : 10,
 94         maxRadius : 20,
 95         density : 1.0,
 96         attractiveness : 1.0,
 97         // 初始化的隨機大小位置
 98         initSize : 300,
 99         // 向心力因子,越大向心力越大
100         centripetal : 1,
101         // 冷卻因子
102         coolDown : 0.99,
103         // 分類里如果有樣式會覆蓋節點默認樣式
104         itemStyle: {
105             normal: {
106                 // color: 各異,
107                 label: {
108                     show: false
109                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
110                 },
111                 nodeStyle : {
112                     brushType : 'both',
113                     color : '#f08c2e',
114                     strokeColor : '#5182ab'
115                 },
116                 linkStyle : {
117                     strokeColor : '#5182ab'
118                 }
119             },
120             emphasis: {
121                 // color: 各異,
122                 label: {
123                     show: false
124                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
125                 },
126                 nodeStyle : {},
127                 linkStyle : {}
128             }
129         }
130     },
131 
132     chord : {
133         radius : ['65%', '75%'],
134         center : ['50%', '50%'],
135         padding : 2,
136         sort : 'none', // can be 'none', 'ascending', 'descending'
137         sortSub : 'none', // can be 'none', 'ascending', 'descending'
138         startAngle : 90,
139         clockWise : false,
140         showScale : false,
141         showScaleText : false,
142         itemStyle : {
143             normal : {
144                 label : {
145                     show : true
146                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
147                 },
148                 lineStyle : {
149                     width : 0,
150                     color : '#000'
151                 },
152                 chordStyle : {
153                     lineStyle : {
154                         width : 1,
155                         color : '#666'
156                     }
157                 }
158             },
159             emphasis : {
160                 lineStyle : {
161                     width : 0,
162                     color : '#000'
163                 },
164                 chordStyle : {
165                     lineStyle : {
166                         width : 2,
167                         color : '#333'
168                     }
169                 }
170             }
171         }
172     },
173 
174     island: {
175         r: 15,
176         calculateStep: 0.1  // 滾輪可計算步長 0.1 = 10%
177     },
178 
179     markPoint : {
180         symbol: 'pin',         // 標注類型
181         symbolSize: 10,        // 標注大小,半寬(半徑)參數,當圖形為方向或菱形則總寬度為symbolSize * 2
182         //symbolRotate : null, // 標注旋轉控制
183         itemStyle: {
184             normal: {
185                 // color: 各異,
186                 // borderColor: 各異,     // 標注邊線顏色,優先於color 
187                 borderWidth: 2,            // 標注邊線線寬,單位px,默認為1
188                 label: {
189                     show: true,
190                     position: 'inside' // 可選為'left'|'right'|'top'|'bottom'
191                     // textStyle: null      // 默認使用全局文本樣式,詳見TEXTSTYLE
192                 }
193             },
194             emphasis: {
195                 // color: 各異
196                 label: {
197                     show: true
198                     // position: 'inside'  // 'left'|'right'|'top'|'bottom'
199                     // textStyle: null     // 默認使用全局文本樣式,詳見TEXTSTYLE
200                 }
201             }
202         }
203     },
204 
205     markLine : {
206         // 標線起始和結束的symbol介紹類型,如果都一樣,可以直接傳string
207         symbol: ['circle', 'arrow'],  
208         // 標線起始和結束的symbol大小,半寬(半徑)參數,當圖形為方向或菱形則總寬度為symbolSize * 2
209         symbolSize: [2, 4],
210         // 標線起始和結束的symbol旋轉控制
211         //symbolRotate : null,
212         itemStyle: {
213             normal: {
214                 // color: 各異,           // 標線主色,線色,symbol主色
215                 // borderColor: 隨color,     // 標線symbol邊框顏色,優先於color 
216                 borderWidth: 2,          // 標線symbol邊框線寬,單位px,默認為2
217                 label: {
218                     show: false,
219                     // 可選為 'start'|'end'|'left'|'right'|'top'|'bottom'
220                     position: 'inside',  
221                     textStyle: {         // 默認使用全局文本樣式,詳見TEXTSTYLE
222                         color: '#333'
223                     }
224                 },
225                 lineStyle: {
226                     // color: 隨borderColor, // 主色,線色,優先級高於borderColor和color
227                     // width: 隨borderWidth, // 優先於borderWidth
228                     type: 'solid',
229                     shadowColor : 'rgba(0,0,0,0)', //默認透明
230                     shadowBlur: 5,
231                     shadowOffsetX: 3,
232                     shadowOffsetY: 3
233                 }
234             },
235             emphasis: {
236                 // color: 各異
237                 label: {
238                     show: false
239                     // position: 'inside' // 'left'|'right'|'top'|'bottom'
240                     // textStyle: null    // 默認使用全局文本樣式,詳見TEXTSTYLE
241                 },
242                 lineStyle : {}
243             }
244         }
245     },
246 
247     textStyle: {
248         decoration: 'none',
249         fontFamily: 'Arial, Verdana, sans-serif',
250         fontFamily2: '微軟雅黑',    // IE8- 字體模糊並且不支持不同字體混排,額外指定一份
251         fontSize: 12,
252         fontStyle: 'normal',
253         fontWeight: 'normal'
254     },
復制代碼

15、默認標志圖形類型列表

1  symbolList : [
2       'circle', 'rectangle', 'triangle', 'diamond',
3       'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
4     ],

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

復制代碼
 1  calculable: false,              // 默認關閉可計算特性
 2     calculableColor: 'rgba(255,165,0,0.6)',       // 拖拽提示邊框顏色
 3     calculableHolderColor: '#ccc', // 可計算占位提示顏色
 4     nameConnector: ' & ',
 5     valueConnector: ' : ',
 6     animation: true,
 7     animationThreshold: 2500,       // 動畫元素閥值,產生的圖形原素超過2500不出動畫
 8     addDataAnimation: true,         // 動態數據接口是否開啟動畫效果
 9     animationDuration: 2000,
10     animationEasing: 'ExponentialOut'    //BounceOut

轉自【http://www.cnblogs.com/1996zy/archive/2018/04/27/8963385.html】


免責聲明!

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



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