• echarts主题定制API


    以下为echarts2的主题定制API,部分效果在echarts3上仍旧可以使用

      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                  2,
    137                 type: 'solid'
    138             },
    139             shadowStyle : {                       // 阴影指示器样式设置
    140                  '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         //  {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         //  {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                  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                  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                  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                  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                  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                  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                  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                      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                      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                      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                          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                          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                     //  随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 }
    View Code
  • 相关阅读:
    css换行
    <a>标签里的<img>标签点击虚线框
    iframe子页面调用父页面元素
    快捷键
    用css绘制三角形
    解决div被embed,object覆盖问题
    一些兼容问题
    兼容padding
    记一次用html2canvas将页面内容生成海报并保存图片到本地
    PUPPETEER安装遇到 ERROR:CHROMIUM REVISION IS NOT DOWNLOADED.的解决办法
  • 原文地址:https://www.cnblogs.com/ShineaSYR/p/7754010.html
Copyright © 2020-2023  润新知