LLINK2233
LLINK2233
2021-04-25 10:31
采纳率: 100%
浏览 191

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

希望用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

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

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

 

 

 

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

2条回答 默认 最新

  • a718089112
    a718089112 2021-04-25 11:18
    已采纳
    // 你要自己定义一个对象,意思是,你要把图表显示到你页面那个位置  加到你代码第5行就行
    var myChart = echarts.init(document.getElementById('main'));
    
    点赞 1 评论
  • kingwolf_JavaScript
    浴火_凤凰 2021-04-25 11:04

    你的代码没有 myChart的定义,应该是一个 Echart实例

    在React的初始化事件里 加上 this.myChart = echarts.init(你要画图的DOM节点);

    后面调用都使用 this.myChart即可

    可以试着在一开始 写上let  myChart = echarts.init(你要在哪上面画图的DOM节点);

    或者 let  myChart = ReactEcharts.init(你要在哪上面画图的DOM节点);

    React不是很熟悉,上面是修改思路

    点赞 1 评论

相关推荐