使用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