echarts折现图柱状图饼图资料大全整理

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%'],//饼图位置，分别代表X，Y坐标

    radius: [0, '75%'],             // 饼图的半径

    seriesLayoutBy: 'column',

    datasetIndex: 0,

    data: [{...}],

    markPoint: {...},//标注点

    markLine: {...},//标注线

    markArea: {...},

}