声明
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 };