| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394 |
- import { doUpdate } from '../class/updater.class'
- import { radarAxisConfig } from '../config/index'
- import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'
- import { deepMerge, getPointToLineDistance } from '../util'
- export function radarAxis (chart, option = {}) {
- let { radar } = option
- let radarAxis = []
- if (radar) {
- radarAxis = mergeRadarAxisDefaultConfig(radar)
-
- radarAxis = calcRadarAxisCenter(radarAxis, chart)
-
- radarAxis = calcRadarAxisRingRadius(radarAxis, chart)
-
- radarAxis = calcRadarAxisLinePosition(radarAxis)
-
- radarAxis = calcRadarAxisAreaRadius(radarAxis)
-
- radarAxis = calcRadarAxisLabelPosition(radarAxis)
- radarAxis = [radarAxis]
- }
- let radarAxisForUpdate = radarAxis
- if (radarAxis.length && !radarAxis[0].show) radarAxisForUpdate = []
- doUpdate({
- chart,
- series: radarAxisForUpdate,
- key: 'radarAxisSplitArea',
- getGraphConfig: getSplitAreaConfig,
- beforeUpdate: beforeUpdateSplitArea,
- beforeChange: beforeChangeSplitArea
- })
- doUpdate({
- chart,
- series: radarAxisForUpdate,
- key: 'radarAxisSplitLine',
- getGraphConfig: getSplitLineConfig,
- beforeUpdate: beforeUpdateSplitLine,
- beforeChange: beforeChangeSplitLine
- })
- doUpdate({
- chart,
- series: radarAxisForUpdate,
- key: 'radarAxisLine',
- getGraphConfig: getAxisLineConfig,
- })
- doUpdate({
- chart,
- series: radarAxisForUpdate,
- key: 'radarAxisLable',
- getGraphConfig: getAxisLabelConfig,
- })
- chart.radarAxis = radarAxis[0]
- }
- function mergeRadarAxisDefaultConfig (radar) {
- return deepMerge(deepClone(radarAxisConfig), radar)
- }
- function calcRadarAxisCenter (radarAxis, chart) {
- const { area } = chart.render
- const { center } = radarAxis
- radarAxis.centerPos = center.map((v, i) => {
- if (typeof v === 'number') return v
- return parseInt(v) / 100 * area[i]
- })
- return radarAxis
- }
- function calcRadarAxisRingRadius (radarAxis, chart) {
- const { area } = chart.render
- let { splitNum, radius } = radarAxis
- const maxRadius = Math.min(...area) / 2
- if (typeof radius !== 'number') radius = parseInt(radius) / 100 * maxRadius
- const splitGap = radius / splitNum
- radarAxis.ringRadius = new Array(splitNum).fill(0)
- .map((foo, i) => splitGap * (i + 1))
- radarAxis.radius = radius
- return radarAxis
- }
- function calcRadarAxisLinePosition (radarAxis) {
- const { indicator, centerPos, radius, startAngle } = radarAxis
- const fullAngle = Math.PI * 2
- const indicatorNum = indicator.length
- const indicatorGap = fullAngle / indicatorNum
- const angles = new Array(indicatorNum).fill(0)
- .map((foo, i) => indicatorGap * i + startAngle)
-
- radarAxis.axisLineAngles = angles
- radarAxis.axisLinePosition = angles.map(g => {
- return getCircleRadianPoint(...centerPos, radius, g)
- })
- return radarAxis
- }
- function calcRadarAxisAreaRadius (radarAxis) {
- const { ringRadius } = radarAxis
- const subRadius = ringRadius[0] / 2
- radarAxis.areaRadius = ringRadius.map(r => r - subRadius)
- return radarAxis
- }
- function calcRadarAxisLabelPosition (radarAxis) {
- let { axisLineAngles, centerPos, radius, axisLabel } = radarAxis
- radius += axisLabel.labelGap
- radarAxis.axisLabelPosition = axisLineAngles.map(angle =>
- getCircleRadianPoint(...centerPos, radius, angle))
- return radarAxis
- }
- function getSplitAreaConfig (radarAxis) {
- const { areaRadius, polygon, animationCurve, animationFrame, rLevel } = radarAxis
- const name = polygon ? 'regPolygon' : 'ring'
- return areaRadius.map((foo, i) => ({
- name,
- index: rLevel,
- visible: radarAxis.splitArea.show,
- animationCurve,
- animationFrame,
- shape: getSplitAreaShape(radarAxis, i),
- style: getSplitAreaStyle(radarAxis, i)
- }))
- }
- function getSplitAreaShape (radarAxis, i) {
- const { polygon, areaRadius, indicator, centerPos } = radarAxis
- const indicatorNum = indicator.length
- let shape = {
- rx: centerPos[0],
- ry: centerPos[1],
- r: areaRadius[i]
- }
- if (polygon) shape.side = indicatorNum
- return shape
- }
- function getSplitAreaStyle (radarAxis, i) {
- const { splitArea, ringRadius, axisLineAngles, polygon, centerPos } = radarAxis
- let { color, style } = splitArea
- style = {
- fill: 'rgba(0, 0, 0, 0)',
- ...style
- }
- let lineWidth = ringRadius[0] - 0
- if (polygon) {
- const point1 = getCircleRadianPoint(...centerPos, ringRadius[0], axisLineAngles[0])
- const point2 = getCircleRadianPoint(...centerPos, ringRadius[0], axisLineAngles[1])
- lineWidth = getPointToLineDistance(centerPos, point1, point2)
- }
- style = deepMerge(deepClone(style, true), { lineWidth })
- if (!color.length) return style
- const colorNum = color.length
- return deepMerge(style, { stroke: color[i % colorNum] })
- }
- function beforeUpdateSplitArea (graphs, radarAxis, i, updater) {
- const cache = graphs[i]
- if (!cache) return
- const { render } = updater.chart
- const { polygon } = radarAxis
- const { name } = cache[0]
- const currentName = polygon ? 'regPolygon' : 'ring'
- const delAll = currentName !== name
- if (!delAll) return
- cache.forEach(g => render.delGraph(g))
- graphs[i] = null
- }
- function beforeChangeSplitArea (graph, config) {
- const side = config.shape.side
- if (typeof side !== 'number') return
- graph.shape.side = side
- }
- function getSplitLineConfig (radarAxis) {
- const { ringRadius, polygon, animationCurve, animationFrame, rLevel } = radarAxis
- const name = polygon ? 'regPolygon' : 'ring'
- return ringRadius.map((foo, i) => ({
- name,
- index: rLevel,
- animationCurve,
- animationFrame,
- visible: radarAxis.splitLine.show,
- shape: getSplitLineShape(radarAxis, i),
- style: getSplitLineStyle(radarAxis, i)
- }))
- }
- function getSplitLineShape (radarAxis, i) {
- const { ringRadius, centerPos, indicator, polygon } = radarAxis
- const shape = {
- rx: centerPos[0],
- ry: centerPos[1],
- r: ringRadius[i]
- }
- const indicatorNum = indicator.length
- if (polygon) shape.side = indicatorNum
- return shape
- }
- function getSplitLineStyle (radarAxis, i) {
- const { splitLine } = radarAxis
- let { color, style } = splitLine
- style = {
- fill: 'rgba(0, 0, 0, 0)',
- ...style
- }
- if (!color.length) return style
- const colorNum = color.length
- return deepMerge(style, { stroke: color[i % colorNum] })
- }
- function beforeUpdateSplitLine (graphs, radarAxis, i, updater) {
- const cache = graphs[i]
- if (!cache) return
- const { render } = updater.chart
- const { polygon } = radarAxis
- const { name } = cache[0]
- const currenName = polygon ? 'regPolygon' : 'ring'
- const delAll = currenName !== name
- if (!delAll) return
- cache.forEach(g => render.delGraph(g))
- graphs[i] = null
- }
- function beforeChangeSplitLine (graph, config) {
- const side = config.shape.side
- if (typeof side !== 'number') return
- graph.shape.side = side
- }
- function getAxisLineConfig (radarAxis) {
- const { axisLinePosition, animationCurve, animationFrame, rLevel } = radarAxis
- return axisLinePosition.map((foo, i) => ({
- name: 'polyline',
- index: rLevel,
- visible: radarAxis.axisLine.show,
- animationCurve,
- animationFrame,
- shape: getAxisLineShape(radarAxis, i),
- style: getAxisLineStyle(radarAxis, i)
- }))
- }
- function getAxisLineShape (radarAxis, i) {
- const { centerPos, axisLinePosition } = radarAxis
- const points = [centerPos, axisLinePosition[i]]
- return { points }
- }
- function getAxisLineStyle (radarAxis, i) {
- const { axisLine } = radarAxis
- const { color, style } = axisLine
- if (!color.length) return style
- const colorNum = color.length
- return deepMerge(style, { stroke: color[i % colorNum] })
- }
- function getAxisLabelConfig (radarAxis) {
- const { axisLabelPosition, animationCurve, animationFrame, rLevel } = radarAxis
-
- return axisLabelPosition.map((foo, i) => ({
- name: 'text',
- index: rLevel,
- visible: radarAxis.axisLabel.show,
- animationCurve,
- animationFrame,
- shape: getAxisLableShape(radarAxis, i),
- style: getAxisLableStyle(radarAxis, i)
- }))
- }
- function getAxisLableShape (radarAxis, i) {
- const { axisLabelPosition, indicator } = radarAxis
- return {
- content: indicator[i].name,
- position: axisLabelPosition[i]
- }
- }
- function getAxisLableStyle (radarAxis, i) {
- const { axisLabel, centerPos: [x, y], axisLabelPosition } = radarAxis
- let { color, style } = axisLabel
- const [labelXpos, labelYPos] = axisLabelPosition[i]
- const textAlign = labelXpos > x ? 'left' : 'right'
- const textBaseline = labelYPos > y ? 'top' : 'bottom'
- style = deepMerge({
- textAlign,
- textBaseline
- }, style)
- if (!color.length) return style
- const colorNum = color.length
- return deepMerge(style, { fill: color[i % colorNum] })
- }
|