Mark Point

ECharts-X 提供了使用 WebGL 绘制的 markPoint。并且在大部分配置项上兼容 ECharts

Example - World Population

var option = {
    title : {
        text: 'Gridded Population of the World (2000)',
        x:'center',
        y:'top',
        textStyle: {
            color: 'white'
        }
    },
    dataRange: {
        min: 0,
        max: max,
        text:['High','Low'],
        realtime: false,
        calculable : true,
        color: ['red','yellow','lightskyblue']
    },
    series: [{
        name: 'World Population',
        type: 'map3d',
        mapType: 'world',
        mapBackgroundColor: '#005f99',
        // 地图的样式配置
        itemStyle: {
            normal: {
                borderColor: '#777'
            }
        },
        markPoint: {
            large: true,
            // Markpoint 呼吸动画
            effect: {
                show: true,
                shadowBlur: 0.4
            },
            // 异步获取的 Data
            data: populationData
        }
    }, {
        name: 
    }]
};

MarkPoint Option

symbol

symbol: 'pin'

标注类型,同 ECharts,目前有 circle, rectangle, triangle, diamond, emptyCircle, emptyRectangle, emptyTriangle, emptyDiamond , emptyCircle, 只持使用 image://url 加载图片

symbolSize

symbolSize: 4

标注大小,要注意的是 ECharts-X 中的普通标注(large:false) symbolSize 并不是像素的大小,而是3D空间中的相对大小。large:true 时 symbolSize 对应的仍然是像素大小,而且不受缩放影响。

large

large: false

是否启用大规模标注模式

effect

effect: {
    show: false,
    shadowBlur: 0
}

标注的呼吸动画特效,large:true时有效,目前只支持 shadowBlur 配置项。

distance

distance: 1

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

orientation

orientation: ‘tangent’

标注在3D空间中的朝向,可以是标注所在表面(surface)的切线tangent或者法线normal。只有在large:false的时候有效

orientationAngle

orientationAngle: 0

偏离原先朝向的角度。

itemStyle

itemStyle: {
    normal: {
        borderWidth: 1,
        borderColor: '#000',
        label: {
            show: false,
            position: 'inside',
            textStyle: {
                color: 'black'
            }
        }
    }
}

格式同 ECharts 中的 itemStyle,目前尚不支持 emphasis 样式的配置。

data

系列的标注数据, 详见ECharts#SeriesMarkPoint,注意 ECharts-X 中 3D 空间的标注坐标需要三个数值 x, y, z 指定。