122 lines
3.0 KiB
JavaScript
122 lines
3.0 KiB
JavaScript
|
// 核心库
|
|||
|
|
import React, { Component } from 'react'
|
|||
|
|
// 组件库
|
|||
|
|
import { Search } from '@woowalker/feui'
|
|||
|
|
import TableChart from './TableChart'
|
|||
|
|
|
|||
|
|
class LineBarChart extends Component {
|
|||
|
|
getLineBarChartOption = (option, chartType) => {
|
|||
|
|
// 解析出 echarts option 配置
|
|||
|
|
const { data = [], xAxis = [], yAxis = [] } = option || {}
|
|||
|
|
let tempXAxis = xAxis.map(item => ({ type: 'category', data: item.data }))
|
|||
|
|
let tempYAxis = yAxis.map(({ name, max, min, inverse }) => ({
|
|||
|
|
type: 'value',
|
|||
|
|
name,
|
|||
|
|
nameTextStyle: { align: 'left' },
|
|||
|
|
max,
|
|||
|
|
min,
|
|||
|
|
inverse
|
|||
|
|
}))
|
|||
|
|
let tempLegend = []
|
|||
|
|
let tempSeries = data.map(item => {
|
|||
|
|
const { name, type, stack, yAxisIndex, data: itemData = [] } = item
|
|||
|
|
tempLegend.push(name)
|
|||
|
|
return {
|
|||
|
|
name,
|
|||
|
|
type: type || (chartType === 0 ? 'line' : 'bar'),
|
|||
|
|
stack,
|
|||
|
|
data: itemData.map(seriesData => {
|
|||
|
|
return {
|
|||
|
|
value: seriesData.value || 0,
|
|||
|
|
TooltipValue: seriesData.TooltipValue
|
|||
|
|
}
|
|||
|
|
}),
|
|||
|
|
yAxisIndex
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// echarts 图表配置
|
|||
|
|
const chartOption = {
|
|||
|
|
legend: {
|
|||
|
|
top: '5%',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#333333'
|
|||
|
|
},
|
|||
|
|
data: tempLegend
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '2%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '2%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: tempXAxis,
|
|||
|
|
yAxis: tempYAxis,
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
formatter: (params) => {
|
|||
|
|
const title = params[0].axisValueLabel
|
|||
|
|
const body = params.map(item => {
|
|||
|
|
return `<div>${item.marker}${item.seriesName}：<span>${item.data.TooltipValue || item.data.value}</span></div>`
|
|||
|
|
}).join('')
|
|||
|
|
return `<div><div>${title}</div>${body}</div>`
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toolbox: {
|
|||
|
|
show: true,
|
|||
|
|
orient: 'vertical',
|
|||
|
|
right: 0,
|
|||
|
|
top: 'center',
|
|||
|
|
feature: {
|
|||
|
|
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
|
|||
|
|
restore: { show: true },
|
|||
|
|
saveAsImage: { show: true }
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: tempSeries
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 单独提出 dataZoom，因为如果 xAxis 为空数组，dataZoom 的 xAxisIndex[0] 取值会报错
|
|||
|
|
if (chartOption.xAxis.length) {
|
|||
|
|
chartOption.dataZoom = [
|
|||
|
|
{
|
|||
|
|
type: 'inside',
|
|||
|
|
xAxisIndex: [0]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
return chartOption
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render () {
|
|||
|
|
const { config, option, type, getChartData, loading } = this.props
|
|||
|
|
const {
|
|||
|
|
id,
|
|||
|
|
code,
|
|||
|
|
formCode
|
|||
|
|
} = config
|
|||
|
|
|
|||
|
|
const chartOption = this.getLineBarChartOption(option, type)
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Search
|
|||
|
|
formCode={formCode}
|
|||
|
|
onSearch={getChartData}
|
|||
|
|
code={code}
|
|||
|
|
/>
|
|||
|
|
<TableChart
|
|||
|
|
chartId={id || formCode}
|
|||
|
|
option={chartOption}
|
|||
|
|
loading={loading.models['chartPage']}
|
|||
|
|
style={{ minHeight: 300 }}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default LineBarChart
|