ecahrts柱形图、折线图、饼图、散点图、雷达图、K线图默认参数详解

浅浅的花香味﹌ 2021-12-15 01:53 579阅读 0赞

#### 1、柱形图默认参数 ####

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
                    }
                }
            }
        },

#### 2、折线图默认参数 ####

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    // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
        },

#### 3、饼图默认参数 ####

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 : { }
                }
            }
        },
    
        textStyle: { 
            decoration: 'none',
            fontFamily: 'Arial, Verdana, sans-serif',
            fontFamily2: '微软雅黑',    // IE8- 字体模糊并且不支持不同字体混排，额外指定一份
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal'
        },

#### 4、散点图默认参数 ####

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
                    }
                }
            }
        },

#### 5、雷达图默认参数 ####

radar : { 
            itemStyle: { 
                normal: { 
                    // color: 各异,
                    label: { 
                        show: false
                    },
                    lineStyle: { 
                        width: 2,
                        type: 'solid'
                    }
                },
                emphasis: { 
                    // color: 各异,
                    label: { 
                        show: false
                    }
                }
            },
            //symbol: null, // 拐点图形类型
            symbolSize: 2           // 可计算特性参数，空数据拖拽提示图形大小
            //symbolRotate : null, // 图形旋转控制
        },

#### 6、K线图默认参数 ####

k: { 
            // barWidth : null // 默认自适应
            // barMaxWidth : null // 默认自适应 
            itemStyle: { 
                normal: { 
                    color: '#fff',          // 阳线填充颜色
                    color0: '#00aa11',      // 阴线填充颜色
                    lineStyle: { 
                        width: 1,
                        color: '#ff3200',   // 阳线边框颜色
                        color0: '#00aa11'   // 阴线边框颜色
                    }
                },
                emphasis: { 
                    // color: 各异,
                    // color0: 各异
                }
            }
        },

#### 7、默认标志图形类型列表 ####

symbolList : [
           'circle', 'rectangle', 'triangle', 'diamond',
           'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
         ],

#### 8、可计算特性配置，孤岛，提示颜色 ####

calculable: false,              // 默认关闭可计算特性
        calculableColor: 'rgba(255,165,0,0.6)',       // 拖拽提示边框颜色
        calculableHolderColor: '#ccc', // 可计算占位提示颜色
        nameConnector: ' & ',
        valueConnector: ' : ',
        animation: true,
        animationThreshold: 2500,       // 动画元素阀值，产生的图形原素超过2500不出动画
        addDataAnimation: true,         // 动态数据接口是否开启动画效果
        animationDuration: 2000,
        animationEasing: 'ExponentialOut'    //BounceOut