115 lines
2.7 KiB
JavaScript
115 lines
2.7 KiB
JavaScript
/** 雷达图 */
|
||
import React, { Component } from 'react'
|
||
import PropTypes from 'prop-types'
|
||
import TableChart from './TableChart'
|
||
|
||
class RadarChart extends Component {
|
||
// 初始化 option
|
||
initOption = () => {
|
||
const { data, radar, titleText, saveImgName } = this.props
|
||
|
||
// 设置图例的默认选中，如果没有 Selected 属性，则默认为 true，即默认选中
|
||
const legendData = []
|
||
const selectedData = {}
|
||
data.forEach(item => {
|
||
legendData.push({ name: item.Name, icon: 'roundRect' })
|
||
selectedData[item.Name] = item.LegendSelected !== undefined ? item.LegendSelected : true
|
||
})
|
||
|
||
return {
|
||
title: {
|
||
text: titleText,
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: 16
|
||
},
|
||
left: 'center',
|
||
top: 0
|
||
},
|
||
legend: {
|
||
top: '6%',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#333333'
|
||
},
|
||
data: legendData,
|
||
selected: selectedData
|
||
},
|
||
radar: radar.map(item => ({
|
||
name: { color: '#000000' },
|
||
nameGap: 8,
|
||
center: ['50%', '60%'],
|
||
radius: '60%',
|
||
indicator: item.IndiCator.map(({ Text: text, Max: max }) => ({ text, max }))
|
||
})),
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
right: 0,
|
||
top: 'center',
|
||
itemSize: 12,
|
||
feature: {
|
||
restore: { show: true },
|
||
saveAsImage: { show: true, name: saveImgName || titleText }
|
||
}
|
||
},
|
||
series: []
|
||
}
|
||
}
|
||
|
||
// 生成 echarts 所需要 option
|
||
getOption = () => {
|
||
const option = this.initOption()
|
||
|
||
// 组装 option.series 数据
|
||
const { data } = this.props
|
||
data.forEach(item => {
|
||
const dataseries = {
|
||
name: item.Name,
|
||
type: 'radar',
|
||
// itemStyle 会同时设置 lineStyle 的 color 配置
|
||
itemStyle: {
|
||
color: item.Color || ''
|
||
},
|
||
data: [{
|
||
areaStyle: { opacity: 0.2 },
|
||
value: item.Data.map(element => element.Value)
|
||
}]
|
||
}
|
||
option.series.push(dataseries)
|
||
})
|
||
|
||
return option
|
||
}
|
||
|
||
render () {
|
||
const { loading, style } = this.props
|
||
return (
|
||
<TableChart
|
||
type={3}
|
||
option={this.getOption()}
|
||
loading={loading}
|
||
style={style}
|
||
/>
|
||
)
|
||
}
|
||
}
|
||
|
||
RadarChart.propTypes = {
|
||
data: PropTypes.array,
|
||
radar: PropTypes.array,
|
||
titleText: PropTypes.string,
|
||
saveImgName: PropTypes.string
|
||
}
|
||
|
||
RadarChart.defaultProps = {
|
||
data: [], // 图表数据
|
||
radar: [], // 雷达配置数据
|
||
titleText: '', // 图表 top center 位置的标题
|
||
saveImgName: '' // 导出为图片的图片文件名称
|
||
}
|
||
|
||
export default RadarChart |