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
|