LLINK2233
LLINK2233
2021-04-26 15:24
采纳率: 100%
浏览 74

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

 

目标是实现数据点可拖拽的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 |     // 将圆点平移到的位置

请问我该如何修改代码?如果能提供具体修改后代码,感激不尽!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • linchui22
    木玄客 2021-04-26 15:31
    已采纳

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

    this.state= {

       data:[]

    }

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

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

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

    点赞 评论
  • showbo

    数组的map参数是函数,你直接传递data数组肯定出错了。。

    data.map(data, (item, dataIndex) => {

     

    ===========》

     

    data.map((item, dataIndex) => {

    点赞 1 评论

相关推荐