使用echarts-for-react 绘制折线图 报错:`series.type should be specified `
解决办法:
在动态获取值的函数前面加 访问器属性 get ,去获取对象的属性
@inject('commonStore', 'reportUIStore') @observer class LineEcharts extends React.Component<Props> { drawChart = () => { const { nameArr } = this.props const option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: 'rgba(24,144,255,0.2)', }, }, formatter: (params: Params) => { let tip = `` if (params.length) { tip += params[0].axisValue + '<br/>' } if (params.length && params.length === 1) { tip += params[0].marker + params[0].seriesName + ' :' + params[0].data + '<br>' } if (params.length > 1) { let num = params[0].data - params[1].data let rate = ((num / params[1].data) * 100).toFixed(2) if (num === 0) { rate = `0%` } else { rate = `${rate}%` } for (let i = 0; i < params.length; i++) { if (nameArr && nameArr.length) { params[i].seriesName = nameArr[i] tip += params[i].marker + params[i].seriesName + ' :' + params[i].data + '<br>' } } tip += `变化:${num}(${rate})` } return tip }, }, grid: { left: '3%', right: '6%', bottom: '10%', containLabel: true, }, xAxis: { axisLabel: { textStyle: { color: '#999', }, }, type: 'category', boundaryGap: true, data: range(24).map(hour => `${hour}:00`), axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: '#ccc', width: 1, }, }, }, yAxis: [ { type: 'value', name: '', min: 0, max: 12000, interval: 3000, axisLabel: { formatter: '{value}', }, axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: '#ccc', width: 1, }, }, splitLine: { show: true, lineStyle: { color: '#eee', }, }, }, { type: 'value', name: '', min: 0, max: 150, interval: 50, axisLabel: { formatter: '{value}', }, axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: '#ccc', width: 1, }, }, splitLine: { show: true, lineStyle: { color: '#eee', }, }, }, ], series: this.handlData, } return option }
// 注意这儿: 添加了get 错误消失了 get handlData() { let series: Series[] = [] let { dataArr, nameArr, colors } = this.props dataArr.map((itm, i) => { let serie = { name: nameArr[i], type: 'line', symbol: 'circle', color: colors[i], symbolSize: 4, itemStyle: { normal: { lineStyle: { width: 2, color: colors[i], }, }, }, data: dataArr[i], } series.push(serie) }) return series } render() { return ( <div> <Loading loading={false}>
// 如果serie需要自定义,而且是可添加或删减的,可以使用 notMerge 使之不合并,从而及时更新数据
<ReactEcharts notMerge option={this.drawChart()} />
</Loading>
</div>
)
}
}
export default LineEcharts
export interface Props {
reportUIStore?: ReportUIStore
dataArr: number[][]
nameArr: string[]
colors: string[]
}
export interface Params {
param: ParamsSingle[]
length: number
}
export interface ParamsSingle {
seriesName: string
// 数据名,类目名
name: string
// 传入的原始数据项
data: Object
// 数据图形的颜色
color: string
marker: string
}
export interface Series {
name: string,
type: string,
symbol: string,
color: string,
symbolSize: number,
itemStyle: {
normal: {
lineStyle: {
width: number,
color: string
}
}
},
data: number[],
}
Every day deserves to be expected

浙公网安备 33010602011771号