echarts各项配置

基于版本v4.x

前言

吐血整理。
Echarts的各种配置真的是眼花缭乱，第一次使用的时候，内心真的是崩溃啊，看到就害怕。最近开始搞项目了，面对一堆图表，更是无所适从，才萌生了整理echarts配置的想法。仅仅整理了常用的，后续如果有需求，会进行补充。

参考

Echarts官网

各项配置

title（包含主标题和副标题）

title: {
    
    target: 'blank',                // 指定窗口打开主标题超链接
                                    // 'self'当前窗口打开 
                                    // 'blank'新窗口打开[default]
    textStyle: {
                        // 主标题文字样式
        color: '#333',
        fontStyle: 'normal',        // 字体风格 
        fontWeight: normal,         // 粗细
        fontFamily: 'sans-serif',   // 字体
        fontSize: 18,
        lineHeight: 56,             // 行高
        textBorderColor: 'transparent',     // 文字本身的描边颜色
        textBorderWidth: 0,                 // 文字本身的描边宽度
        textShadowColor: 'transparent',     // 文字本身的阴影颜色
        textShadowBlur: 0,                  // 文字本身的阴影长度
        textShadowOffsetX: 0,               // 文字本身的阴影X偏移
        textShadowOffsetY: 0,               // 文字本身的阴影Y偏移
    },
    subtextStyle: {
                 // 副标题样式
        align: 'auto',          // 文字水平对齐方式 left ¦ center ¦ right
        verticalAlign: 'auto',  // 文字垂直对齐方式 top ¦ middle ¦ bottom
    },
    textAlign: 'auto',          // 整体（主副标题）的水平对齐
    textVerticalAlign: 'auto',  // 整体（主副标题）的垂直对齐
    triggerEvent: false,        // 是否触发事件
    padding: 5,                 // 标题内边距，单位px，默认各方向内边距为5，
                                // 接受`数组`分别设定上右下左边距，同css
    itemGap: 10,                // 主副标题间距
    zlevel: 0,                  // 用于Canvas分层，内存开销大，谨慎使用
    z: 2,                       // 控制图形的先后顺序，优先级低于zlevel
    x: 'left',                  // 水平安放位置，默认为左对齐，可选为：
                                // center ¦ left ¦ right ¦ 像素值
    y: 'top',                   // 垂直安放位置，默认为全图顶端，可选为：
                                // top ¦ bottom ¦ center ¦ 像素值
    left: 'auto',               // grid 组件容器左侧的距离
                                // center ¦ left ¦ right ¦ 像素值 ¦ %
    top: 'auto',                // grid 组件容器上侧的距离 
                                // top ¦ middle ¦ bottom ¦ 像素值 ¦ %
    right: 'auto',              // grid 组件容器右侧的距离
                                // 像素值 ¦ %
    bottom: 'auto',             // grid 组件容器下侧的距离
                                // 像素值 ¦ %
    backgroundColor: 'transparent',     // 标题背景色
    borderColor: '#ccc',                // 标题边框颜色
    borderWidth: 0,                     // 标题边框线宽
    borderRadius: 0,                    // 圆角半径 单位px 
                                        // 接受`数组`分别指定4个圆角半径
    shadowBlur: ...,                    // 图形阴影的模糊大小
    shadowColor: ...,                   // 阴影颜色
    shadowOffsetX: 0,                   // 阴影水平方向上的偏移距离
    shadowOffsetY: 0                    // 阴影垂直方向上的偏移距离
}

legend（图例）

仅列出图例单独的属性，公共属性如：show、zlevel、x、y、z、left、top、right、bottom、padding、itemGap、backgroundColor、borderColor、borderWidth、borderRadius、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY以及textStyle中的部分属性，请参考title内容。

legend: {
    
    type: 'plain',          // 图例类型：
                            // 'plain'：普通图例；'scroll'：可滚动翻页图例
    orient: 'horizontal',   // 图例列表的布局朝向：horizontal | vertocal
    align: 'auto',          // 图例标记和文本的对齐：auto | left | right
    itemWidth: 25,          // 图例标记的图形宽度
    itemHeight: 14,         // 图例标记的图形高度
    symbolKeepAspect: true, // 自定义图标时，是否在缩放时保持缩放比
    formatter: null,        // 格式化图例文本，支持字符串模板和回调函数
    selectedMode: true,     // 图例选择模式：
                            // 是否可以通过点击图例，改变图表显示状态
    inactiveColor: '#ccc',  // 图例关闭时的颜色
    selected: {
                 // 图例选中状态表
        '系列1': true,       // 选中'系列1'
        '系列2': false       // 不选中'系列2'
    },
    textStyle: {
    },          // 图例的公用文本样式，公共样式请参考 `title`
    tooltip: {
    ...},         // 同tooltip
    data: [{
    
        name: ...,          // 图例项的名称，应等于某系列的name值          
        icon: ...,          
        textStyle: {
    ...},   // 图例的文本样式(single)
    }],
    // 以下属性，type为'scroll'时，有效
    scrollDataIndex: 0,     // 图例当前最左上显示项的`dataIndex`
    pageButtonItemGap: 5,   // 图例控制块中，按钮和页信息之间的间隔
    pageButtonGap: null,    // 图例控制块和图例之间的间隔
    pageButtonPosition: 'end',          // 图例控制块的位置：
                                        // 'start'：控制块在左或上
                                        // 'end'：控制块在右或下
    pageFormatter: '{current}/{total}', // 页信息的显示格式
    pageIcons: {
    
        horizontal: [...],  // orient为'horizontal'时的翻页按钮图标
        vertical: [...]     // orient为'vertical'时的翻页按钮图标
    },
    pageIconColor: '#2f4554',       // 翻页按钮颜色
    pageIconInactiveColor: '#aaa',  // 翻页按钮不激活时的颜色
    pageIconSize: 15,               // 翻页按钮的大小，接受数组、数字
    pageTextStyle: {
    ...},           // 图例页信息的文字样式
    animation: ...,                 // 图例翻页是否使用动画
    animationDurationUpdate: 800,   // 图例翻页时的动画时常
}

grid（网格）

grid: {
    
    show: false,            // 是否显示直角坐标系网格
    zlevel: 0,
    z: 2,
    left: '10%',
    top: 60,
    right: '10%',
    bottom: 60,
    width: 'auto',
    height: 'auto',
    containLabel: false,    // grid 区域是否包含坐标轴的刻度标签
    backgroundColor: 'transparent',
    borderColor: '#ccc',
    borderWidth: 1,
    shadowBlur: ...,
    shadowColor: ...,
    shadowOffsetX: 0,
    shadowOffsetY: 0,
}

categoryAxis（类目轴）

categoryAxis: {
    
    show: true,             // 是否显示 x 轴
    gridIndex: 0,           // x轴所在的grid的索引
    position: ...,          // x轴的位置 'top'|'bootom'
    offset: 0,              // x轴相对于默认位置的偏移
    // **在相同的`position`上有多个x轴的时候起作用**
    name: ...,              // 坐标轴名称
    nameLocation: 'end',    // 坐标轴名称显示位置
                            // 'start'|'middle'或'center'|'end'
    nameTextStyle: {
    ...},   // 坐标轴名称的文字样式
    nameGap: 15,            // 坐标轴名称与轴线之间的距离
    nameRotate: null,       // 坐标轴名字旋转，角度值
    inverse: false,         // 是否反向坐标轴
    boundaryGap: ...,       // 坐标轴两边留白
                            // 类目轴 'true'|'false'
                            // 非类目轴 数组["20%", "20%"]，数组值可以为百分比或数值
    min: null,              
    /** 坐标轴刻度最小值
        可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
        当设置成 function 形式时，可以根据计算得出数据的最小值来设定坐标轴的最小值                    
    **/
    max: null,              // 坐标轴刻度最大值 同理 最小值
    scale: false,           // 数值轴有效，是否脱离0值比例
    splitNumber: 5,         // 坐标轴分割段数（预估值）类目轴无效
    minInterval: 0,         // 自动计算坐标轴最小间隔 设置成1保证坐标轴分割刻度显示成整数
    maxInterval: ...,       // 自动计算坐标轴最大间隔
    interval: ...,          // 强制设置坐标轴分割间隔
    logBase: 10,            // 对数轴的底数，只在对数轴中（type: 'log'）有效
    silent: false,          // 坐标轴是否是静态无法交互
    triggerEvent: false,    // 坐标轴的标签是否响应和触发鼠标事件，默认不响应
    axisLine: {
                 // 坐标轴轴线相关设置
        show: true,         // 是否显示坐标轴轴线
        onZero: true,       // X轴或Y轴的轴线是否在另一个轴的'0'刻度上，只有在另一个轴为数值轴且包含'0'刻度时有效
        onZeroAxisIndex: ...,   // 当有双轴时，指定在哪个轴的'0'刻度上
        symbol: 'none',         // 轴线两边的箭头 ['none', 'arrow']
        symbolSize: [10, 15],   // 轴线两边的箭头的大小，['垂直','水平']
        symbolOffset: [0, 0],   // 轴线两边的箭头的偏移
    },
    axisTick: {
                     // 坐标轴刻度相关设置
        show: true,         
        alignWithLabel: false,  // 类目轴中'boundaryGap'为'true'时有效，保证刻度线和标签对齐
        interval: 'auto',   // 坐标轴刻度的显示间隔，在类目轴中有效
        inside: false,      // 坐标轴刻度是否朝内，默认朝外
        length: 5,          // 坐标轴刻度的长度
        lineStyle: {
    
            color: ...,
            width: 1,
            type: 'solid',      // 坐标轴刻度线的类型。
                                // 'solid'|'dashed'|'dotted'
            shadowBlur: ...,
            shadowColor: ...,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: ...
        }
    },
    axisLabel: {
    ...},       // 坐标轴刻度标签的相关设置
    splitLine: {
                // 坐标轴在'grid'区域中的分隔线
        show: true,
        interval: 'auto',
        lineStyle: {
    ...}
    },
    splitArea: {
                // 分隔区域的样式设置
        interval: 'auto',
        show: false,        // 是否显示分隔区域
        areaStyle: {
    
            // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
        }
    },
    data: [{
    ...}],
    axisPointer: {
    ...},
    zlevel: 0,
    z: 0,
}

valueAxis（数值轴）、radiusAxis（极坐标系的径向轴）、angleAxis(极坐标系的角度轴)
数值轴、极坐标系的径向轴、极坐标系的角度轴的配置，基本与类目轴一致，可参考 categoryAxis

line（折线图）

line: {
    
    name: ...,
    coordinateSystem: 'cartesian2d',        // 坐标系
    xAxisIndex: 0,
    yAxisIndex: 0,
    polarIndex: 0,
    symbol: 'emptyCircle',      // 标记的图形 'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'，可通过'image://url'设为图片，其中'URL'为图片链接
    symbolSize: 4,              // 标记的大小
    symbolRotate: ...,          // 标记的旋转角度
    symbolKeepAspect: false,    // 是否在缩放时保持该图形的长宽比(仅图片)
    symbolOffset: [0, 0],       // 标记相对于原本位置的偏移
    showSymbol: true,           // 是否显示'symbol'
    showAllSymbol: 'auto',      
    hoverAnimation: true,       // 是否开启'hover'在拐点标志上的提示动画效果
    legendHoverLink: true,      // 是否启用图例'hover'时的联动高亮
    stack: null,                // 数据堆叠，同个类目轴上系列配置相同的'stack'值后，后一个系列的值会在前一个系列的值上相加
    cursor: 'pointer',
    connectNulls: false,        // 是否连接空数据
    clipOverflow: true,         // 是否对超出部分裁剪，默认裁剪
    step: false,                // 是否是阶梯线图。可设为'true'显示成阶梯线图
    label: {
    ...},               // 图形上的文本标签，参考'title'
    itemStyle: {
    ...},           // 折线拐点标志的样式
    lineStyle: {
    ...},           // 线条样式
    areaStyle: {
    ...},           // 区域填充样式
    emphasis: {
                     // 图形的高亮样式
        label: {
    ...},
        itemStyle: {
    ...},
    },            
    smooth: false,              // 是否平滑曲线显示
    smoothMonotone: ...,        // 折线平滑后是否在一个维度上保持单调性
    sampling: ...,  
    dimensions: [...],
    encode: {
    ...},
    seriesLayoutBy: 'column',
    datasetIndex: 0,
    data: [{
    
        name: ...,
        value: ...,
        symbol: 'circle',
        symbolSize: 4,
        symbolRotate: ...,
        symbolKeepAspect: false,
        symbolOffset: [0, 0],
        label: {
    ...},
        itemStyle: {
    ...},
        emphasis: {
    ...},
        tooltip: {
    ...},
    }],
    markPoint: {
    ...},           // 图表标注
    markLine: {
    ...},            // 图表标线
    markArea: {
    ...},            // 图表标域，常用于标记图表中某个范围的数据
    zlevel: 0,
    z: 2,
    silent: false,
    animation: true,
}

bar（柱形图）

bar: {
    
    name: ...,
    legendHoverLink: true,
    coordinateSystem: 'cartesian2d',
    xAxisIndex: 0,
    yAxisIndex: 0,
    label: {
    ...},
    itemStyle: {
    ...},
    emphasis: {
    ...},
    stack: null,
    cursor: 'pointer',
    barWidth: 自适应,                    // 柱条宽度
    barMaxWidth: 自适应,                 // 柱条最大宽度
    barMinHeight: 0,                    // 柱条最小高度
    barGap: 30%,                        // 柱条间距 想要两柱子重叠，可设为'-100%'
    barCategoryGap: '20%',              // 同一系列的柱间距
    large: false,                       // 是否开启大数据量优化
    largeThreshold: 400,                // 开启绘制优化的阈值
    progressive: 5000,                  // 渐进式渲染时，每一帧绘制图形数量
    progressiveThreshold: 3000,         // 启用渐进式渲染的图形数量阈值
    progressiveChunkMode: mod,          // 分片的方式：
                                        // 'sequential'|'mod'
    dimensions: [...],
    encode: {
    ...},                      // 可定义'data'的某个维度被编码
    seriesLayoutBy: 'column',
    datasetIndex: 0,
    data: [{
    
        name: ...,
        value: ...,
        label: {
    ...},                   // 单个柱条文本样式设置
        itemStyle: {
    ...},
        emphasis: {
    ...},
        tooltip: {
    ...},
    }],
    markPoint: {
    ...},
    markLine: {
    ...},
    markArea: {
    ...},
    zlevel: 0,
    z: 2,
}

pie（饼图）

pie: {
    
    legendHoverLink: true,
    hoverAnimation: true,
    hoverOffset: 10,                // 高亮扇区的偏移距离
    selectedMode: false,            // 选中模式，表示是否支持多个选中
    selectedOffset: 10,             // 选中扇区的偏移距离
    clockwise: true,                // 饼图的扇区是否是顺时针排布
    startAngle: 90,                 // 起始角度
    minAngle: 0,                    // 最小的扇区角度
    minShowLabelAngle: 0,           // 小于该角度的扇区，不显示标签
    roseType: false,                // 是否展示成南丁格尔图，通过半径区分数据大小
                                    // 'radius' | 'area'
    avoidLabelOverlap: true,        // 是否启用防止标签重叠策略
    stillShowZeroSum: true,         // 是否在数据和为0的时候不显示扇区
    cursor: 'pointer',
    label: {
    ...},       // 饼图图形上的文本标签，可用于说明图形的一些数据信息
    labelLine: {
            // 标签的视觉引导线样式
        show: ...,
        length: ...,    // 视觉引导线第一段的长度
        length2: ...,   // 视觉引导线第二段的长度
        smooth: false,
        lineStyle: {
    ...},
    },   
    itemStyle: {
    ...},       // 图形样式
    emphasis: {
    ...},
    zlevel: 0,
    z: 2,
    center: ['50%', '50%'],
    radius: [0, '75%'],             // 饼图的半径
    seriesLayoutBy: 'column',
    datasetIndex: 0,
    data: [{
    ...}],
    markPoint: {
    ...},
    markLine: {
    ...},
    markArea: {
    ...},
}

polar（极坐标）

polar: {
    
    zlevel: 0,
    z: 2,
    // 极坐标系的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
    // 支持设置成百分比，第一项是相对于容器宽度，第二项是相对于容器高度
    center: ['50%', '50%'],
    /** 极坐标系的半径。可以为如下类型：
        number：直接指定外半径值。
        string：如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的20%长度
        Array.<number|string>：数组的第一项是内半径，第二项是外半径
    **/
    radius: ...,
}

radar（雷达坐标系）

radar: {
    
    zlevel: 0,
    z: 2,
    center: ['50%', '50%'],
    radius: 75%,
    startAngle: 90,
    name: {
    ...},    // 雷达图每个指示器名称的配置项 可参考title中textStyle
    nameGap: 15,
    splitNumber: 5,     
    shape: 'polygon',   // 雷达绘制类型 支持'polygon' 和 'circle'
    scale: false,
    silent: false,
    triggerEvent: false,
    axisLine: {
    
        show: true,
        symbol: 'none',
        symbolSize: [10, 15],
        symbolOffset: [0, 0],
        lineStyle: {
    ...},
    },
    splitLine: {
    
        show: true,
        lineStyle: {
    ...},
    },
    splitArea: {
    
        show: true,
        areaStyle: {
    ...},
    },
    indicator: [    // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
                    // 类似于 直角坐标系中的 data
        {
    
            name: ...,
            max: ...,
            min: ...,
            color: ...,
        }
    ],
}