1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912
| option = {
//标题 title: { show: "true", //是否显示标题,默认显示,可以不设置 text: "echarts实例", //图表标题文本内容 link: "http://echarts.baidu.com/", //点击标题内容要跳转的链接 target: "blank", //跳转链接打开方式,blank是新窗口打开,self是自身窗口打开,跟a标签一样 textStyle: { //标题内容的样式 color: '#e4393c', //京东红 fontStyle: 'normal', //主标题文字字体风格,默认normal,有italic(斜体),oblique(斜体) fontWeight: "lighter", //可选normal(正常),bold(加粗),bolder(加粗),lighter(变细),100|200|300|400|500... fontFamily: "san-serif", //主题文字字体,默认微软雅黑 fontSize: 18 //主题文字字体大小,默认为18px }, textAlign: 'left', //标题文本水平对齐方式,建议不要设置,就让他默认,想居中显示的话,建议往下看 textBaseline: "top", //默认就好,垂直对齐方式,不要设置 subtext: "树懒课堂", //主标题的副标题文本内容,如果需要副标题就配置这一项 sublink: "http://blog.csdn.net/zhaoxiang66", //点击副标题内容要跳转的链接 subtarget: "blank", //同主标题,blank是新窗口打开,self是自身窗口打开 subtextStyle: { //副标题内容的样式 color: 'black', //黑色 fontStyle: 'normal', //主标题文字字体风格,默认normal,有italic(斜体),oblique(斜体) fontWeight: "lighter", //可选normal(正常),bold(加粗),bolder(加粗),lighter(变细),100|200|300|400|500... fontFamily: "san-serif", //主题文字字体,默认微软雅黑 fontSize: 12 //主题文字字体大小,默认为12px }, padding: 5, //各个方向的内边距,默认是5,可以自行设置 itemGap: 10, //主标题和副标题之间的距离,可自行设置 left: "center", //left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。 top: "center", //left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。 right: "auto", //right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。 bottom: "auto", //bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。 //left设置center标题会自动水平居中 //top设置center标题会自动垂直居中 backgroundColor: "#ccc", //标题背景色,默认透明,颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)' ,如果想要加上 alpha 通道,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc' borderColor: "red", //标题的边框颜色,颜色格式支持同backgroundColor borderWidth: 2, //标题边框线宽,默认为0,可自行设置 shadowBlur: 10, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 shadowColor: "black", shadowOffsetX: 0, shadowOffsetY: 0, },
//提示框组件 tooltip = { trigger: 'item', //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 triggerOn: "mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发 showContent: true, //是否显示提示框浮层 alwaysShowContent: true, //是否永远显示提示框内容 showDelay: 0, //浮层显示的延迟,单位为 ms hideDelay: 100, //浮层隐藏的延迟,单位为 ms enterable: false, //鼠标是否可进入提示框浮层中 confine: false, //是否将 tooltip 框限制在图表的区域内 transitionDuration: 0.4, //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动 position: ['50%', '50%'], //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数,inside鼠标所在图形的内部中心位置,top、left、bottom、right鼠标所在图形上侧,左侧,下侧,右侧, formatter: "{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器,支持字符串模板和回调函数两种形式,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等 backgroundColor: "transparent", //标题背景色 borderColor: "#ccc", //边框颜色 borderWidth: 0, //边框线宽 padding: 5, //图例内边距,单位px 5 [5, 10] [5,10,5,10] textStyle: mytextStyle, //文本样式 },
//代码注释 legend = { show: true, //是否显示 zlevel: 0, //所属图形的Canvas分层,zlevel大的Canvas会放在zlevel小的Canvas的上面 z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖 left: "center", //组件离容器左侧的距离,'left','center','right','20%' top: "top", //组件离容器上侧的距离,'top','middle','bottom','20%' right: "auto", //组件离容器右侧的距离,'20%' bottom: "auto", //组件离容器下侧的距离,'20%' width: "auto", //图例宽度 height: "auto", //图例高度 orient: "horizontal", //图例排列方向 align: "auto", //图例标记和文本的对齐,left,right padding: 5, //图例内边距,单位px 5 [5, 10] [5,10,5,10] itemGap: 10, //图例每项之间的间隔 itemWidth: 25, //图例标记的图形宽度 itemHeight: 14, //图例标记的图形高度 formatter: function (name) { //用来格式化图例文本,支持字符串模板和回调函数两种形式。模板变量为图例名称 {name} return 'Legend ' + name; }, selectedMode: "single", //图例选择的模式,true开启,false关闭,single单选,multiple多选 inactiveColor: "#ccc", //图例关闭时的颜色 textStyle: mytextStyle, //文本样式 data: ['类别1', '类别2', '类别3'], //series中根据名称区分 backgroundColor: "transparent", //标题背景色 borderColor: "#ccc", //边框颜色 borderWidth: 0, //边框线宽 shadowColor: "red", //阴影颜色 shadowOffsetX: 0, //阴影水平方向上的偏移距离 shadowOffsetY: 0, //阴影垂直方向上的偏移距离 shadowBlur: 10, //阴影的模糊大小 },
//工具栏组件 toolbox = { show: true, //是否显示工具栏组件 orient: "horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical' itemSize: 15, //工具栏 icon 的大小 itemGap: 10, //工具栏 icon 每项之间的间隔 showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题 feature: { mark: { // '辅助线开关' show: true }, dataView: { //数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新 show: true, //是否显示该工具。 title: "数据视图", readOnly: false, //是否不可编辑(只读) lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术,默认是['数据视图', '关闭', '刷新'] backgroundColor: "#fff", //数据视图浮层背景色。 textareaColor: "#fff", //数据视图浮层文本输入区背景色 textareaBorderColor: "#333", //数据视图浮层文本输入区边框颜色 textColor: "#000", //文本颜色。 buttonColor: "#c23531", //按钮颜色。 buttonTextColor: "#fff", //按钮文本颜色。 }, magicType: { //动态类型切换 show: true, title: "切换", //各个类型的标题文本,可以分别配置。 type: ['line', 'bar'], //启用的动态类型,包括'line'(切换为折线图), 'bar'(切换为柱状图), 'stack'(切换为堆叠模式), 'tiled'(切换为平铺模式) }, restore: { //配置项还原。 show: true, //是否显示该工具。 title: "还原", }, saveAsImage: { //保存为图片。 show: true, //是否显示该工具。 type: "png", //保存的图片格式。支持 'png' 和 'jpeg'。 name: "pic1", //保存的文件名称,默认使用 title.text 作为名称 backgroundColor: "#ffffff", //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色 title: "保存为图片", pixelRatio: 1 //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2 }, dataZoom: { //数据区域缩放。目前只支持直角坐标系的缩放 show: true, //是否显示该工具。 title: "缩放", //缩放和还原的标题文本 xAxisIndex: 0, //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴 yAxisIndex: false, //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴 }, }, zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖 left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%' top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' right: "auto", //组件离容器右侧的距离,'20%' bottom: "auto", //组件离容器下侧的距离,'20%' width: "auto", //图例宽度 height: "auto", //图例高度 },
//区域缩放 dataZoom = [{ id: 'dataZoomX', show: true, //是否显示组件。如果设置为false,不会显示,但是数据过滤的功能还存在。 backgroundColor: "rgba(47,69,84,0)", //组件的背景颜色 type: 'slider', //slider表示有滑动块的,inside表示内置的 dataBackground: { //数据阴影的样式。 lineStyle: mylineStyle, //阴影的线条样式 areaStyle: myareaStyle, //阴影的填充样式 }, fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。 borderColor: "#ddd", //边框颜色。 filterMode: 'filter', //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。 //'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。 //'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。 //'none': 不过滤数据,只改变数轴范围。 xAxisIndex: 0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 yAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 radiusAxisIndex: 3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 angleAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 start: 30, //数据窗口范围的起始百分比,表示30% end: 70, //数据窗口范围的结束百分比,表示70% startValue: 10, //数据窗口范围的起始数值 endValue: 100, //数据窗口范围的结束数值。 orient: "horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。 zoomLock: false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。 throttle: 100, //设置触发视图刷新的频率。单位为毫秒(ms)。 zoomOnMouseWheel: true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。 moveOnMouseMove: true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。 left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%' top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' right: "auto", //组件离容器右侧的距离,'20%' bottom: "auto", //组件离容器下侧的距离,'20%' }, { id: 'dataZoomY', type: 'inside', filterMode: 'empty', disabled: false, //是否停止组件的功能。 xAxisIndex: 0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 yAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 radiusAxisIndex: 3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 angleAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 start: 30, //数据窗口范围的起始百分比,表示30% end: 70, //数据窗口范围的结束百分比,表示70% startValue: 10, //数据窗口范围的起始数值 endValue: 100, //数据窗口范围的结束数值。 orient: "horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。 zoomLock: false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。 throttle: 100, //设置触发视图刷新的频率。单位为毫秒(ms)。 zoomOnMouseWheel: true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。 moveOnMouseMove: true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。 } ],
//视觉映射组件 visualMap = [//视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素。视觉元素可以是:symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物(如文字标签)的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。 { show: true, //是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在 type: 'continuous', // 定义为连续型 viusalMap min: 10, //指定 visualMapContinuous 组件的允许的最小值 max: 100, //指定 visualMapContinuous 组件的允许的最大值 range: [15, 40], //指定手柄对应数值的位置。range 应在 min max 范围内 calculable: true, //是否显示拖拽用的手柄(手柄能拖拽调整选中范围) realtime: true, //拖拽时,是否实时更新 inverse: false, //是否反转 visualMap 组件 precision: 0, //数据展示的小数精度,默认为0,无小数点 itemWidth: 20, //图形的宽度,即长条的宽度。 itemHeight: 140, //图形的高度,即长条的高度。 align: "auto", //指定组件中手柄和文字的摆放位置.可选值为:'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。 text: ['High', 'Low'], //两端的文本 textGap: 10, //两端文字主体之间的距离,单位为px dimension: 2, //指定用数据的『哪个维度』,映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度 seriesIndex: 1, //指定取哪个系列的数据,即哪个系列的 series.data,默认取所有系列 hoverLink: true, //鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮 inRange: { //定义 在选中范围中 的视觉元素 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100] }, outOfRange: { //定义 在选中范围外 的视觉元素。 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100] }, zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖 left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%' top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' right: "auto", //组件离容器右侧的距离,'20%' bottom: "auto", //组件离容器下侧的距离,'20%' orient: "vertical", //图例排列方向 padding: 5, //图例内边距,单位px 5 [5, 10] [5,10,5,10] backgroundColor: "transparent", //标题背景色 borderColor: "#ccc", //边框颜色 borderWidth: 0, //边框线宽 textStyle: mytextStyle, //文本样式 formatter: function (value) { //标签的格式化工具。 return 'aaaa' + value; // 范围标签显示内容。 } }, { show: true, //是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在 type: 'piecewise', // 定义为分段型 visualMap splitNumber: 5, //对于连续型数据,自动平均切分成几段。默认为5段 pieces: [//自定义『分段式视觉映射组件(visualMapPiecewise)』的每一段的范围,以及每一段的文字,以及每一段的特别的样式 { min: 1500 }, // 不指定 max,表示 max 为无限大(Infinity)。 { min: 900, max: 1500 }, { min: 310, max: 1000 }, { min: 200, max: 300 }, { min: 10, max: 200, label: '10 到 200(自定义label)' }, { value: 123, label: '123(自定义特殊颜色)', color: 'grey' }, // 表示 value 等于 123 的情况。
{ max: 5 } // 不指定 min,表示 min 为无限大(-Infinity)。 ], categories: ['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'], //用于表示离散型数据(或可以称为类别型数据、枚举型数据)的全集 min: 10, //指定 visualMapContinuous 组件的允许的最小值 max: 100, //指定 visualMapContinuous 组件的允许的最大值 minOpen: true, //界面上会额外多出一个『< min』的选块 maxOpen: true, //界面上会额外多出一个『> max』的选块。 selectedMode: "multiple", //选择模式,可以是:'multiple'(多选)。'single'(单选)。 inverse: false, //是否反转 visualMap 组件 precision: 0, //数据展示的小数精度,默认为0,无小数点 itemWidth: 20, //图形的宽度,即长条的宽度。 itemHeight: 140, //图形的高度,即长条的高度。 align: "auto", //指定组件中手柄和文字的摆放位置.可选值为:'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。 text: ['High', 'Low'], //两端的文本 textGap: 10, //两端文字主体之间的距离,单位为px showLabel: true, //是否显示每项的文本标签 itemGap: 10, //每两个图元之间的间隔距离,单位为px itemSymbol: "roundRect", //默认的图形。可选值为: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' dimension: 2, //指定用数据的『哪个维度』,映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度 seriesIndex: 1, //指定取哪个系列的数据,即哪个系列的 series.data,默认取所有系列 hoverLink: true, //鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮 inRange: { //定义 在选中范围中 的视觉元素 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100] }, outOfRange: { //定义 在选中范围外 的视觉元素。 color: ['#121122', 'rgba(3,4,5,0.4)', 'red'], symbolSize: [30, 100] }, zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖 left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%' top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' right: "auto", //组件离容器右侧的距离,'20%' bottom: "auto", //组件离容器下侧的距离,'20%' orient: "vertical", //图例排列方向 padding: 5, //图例内边距,单位px 5 [5, 10] [5,10,5,10] backgroundColor: "transparent", //标题背景色 borderColor: "#ccc", //边框颜色 borderWidth: 0, //边框线宽 textStyle: mytextStyle, //文本样式 formatter: function (value) { //标签的格式化工具。 return 'aaaa' + value; // 范围标签显示内容。 } } ],
// 值域 dataRange: { orient: 'vertical', // 布局方式,默认为垂直布局,可选为: // 'horizontal' ?? 'vertical' x: 'left', // 水平安放位置,默认为全图左对齐,可选为: // 'center' ?? 'left' ?? 'right' // ?? {number}(x坐标,单位px) y: 'bottom', // 垂直安放位置,默认为全图底部,可选为: // 'top' ?? 'bottom' ?? 'center' // ?? {number}(y坐标,单位px) backgroundColor: 'rgba(0,0,0,0)', borderColor: '#ccc', // 值域边框颜色 borderWidth: 0, // 值域边框线宽,单位px,默认为0(无边框) padding: 5, // 值域内边距,单位px,默认各方向内边距为5, // 接受数组分别设定上右下左边距,同css itemGap: 10, // 各个item之间的间隔,单位px,默认为10, // 横向布局时为水平间隔,纵向布局时为纵向间隔 itemWidth: 20, // 值域图形宽度,线性渐变水平布局宽度为该值 * 10 itemHeight: 14, // 值域图形高度,线性渐变垂直布局高度为该值 * 10 splitNumber: 5, // 分割段数,默认为5,为0时为线性渐变 color: ['#1e90ff', '#f0ffff'], //颜色 //text:['高','低'], // 文本,默认为数值文本 textStyle: { color: '#333' // 值域文字颜色 } },
// 网格 grid: { x: 80, y: 60, x2: 80, y2: 60, // width: {totalWidth} - x - x2, // height: {totalHeight} - y - y2, backgroundColor: 'rgba(0,0,0,0)', borderWidth: 1, borderColor: '#ccc' },
textStyle: { decoration: 'none', fontFamily: 'Arial, Verdana, sans-serif', fontFamily2: '微软雅黑', // IE8- 字体模糊并且不支持不同字体混排,额外指定一份 fontSize: 12, fontStyle: 'normal', fontWeight: 'normal' },
// 类目轴 categoryAxis: { position: 'bottom', // 位置 nameLocation: 'end', // 坐标轴名字位置,支持'start' | 'end' boundaryGap: true, // 类目起始和结束两端空白策略 axisLine: { // 坐标轴线 show: true, // 默认显示,属性show控制显示与否 lineStyle: { // 属性lineStyle控制线条样式 color: '#48b', width: 2, type: 'solid' } }, axisTick: { // 坐标轴小标记 show: true, // 属性show控制显示与否,默认不显示 interval: 'auto', // onGap: null, inside: false, // 控制小标记是否在grid里 length: 5, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: '#333', width: 1 } }, axisLabel: { // 坐标轴文本标签,详见axis.axisLabel show: true, interval: 'auto', rotate: 0, margin: 8, // formatter: null, textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: '#333' } }, splitLine: { // 分隔线 show: true, // 默认显示,属性show控制显示与否 // onGap: null, lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 color: ['#ccc'], width: 1, type: 'solid' } }, splitArea: { // 分隔区域 show: false, // 默认不显示,属性show控制显示与否 // onGap: null, areaStyle: { // 属性areaStyle(详见areaStyle)控制区域样式 color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] } } },
// 数值型坐标轴默认参数 valueAxis: { position: 'left', // 位置 nameLocation: 'end', // 坐标轴名字位置,支持'start' | 'end' nameTextStyle: {}, // 坐标轴文字样式,默认取全局样式 boundaryGap: [0, 0], // 数值起始和结束两端空白策略 splitNumber: 5, // 分割段数,默认为5 axisLine: { // 坐标轴线 show: true, // 默认显示,属性show控制显示与否 lineStyle: { // 属性lineStyle控制线条样式 color: '#48b', width: 2, type: 'solid' } }, axisTick: { // 坐标轴小标记 show: false, // 属性show控制显示与否,默认不显示 inside: false, // 控制小标记是否在grid里 length: 5, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: '#333', width: 1 } }, axisLabel: { // 坐标轴文本标签,详见axis.axisLabel show: true, rotate: 0, margin: 8, // formatter: null, textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: '#333' } }, splitLine: { // 分隔线 show: true, // 默认显示,属性show控制显示与否 lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 color: ['#ccc'], width: 1, type: 'solid' } }, splitArea: { // 分隔区域 show: false, // 默认不显示,属性show控制显示与否 areaStyle: { // 属性areaStyle(详见areaStyle)控制区域样式 color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] } } },
polar: { center: ['50%', '50%'], // 默认全局居中 radius: '75%', startAngle: 90, splitNumber: 5, name: { show: true, textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: '#333' } }, axisLine: { // 坐标轴线 show: true, // 默认显示,属性show控制显示与否 lineStyle: { // 属性lineStyle控制线条样式 color: '#ccc', width: 1, type: 'solid' } }, axisLabel: { // 坐标轴文本标签,详见axis.axisLabel show: false, textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: '#333' } }, splitArea: { show: true, areaStyle: { color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] } }, splitLine: { show: true, lineStyle: { width: 1, color: '#ccc' } } },
// 柱形图默认参数 bar: { barMinHeight: 0, // 最小高度改为0 // barWidth: null, // 默认自适应 barGap: '30%', // 柱间距离,默认为柱形宽度的30%,可设固定值 barCategoryGap: '20%', // 类目间柱形距离,默认为类目间距的20%,可设固定值 itemStyle: { normal: { // color: '各异', barBorderColor: '#fff', // 柱条边线 barBorderRadius: 0, // 柱条边线圆角,单位px,默认为0 barBorderWidth: 1, // 柱条边线线宽,单位px,默认为1 label: { show: false // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为 // 'inside'|'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE } }, emphasis: { // color: '各异', barBorderColor: 'rgba(0,0,0,0)', // 柱条边线 barBorderRadius: 0, // 柱条边线圆角,单位px,默认为0 barBorderWidth: 1, // 柱条边线线宽,单位px,默认为1 label: { show: false // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为 // 'inside'|'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE } } } },
// 折线图默认参数 line: { itemStyle: { normal: { // color: 各异, label: { show: false // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为 // 'inside'|'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, lineStyle: { width: 2, type: 'solid', shadowColor: 'rgba(0,0,0,0)', //默认透明 shadowBlur: 5, shadowOffsetX: 3, shadowOffsetY: 3 } }, emphasis: { // color: 各异, label: { show: false // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为 // 'inside'|'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE } } }, //smooth : false, //symbol: null, // 拐点图形类型 symbolSize: 2, // 拐点图形大小 //symbolRotate : null, // 拐点图形旋转控制 showAllSymbol: false // 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略) },
// K线图默认参数 k: { // barWidth : null // 默认自适应 // barMaxWidth : null // 默认自适应 itemStyle: { normal: { color: '#fff', // 阳线填充颜色 color0: '#00aa11', // 阴线填充颜色 lineStyle: { width: 1, color: '#ff3200', // 阳线边框颜色 color0: '#00aa11' // 阴线边框颜色 } }, emphasis: { // color: 各异, // color0: 各异 } } },
// 散点图默认参数 scatter: { //symbol: null, // 图形类型 symbolSize: 4, // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2 //symbolRotate : null, // 图形旋转控制 large: false, // 大规模散点图 largeThreshold: 2000, // 大规模阀值,large为true且数据量>largeThreshold才启用大规模模式 itemStyle: { normal: { // color: 各异, label: { show: false // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为 // 'inside'|'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE } }, emphasis: { // color: '各异' label: { show: false // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为 // 'inside'|'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE } } } },
// 雷达图默认参数 radar: { itemStyle: { normal: { // color: 各异, label: { show: false }, lineStyle: { width: 2, type: 'solid' } }, emphasis: { // color: 各异, label: { show: false } } }, //symbol: null, // 拐点图形类型 symbolSize: 2 // 可计算特性参数,空数据拖拽提示图形大小 //symbolRotate : null, // 图形旋转控制 },
// 饼图默认参数 pie: { center: ['50%', '50%'], // 默认全局居中 radius: [0, '75%'], clockWise: false, // 默认逆时针 startAngle: 90, minAngle: 0, // 最小角度改为0 selectedOffset: 10, // 选中是扇区偏移量 itemStyle: { normal: { // color: 各异, borderColor: '#fff', borderWidth: 1, label: { show: true, position: 'outer' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, labelLine: { show: true, length: 20, lineStyle: { // color: 各异, width: 1, type: 'solid' } } }, emphasis: { // color: 各异, borderColor: 'rgba(0,0,0,0)', borderWidth: 1, label: { show: false // position: 'outer' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, labelLine: { show: false, length: 20, lineStyle: { // color: 各异, width: 1, type: 'solid' } } } } },
map: { mapType: 'china', // 各省的mapType暂时都用中文 mapLocation: { x: 'center', y: 'center' // width // 自适应 // height // 自适应 }, showLegendSymbol: true, // 显示图例颜色标识(系列标识的小圆点),存在legend时生效 itemStyle: { normal: { // color: 各异, borderColor: '#fff', borderWidth: 1, areaStyle: { color: '#ccc' //rgba(135,206,250,0.8) }, label: { show: false, textStyle: { color: 'rgba(139,69,19,1)' } } }, emphasis: { // 也是选中样式 // color: 各异, borderColor: 'rgba(0,0,0,0)', borderWidth: 1, areaStyle: { color: 'rgba(255,215,0,0.8)' }, label: { show: false, textStyle: { color: 'rgba(139,69,19,1)' } } } } },
force: { // 数据map到圆的半径的最小值和最大值 minRadius: 10, maxRadius: 20, density: 1.0, attractiveness: 1.0, // 初始化的随机大小位置 initSize: 300, // 向心力因子,越大向心力越大 centripetal: 1, // 冷却因子 coolDown: 0.99, // 分类里如果有样式会覆盖节点默认样式 itemStyle: { normal: { // color: 各异, label: { show: false // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, nodeStyle: { brushType: 'both', color: '#f08c2e', strokeColor: '#5182ab' }, linkStyle: { strokeColor: '#5182ab' } }, emphasis: { // color: 各异, label: { show: false // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, nodeStyle: {}, linkStyle: {} } } },
chord: { radius: ['65%', '75%'], center: ['50%', '50%'], padding: 2, sort: 'none', // can be 'none', 'ascending', 'descending' sortSub: 'none', // can be 'none', 'ascending', 'descending' startAngle: 90, clockWise: false, showScale: false, showScaleText: false, itemStyle: { normal: { label: { show: true // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, lineStyle: { width: 0, color: '#000' }, chordStyle: { lineStyle: { width: 1, color: '#666' } } }, emphasis: { lineStyle: { width: 0, color: '#000' }, chordStyle: { lineStyle: { width: 2, color: '#333' } } } } },
island: { r: 15, calculateStep: 0.1 // 滚轮可计算步长 0.1 = 10% },
markPoint: { symbol: 'pin', // 标注类型 symbolSize: 10, // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2 //symbolRotate : null, // 标注旋转控制 itemStyle: { normal: { // color: 各异, // borderColor: 各异, // 标注边线颜色,优先于color borderWidth: 2, // 标注边线线宽,单位px,默认为1 label: { show: true, position: 'inside' // 可选为'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE } }, emphasis: { // color: 各异 label: { show: true // position: 'inside' // 'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE } } } },
markLine: { // 标线起始和结束的symbol介绍类型,如果都一样,可以直接传string symbol: ['circle', 'arrow'], // 标线起始和结束的symbol大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2 symbolSize: [2, 4], // 标线起始和结束的symbol旋转控制 //symbolRotate : null, itemStyle: { normal: { // color: 各异, // 标线主色,线色,symbol主色 // borderColor: 随color, // 标线symbol边框颜色,优先于color borderWidth: 2, // 标线symbol边框线宽,单位px,默认为2 label: { show: false, // 可选为 'start'|'end'|'left'|'right'|'top'|'bottom' position: 'inside', textStyle: { // 默认使用全局文本样式,详见TEXTSTYLE color: '#333' } }, lineStyle: { // color: 随borderColor, // 主色,线色,优先级高于borderColor和color // width: 随borderWidth, // 优先于borderWidth type: 'solid', shadowColor: 'rgba(0,0,0,0)', //默认透明 shadowBlur: 5, shadowOffsetX: 3, shadowOffsetY: 3 } }, emphasis: { // color: 各异 label: { show: false // position: 'inside' // 'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, lineStyle: {} } } }, };
|