Echarts中所有的配置属性

数据可视化-Echarts官网及社区整理 Echarts 阅读详情

Echarts中的配置属性

theme = {
// 全图默认背景 
// backgroundColor: ‘rgba(0,0,0,0)’,
 
// 默认色板
    color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
        '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
        '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
        '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],
 
// 图表标题
    title: {
        x: 'left',                 // 水平安放位置,默认为左对齐,可选为:
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}(x坐标,单位px)
        y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                                   // 'top' ¦ 'bottom' ¦ 'center'
                                   // ¦ {number}(y坐标,单位px)
        //textAlign: null          // 水平对齐方式,默认根据x设置自动调整
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc',       // 标题边框颜色
        borderWidth: 0,            // 标题边框线宽,单位px,默认为0(无边框)
        padding: 5,                // 标题内边距,单位px,默认各方向内边距为5,
                                   // 接受数组分别设定上右下左边距,同css
        itemGap: 10,               // 主副标题纵向间隔,单位px,默认为10,
        textStyle: {
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#333'          // 主标题文字颜色
        },
        subtextStyle: {
            color: '#aaa'          // 副标题文字颜色
        }
    },
 
// 图例
    legend: {
        orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
                                   // 'horizontal' ¦ 'vertical'
        x: 'center',               // 水平安放位置,默认为全图居中,可选为:
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}(x坐标,单位px)
        y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                                   // '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,             // 图例图形宽度
        itemHeight: 14,            // 图例图形高度
        textStyle: {
            color: '#333'          // 图例文字颜色
        }
    },
 
// 值域
    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'          // 值域文字颜色
        }
    },
 
    toolbox: {
        orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
                                   // 'horizontal' ¦ 'vertical'
        x: 'right',                // 水平安放位置,默认为全图右对齐,可选为:
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}(x坐标,单位px)
        y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                                   // 'top' ¦ 'bottom' ¦ 'center'
                                   // ¦ {number}(y坐标,单位px)
        color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
        backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
        borderColor: '#ccc',       // 工具箱边框颜色
        borderWidth: 0,            // 工具箱边框线宽,单位px,默认为0(无边框)
        padding: 5,                // 工具箱内边距,单位px,默认各方向内边距为5,
                                   // 接受数组分别设定上右下左边距,同css
        itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
                                   // 横向布局时为水平间隔,纵向布局时为纵向间隔
        itemSize: 16,              // 工具箱图形宽度
        featureImageIcon: {},     // 自定义图片icon
        featureTitle: {
            mark: '辅助线开关',
            markUndo: '删除辅助线',
            markClear: '清空辅助线',
            dataZoom: '区域缩放',
            dataZoomReset: '区域缩放后退',
            dataView: '数据视图',
            lineChart: '折线图切换',
            barChart: '柱形图切换',
            restore: '还原',
            saveAsImage: '保存为图片'
        }
    },
 
// 提示框
    tooltip: {
        trigger: 'item',           // 触发类型,默认数据触发,见下图,可选为:'item' ¦ 'axis'
        showDelay: 20,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
        hideDelay: 100,            // 隐藏延迟,单位ms
        transitionDuration: 0.4,  // 动画变换时间,单位s
        backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色,默认为透明度为0.7的黑色
        borderColor: '#333',       // 提示边框颜色
        borderRadius: 4,           // 提示边框圆角,单位px,默认为4
        borderWidth: 0,            // 提示边框线宽,单位px,默认为0(无边框)
        padding: 5,                // 提示内边距,单位px,默认各方向内边距为5,
                                   // 接受数组分别设定上右下左边距,同css
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: 'line',         // 默认为直线,可选为:'line' | 'shadow'
            lineStyle: {          // 直线指示器样式设置
                color: '#48b',
                width: 2,
                type: 'solid'
            },
            shadowStyle: {                       // 阴影指示器样式设置
                width: 'auto',                   // 阴影大小
                color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
        },
        textStyle: {
            color: '#fff'
        }
    },
 
// 区域缩放控制器
    dataZoom: {
        orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
                                   // 'horizontal' ¦ 'vertical'
        // x: {number},            // 水平安放位置,默认为根据grid参数适配,可选为:
        // {number}(x坐标,单位px)
        // y: {number},            // 垂直安放位置,默认为根据grid参数适配,可选为:
        // {number}(y坐标,单位px)
        // width: {number},        // 指定宽度,横向布局时默认为根据grid参数适配
        // height: {number},       // 指定高度,纵向布局时默认为根据grid参数适配
        backgroundColor: 'rgba(0,0,0,0)',       // 背景颜色
        dataBackgroundColor: '#eee',            // 数据背景颜色
        fillerColor: 'rgba(144,197,237,0.2)',   // 填充颜色
        handleColor: 'rgba(70,130,180,0.8)'     // 手柄颜色
    },
 
// 网格
    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'
    },
 
// 类目轴
    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: {}
            }
        }
    },
 
    textStyle: {
        decoration: 'none',
        fontFamily: 'Arial, Verdana, sans-serif',
        fontFamily2: '微软雅黑',    // IE8- 字体模糊并且不支持不同字体混排,额外指定一份
        fontSize: 12,
        fontStyle: 'normal',
        fontWeight: 'normal'
    },
 
// 默认标志图形类型列表
    symbolList: [
        'circle', 'rectangle', 'triangle', 'diamond',
        'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
    ],
    loadingText: 'Loading...',
// 可计算特性配置,孤岛,提示颜色
    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
};

**转载: **原创地址

echarts图表库的展示 ECharts 是一个强大的,使用 JavaScript 编写的开源数据可视化库,由百度开发和维护。它能够帮助开发者在网页上轻松创建出丰富、交互式的图表,广泛应用于各种数据展示场景,包括但不限于Web应用、仪表盘、业务报表等。ECharts的特点和功能包括但不限于以下几点:如折线图、柱状图、散点图、饼图、雷达图、热力图、漏斗图、仪表盘、地图、关系图、旭日图、平行坐标等,几乎涵盖了数据可视化领域的所有基本需求。ECharts擅长处理多维数据,能够将复杂的数据集以清晰直观的方式展现出来,非常适合进行深度数据分析 阅读详情

相关推荐

五分钟上手Echarts-官方文档

官方文档地址:5 分钟上手 ECharts 官网示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <!-- <script src="/static/js/jq...

寒泉 2万+

echarts官网的网址

http://echarts.apache.org/zh/index.html

I18545361622的博客 3万+

echarts 自带loading属性配置,echarts实例属性详解

echarts 自带loading属性配置,echarts实例属性详解

红烧咸咸鱼 3783

echarts属性的设置(完整大全)

// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff63...

weixin_38169886的博客 2343

Echarts option常用属性配置文档,网页前端开发

定义在选中范围中的视觉元素。color: 图元的颜色。min: 3, // 设置组件的允许的最小值max: 99, // 设置组件的允许的最大值calculable: true, // 设置手柄能拖拽realtime: true, // 拖拽时实时更新precision: 1, // 小数精度itemWidth: 20, // 图形宽度itemHeight: 150, // 图形高度inRange: { // 设置图元的颜色},

2301_76232361的博客 1461

体系结构学习-6-超标量处理器

 MIPS32-5段流水线采用了指令级并行方式(5个流水段同时运行5条指令)提升系统吞吐率,是一种标量处理器(CPI≥1CPI \ge 1CPI≥1),但是一个周期一条指令以及无法满足现代计算机需求了。 超标量处理器(Superscalar) 1、基本思想:增强指令集并行,让每个周期执行更多指令,实现 CPI<1CPI<1CPI<1 。(IPC=1/CPIIPC = 1...

qq_40891899的博客 1213

echarts中title的配置属性

echarts中title的配置属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <div id = "d1" style = "width: 400px;height:400px;"></div> <s

暴走的山交君的博客 1475

Figure 03人形机器人与Helix端到端控制系统:具身智能突破深度解析

2026年5月,Figure AI的Figure 03人形机器人在一场震撼业界的直播中完成了长达200小时的连续全自动作业,分拣近25万个包裹,零故障。这一里程碑式的成就标志着人形机器人正式从「实验室展示」迈入「规模化商用」阶段。本文深入剖析Figure 03的核心技术——Helix端到端神经网络控制系统,包括System 0/1/2三层架构、视觉运动策略、全身协同控制等关键技术,并提供完整的Python/Go代码示例,帮助开发者理解具身智能的核心原理与实现路径。关键词。

shao.bing的专栏 992

echarts 之常用的属性配置

目录echarts 之常用的属性配置饼形图相关柱状图相关折线图 echarts 之常用的属性配置 饼形图相关 series: [ { type: "pie", //类型 center: this.pieChartCenter,// 所处位置 radius: this.pieChartRadius, // 半径 minAngle: 5, avoidLab

weixin_47409897的博客 1160

新手DIY无人机,从电机到飞控,这份配件清单和避坑指南请收好

本文为无人机DIY新手提供从电机到飞控的完整配件清单和避坑指南。详细解析电机KV值选择、电调匹配、飞控系统调试等核心问题,帮助初学者避开常见雷区,顺利完成首飞。特别推荐FPV竞速机和航拍机的配件组合方案,并附赠实用调试命令和故障排查表。

weixin_27032989的博客 237

Delta机器人:运动学正反解分析

Delta机器人:运动学正反解分析 一、Delta机构简介 Delta机构是并联机构中的一种典型机构,起原始结构如图1所示。Delta机构由R.Clavel 博士在 1985年发明,是现在并联机器人中使用最多的一种,具备了并联机构所特有的优点,负载能力强、效率高、末端执行器精度高、运动惯性小,可以高速稳定运动等。因此在机器人领域获得了越来越广泛的应用。以实现高速、精准、高效的运动。           &n

花洛兮灬 3万+

VUE 使用echarts线图,常用配置属性介绍

VUE 使用echarts线图,常用属性介绍 文章就是介绍应该会用得上的属性设置。这里不是安装教学哈,安装教学出门左转! 介绍全在代码的备注中,请慢慢食用! methods: { myEcharts() { var that = this // 基于准备好的dom,初始化echarts实例 var myChart = this.$echarts.init(document.getElementById("main")); // 指定图表的配置项和数据

weixin_43857786的博客 997

AxMath行间公式转化为office公式求和符号以及编号显示问题

AxMath行间公式转化为office公式求和符号以及编号显示问题问题描述解决方法 问题描述 首先打出axmath公式,如下: 转换后的OfficeMath公式: 字体先不说,word公式字体默认cambria math且无法编辑。比较难受的一点是求和符号与后面的 ai+bi2a_i+b_i^2ai​+bi2​比例不匹配啊!正常的比例应该是: (虽然也不太正常,将就下) 解决方法 点击变换后的office公式右侧,选择更改为"显示" 可以看到,多了一些软回车符号(⬇),如果你想删除它,不要直接选中

weixin_43543177的博客 4649

echarts无数据的展示内容,用graphic属性配置

echarts无数据的展示内容,用graphic属性配置

牛先森家的博客 1780

VN1630A硬件配置指南:手把手教你用CanApe搭建XCP标定工程(附ELF文件配置技巧)

本文详细介绍了如何使用VN1630A硬件和CanApe软件搭建XCP标定工程,包括硬件配置、CanApe工程创建、ELF文件处理及XCP协议层配置等关键步骤。特别针对实际项目中常见的错误和细节问题提供解决方案,帮助工程师高效完成ECU参数标定工作。

git9versioner的博客 1156

YOLOv11改进前必看 - YAML模型配置文件详细解读(再也不用担心通道数不匹配) 附网络结构图

YOLOv11的模型配置文件在中,里面包含以及,本文以目标检测模型文件为例(其他文件完全一致),详细介绍一下YOLOv11模型文件中各参数的含义。

Limiiiing的博客 5309

echarts相关常用配置属性:

echarts相关常用配置属性: grid: { left: ‘1%’, //距离左边的边距 top: “10%”, //距离上部的边距 } //轴线相关的常用配置 xAxis: { type: ‘value’, show: false, //是否显示该轴 axisLine: { show: false //是否显示该轴线 }, splitLine: { show: false, //是否显示...

Wangyanan3351的博客 965

15、人工智能社会学:关系视角下的机器相遇

本文探讨了将人工智能视为社会主体的可能性,提出了一种关系视角下的人工智能社会学。通过结合卢西亚娜·帕里西、艾伦·图灵和乔治·赫伯特·米德的理论,强调不确定性在人工智能运行中的核心地位,并分析了人工智能如何通过与社会环境的互动催生新奇性,从而拓展社会学的研究范畴。文章还讨论了人工智能对社会结构和社会互动的影响,以及其作为社会主体所带来的理论和实践意义,为未来人工智能社会学的发展提供了方向。

pea55的博客 72

echarts 之饼形图配置属性

目录echarts 之配置属性饼形图 echarts 之配置属性 南丁格尔图 roseType: “radius”, 双层饼形图 饼形图 配置属性,也就是再 option 里面书写修改图形的样式 title : 是否显示组件的标题(一般用于显示标题,或者计算总数) tooltip:提示框,用于鼠标滑过的时候,显示当前想要显示的内容 formatter:一般用于处理文本的显示,可以玩出各种骚操作 legend:显示图例的说明 里面的left方位可以使用的是 位置(center) 和 百分比(5%

weixin_47409897的博客 2604

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Echarts之封装和全属性配置(属性大全有注释)

Echarts之封装和属性配置,几乎涵盖了常用的所有配置。包括tooltip、title、grid、xAxis、yAxis、series、dataZoom、legend等内容,纯纯干货!!!

m0_75013578的博客 908

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

echarts常用配置属性

// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700', '#6699FF','#ff6666','#3cb3.

HouYing 541

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

echarts部分配置属性

var myChart=echarts.init(document.getElementById('main')); //init初始化接口,返回ECharts实例,其中dom为图表所在节点 var option = { //标题 title : { show:true,//显示策略,默认值true,可选为:...

孤月水明 1396

Echarts常用属性配置

Echarts官网:https://echarts.apache.org/examples/zh/index.html 1.Y轴 // Y轴设置 yAxis: [{ type: 'value', // 轴类型 name: '访客数量', // 轴标题 minInterval: 1, // 设置Y轴数值最小间隔为1,防止有0.2小数出现 axisTick: { show: false //

qq_38969618的博客 505

Echarts option常用属性配置文档

Echarts option常用属性配置文档 成功绘制一个Echarts图表至少包含三部分:x轴xAxis、y轴yAxis、系列列表series。 option = { xAxis: { type: 'category', // x坐标轴类型 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 类目数据 }, yAxis: { type: 'value' // y坐

“跟他人学,和自己比” 6023
上一篇: Vue使用词云图
下一篇: Echart通用模板
KeepLearningDay
博客等级 码龄6年 18粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值