option = { ..., series: [{ // 浪高 type: 'line', yAxisIndex: 1 }, { // 风向箭头 type: 'custom', renderItem: renderArrow, encode: { x: dims.time, y: dims.windSpeed }, data: data, z: 10 }, { // 风速虚线 type: 'line', symbol: 'none', encode: { x: dims.time, y: dims.windSpeed }, data: data }, { // 天气图标 type: 'custom', renderItem: renderWeather, data: weatherData }], visualMap: { seriesIndex: 1, dimension: 1, ... } } // 绘制风向箭头 function renderArrow(param, api) { var point = api.coord([ api.value(dims.time), api.value(dims.windSpeed) ]); return { type: 'path', shape: { pathData: 'M31 16l-15-15v9h-26v12h26v9z', x: -arrowSize / 2, y: -arrowSize / 2, width: arrowSize, height: arrowSize }, rotation: directionMap[api.value(dims.R)], position: point, style: api.style({ stroke: '#555', lineWidth: 1 }) }; } // 绘制天气图标 function renderWeather(param, api) { var point = api.coord([ api.value(dims.time) + + 3600 * 24 * 1000 / 2, 0 ]); return { type: 'group', children: [{ type: 'image', style: { image: api.value(dims.weatherIcon), x: -weatherIconSize / 2, y: -weatherIconSize / 2, width: weatherIconSize, height: weatherIconSize }, position: [point[0], 110] }, { type: 'text', style: { text: api.value(dims.minTemp) + ' - ' + api.value(dims.maxTemp) + '°', textFont: api.font({fontSize: 14}), textAlign: 'center' }, position: [point[0], 80] }] }; }