使用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[], }