美文网首页
react中使用G2插件实现折线图

react中使用G2插件实现折线图

作者: 无名程序猿 | 来源:发表于2019-03-25 11:10 被阅读0次

效果图

1、引入

2、 componentDidMount函数中获取数据并渲染

componentDidMount() {

    let params = {};

    api.getMeetingDurationChart(params).then(res => {

      if (res.responseObject) {

        for (let index in res.responseObject.charts) {

          var item = res.responseObject.charts[index];

          item.value = totalTime(item.value);

        }

        this.setState({

          data: res.responseObject

        });

        //折线部分

        const chart = new G2.Chart({

          container: 'charts',

          height: 60,

          forceFit: true,

          padding: 'auto'

        });

        chart.scale('value', {

          min: 0

        });

        chart.scale('time', {

          range: [0, 1]

        });

        chart

          .area()

          .color('#AFDEFF')

          .position('time*value')

          .shape('smooth');

        chart.tooltip({

          offset: 2,

          title: null,

          custom: true,

          inPlot: false,

          customFollow: true,

          showTitle: false,

          crosshairs: false,//垂直标准线

          useHtml: true,

          htmlContent: (title, items) => {

            return (

              '<div class="tooltip-custom"><p><span class="point"></span>' +

              title +

              '</p><p>' +

              items[0].value +

              '</p></div>'

            );

          }

        });

        chart

          .line()

          .color('#199FFF')

          .position('time*value')

          .size(2)

          .shape('smooth'); //平滑过渡

        chart.axis('time', false);

        chart.axis('value', false);

        chart.source(this.state.data.charts);

        if (this.state.data.charts.length == 1) {

          chart

            .point()

            .position('time*value')

            .size(2)

            .shape('circle')

            .style({

              lineWidth: 1

            });

        }

        setTimeout(() => {

          const e = document.createEvent('Event');

          e.initEvent('resize', true, true);

          window.dispatchEvent(e);

        }, 50);

        chart.render();

      } else {

        message.warning(res.message);

      }

    });

  }

3、渲染节点

相关文章

网友评论

      本文标题:react中使用G2插件实现折线图

      本文链接:https://www.haomeiwen.com/subject/fahvvqtx.html