加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

使用echarts-for-react 绘制折线图 报错:`series.type should b

发布时间:2020-12-15 20:25:39 所属栏目:百科 来源:网络整理
导读:解决办法:? ? ? ?在动态获取值的函数前面加 访问器属性? get ,去获取对象的属性 @inject( ‘commonStore‘,‘reportUIStore‘ )@observerclass LineEcharts extends React.Component Props { drawChart = () = { const { nameArr } = this .props const op

解决办法:?

? ? ?在动态获取值的函数前面加 访问器属性? 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‘,splitLine: {
            show: true,lineStyle: {
              color: ‘#eee‘,{
          type: ‘value‘,max: 150,interval: 50,],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,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[],}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读