用React实现echarts折线图，浏览器报错，如何解决？

Question

 

目标是实现数据点可拖拽的echarts折线图；

框架是React，目前的代码如下：

import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import React, { Component } from 'react';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    const { data } = this.state;

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('forms'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: '96点可拖拽折线图',
      },
      tooltip: {},
      legend: {
        data: ['负荷'],
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'value',
      },
      // 横纵拖拽
      dataZoom: [
        {
          type: 'slider',
          xAxisIndex: 0,
          filterMode: 'none',
        },
        {
          type: 'slider',
          yAxisIndex: 0,
          filterMode: 'none',
        },
        {
          type: 'inside',
          xAxisIndex: 0,
          filterMode: 'none',
        },
        {
          type: 'inside',
          yAxisIndex: 0,
          filterMode: 'none',
        },
      ],
      series: [
        {
          id: 'a',
          smooth: true,
          name: '负荷',
          type: 'line',
          data: [150, 230, 224, 218, 135, 147, 260],
        },
      ],
      graphic: data.map(data, (item, dataIndex) => {
        return {
          type: 'circle',
          // 将圆点平移到的位置
          position: myChart.convertToPixel('grid', item),
          shape: {
            cx: 0,
            cy: 0,
            // r: symbolSize / 2,
          },
          // 圆点不可见
          invisible: true,
          // 圆点可拖拽
          draggable: true,
          // 拖拽的响应事件，被拖拽时不断触发
          ondrag(dx, dy) {
            this.onPointDragging(dataIndex, [this.x, this.y]);
          },
          // 圆点在最上方，覆盖其他
          z: 100,
        };
      }),
    });

    // eslint-disable-next-line no-undef
    onPointDragging = (dataIndex) => {
      // 根据圆点的位置，将像素坐标转换成直角坐标，更新data
      data[dataIndex] = myChart.convertFromPixel('grid', this.position);
      // 用更新后的data,重绘折线图
      myChart.setOption({
        series: [
          {
            id: 'a',
            data,
          },
        ],
      });
    };
  }

  render() {
    return <div id="forms" style={{ width: '650px', height: '350px' }} />;
  }
}

export default Index;

浏览器报错如下：

TypeError: [object Array] is not a function

Index.componentDidMount

./src/pages/echarts/echarts.js:74

  71 |     data: [150, 230, 224, 218, 135, 147, 260],
  72 |   },
  73 | ],
> 74 | graphic: data.map(data, (item, dataIndex) => {
     | ^  75 |   return {
  76 |     type: 'circle',
  77 |     // 将圆点平移到的位置

请问我该如何修改代码？如果能提供具体修改后代码，感激不尽！

Answer 1

额。。。感觉上是你的声明错了：

this.state= {

   data:[]

}

这是你的声明，但是在接下来的 常量data的声明中，你直接是 data = this.state

那么data 等价为 { data: [] }

这是一个对象，所以调用map应该是不行的