zoukankan      html  css  js  c++  java
  • 使用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',
                 1,
              },
            },
          },
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: 12000,
              interval: 3000,
              axisLabel: {
                formatter: '{value}',
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#ccc',
                   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',
                   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: { 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: {
                 number,
                color: string
            }
            }
        },
        data: number[],
    }
  • 相关阅读:
    程序员用HTML5给女朋友制作的3D相册
    CSS图片翻转动画技术详解
    jQuery实现的全选、反选和不选功能
    行内元素和块级元素
    &nbsp|&quot|&amp|&lt|&gt等html字符转义
    找回Git中丢失的Commit
    GIT的使用中的问题处理
    Linux下的常用指令汇总
    Pandas存储为Excel格式:单个xlsx文件下多sheet存储方法
    Python全栈开发-执行字符串形式的语句和字符串形式的表达式方法(即exec和eval方法)
  • 原文地址:https://www.cnblogs.com/aloehui/p/9446429.html
Copyright © 2011-2022 走看看