如何用React实现echarts可拖拽折线图？

Question

希望用React实现一个echarts可拖拽折线图；

框架语言是React+JS，使用了echarts-for-react；

根据echarts官网上面的示例，在option{}中加入graphic组件，代码如下：

import ReactEcharts from 'echarts-for-react';
import React from 'react';

class MyEcharts extends React.Component {
  state = {
    option: {},
  };

  setOption = () => {
    const data = [
      [15, 0],
      [-50, 10],
      [-56.5, 20],
      [-46.5, 30],
      [-22.1, 40],
    ];
    const symbolSize = 20;
    const option = {
      xAxis: {
        min: -100,
        max: 80,
        type: 'value',
        axisLine: { onZero: false },
      },
      yAxis: {
        min: -30,
        max: 60,
        type: 'value',
        axisLine: { onZero: false },
      },
      series: [
        {
          id: 'a',
          type: 'line',
          smooth: true,
          symbolSize,
          data,
        },
      ],

      graphic: data.map(function (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) {
            onPointDragging(dataIndex, [this.x, this.y]);
          },
          z: 100,
        };
      }),
    };

    function onPointDragging(dataIndex, pos) {
      data[dataIndex] = myChart.convertFromPixel('grid', pos);
    }

    myChart.on('dataZoom', updatePosition);

    function updatePosition() {
      myChart.setOption({
        graphic: data.map(function (item, dataIndex) {
          return {
            position: myChart.convertToPixel('grid', item),
          };
        }),
      });
    }

    //   // Update data

    myChart.setOption({
      series: [
        {
          id: 'a',
          data,
        },
      ],
    });

    this.setState({
      option,
    });
  };

  render() {
    return (
      <ReactEcharts
        style={{
          marginTop: '20px',
          height: '400px',
          border: '1px solid rgb(204 20 204 / 0.5)',
          paddingTop: '10px',
          borderRadius: '6px',
        }}
        option={this.setOption()}
      />
    );
  }
}
export default MyEcharts;

浏览器报错 ：ReferenceError: myChart is not defined

请问该如何修改我的代码？

如果大佬可以上传具体代码的话，感激不尽！

 

 

 

Answer 1

// 你要自己定义一个对象，意思是，你要把图表显示到你页面那个位置  加到你代码第5行就行
var myChart = echarts.init(document.getElementById('main'));