Mark Bar

ECharts-X 中的柱形标注 markBar 是从 markPoint 衍生出来,除了 markPoint 能够展示的颜色和大小维度,在三维空间中使用柱形扩展了高度维度来表示数据的大小。比如下面示例中通过柱形的高度表示同一份人口密度分布数据,跟使用 markPoint 仅通过颜色区分相比更加直观和清晰。

Example - World Population

option = {
    title : {
        text: 'Gridded Population of the World (2000)',
        x:'center',
        y:'top',
        textStyle: {
            color: 'white'
        }
    },
    tooltip: {
        formatter: '{b}'
    },
    dataRange: {
        min: 0,
        max: max,
        text:['High','Low'],
        realtime: false,
        calculable : true,
        color: ['red','yellow','lightskyblue']
    },
    series: [{
        type: 'map3d',
        mapType: 'world',
        mapBackgroundColor: 'rgba(0, 150, 200, 0.5)',
        data: [{}],
        itemStyle: {
            normal: {
                areaStyle: {
                    color: 'rgba(0, 150, 200, 0.8)'
                },
                borderColor: '#777'
            }
        },
        markBar: {
            barSize: 0.6,
            data: populationData
        },
        autoRotate: true,
    }]
}

Mark Bar Option

barSize

barSize: 1

柱形的宽。对应 markPoint 中的 symbolSize。可以细化到在 data 级别配置 barSize

distance

distance: 1

map3d 中 distance 表示标注离球体表面的距离。球体半径为 100。也可以细化到在 data 级别配置 distance

data

data 配置详见 markPoint。跟 markPoint 相比 markBar 的 data 可以使用 barHeight 配置柱形高度。如下:

itemStyle

markBar 的 itemStyle 只支持配置颜色 color

var data = [{
    geoCoord: [-70, 30],
    barHeight: 10,
    barSize: 1.2
}]