宣告
1）該文章整理自網上的大牛和專家無私奉獻的資料，具體參考的資料請看參考文獻，
2）本文僅供學術交流，非商用，如果某部分不小心侵犯了大家的利益，還望海涵，并聯系博主洗掉，
3）博主才疏學淺，文中如有不當之處，請各位指出，共同進步，謝謝，
4）此屬于第一版本，若有錯誤，還需繼續修正與增刪，還望大家多多指點，大家都共享一點點，一起為祖國科研的推進添磚加瓦，
HTML背景縮放同步
1 解決HTML背景縮放有空白或者不一致的現象 2 height: 100%; 3 } 4 body{ 5 padding: 0; 6 margin: 0; 7 background: url("images/bg.png") no-repeat; 8 background-size: 100% 100%; 9 position: absolute; 10 }
Echars相關圖表控制元件屬性
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://www.uj5u.com/qiye/43719.html
標籤：JavaScript
上一篇：簡單的零配置命令列 http 服務器--http-server入門
下一篇：React如何修改默認埠號