1. 程式人生 > >使用echarts-for-react 繪制折線圖 報錯:`series.type should be specified `

使用echarts-for-react 繪制折線圖 報錯:`series.type should be specified `

reac inject clas mar amp 添加 str serve 顏色

解決辦法:

在動態獲取值的函數前面加 訪問器屬性 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}> <ReactEcharts 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[], }

使用echarts-for-react 繪制折線圖 報錯:`series.type should be specified `