react項目中使用echart

1.安裝插件

npm install --save echarts-for-react

npm install --save echarts

2.我使用的了父子組件引入方法

父組件：index.js

/**
 * 父組件
 */
import React, { Component } from "react";
import Storage from "store2";
import { Notification, Button, DatePicker } from "antd";
import moment from "moment";
import Request from "@utils/request";
import Echart from "@component/echart";

const chost = Storage.get("chost");
// 格式化時間
const format = "YYYY-MM-DD HH:mm:ss";
class View extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startTime: moment({ hour: 0, minute: 0, seconds: 0 }).subtract(30, "days"), // add(1, "day")
      endTime: moment({ hour: 23, minute: 59, seconds: 59 }),
      backSource: [], // 數據
    };
  }
  UNSAFE_componentWillMount() {
    this.loadData(); // 獲取當天數據
  }
  // 渲染頁面數據
  loadData = () => {
    const {
      startTime,
      endTime,
    } = this.state;
    // 獲取任務列表
    Request.GET(`${chost}/clean/clear`, {
      params: {
        beginDate: moment(startTime).format(format),
        endDate: moment(endTime).format(format),
      }
    }).then((res) => {
      if (res.success) {
        this.setState({
          backSource: res.data
        });
      } else {
        Notification.error({
          message: res.msg || "獲取信息失敗"
        });
      }
    });
  };
  disabledStartDate = startValue => {
    const { endTime } = this.state;
    if (!startValue || !endTime) {
      return false;
    }
    return startValue.valueOf() > endTime.valueOf();
  };

  disabledEndDate = endValue => {
    const { startTime } = this.state;
    if (!endValue || !startTime) {
      return false;
    }
    return endValue.valueOf() <= startTime.valueOf();
  };
  // 修改開始時間
  changeStartTime = (time) => {
    this.setState({
      startTime: time
    });
  };
  // 修改結束時間
  changeEndTime = (time) => {
    this.setState({
      endTime: time
    });
  };
  render() {
    const {
      startTime,
      endTime,
      backSource,
    } = this.state;
    console.log(backSource);
    return (
      <div className="clear">
        <div className="searchBox">
          <div className="searchItem">
            <span>任務開始時間：</span>
            <DatePicker
              disabledDate={this.disabledStartDate}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              value={startTime}
              placeholder="開始"
              onChange={this.changeStartTime}
              onOpenChange={this.handleStartOpenChange}
            />
          </div>
          <div className="searchItem">
            <span>任務結束時間：</span>
            <DatePicker
              disabledDate={this.disabledEndDate}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              value={endTime}
              placeholder="結束"
              onChange={this.changeEndTime}
            />
          </div>
          <div className="searchItem">
            <Button
              type="primary"
              onClick={() => {
                this.loadData();
              }}
            >
              查詢
            </Button>
          </div>
        </div>
        <div className="chartBox">
          <Echart
          backData={backSource}
          xtitle="date"
          />
        </div>
      </div>
    );
  }
}

export default View;

子組件編寫echart

import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title"; // 此處是按需引入

class echartLine extends Component {
    constructor(props) {
        super(props);
        this.state = {
          imgType: "line", // 默認折線圖
          xtitle: this.props.xtitle, // x軸類目名稱取參
        };
    }
    // getOption 這個函數主要用於配置 option，包括將數據配置進去
    // 也可以將其放在 state 中，然後通過 setState 更新
    getOption = () => {
      // 組裝數據，返回配置 option
      const {imgType, xtitle} = this.state;
      const dataName =  xtitle === "date" ? "時間" : "名稱";
      const currentData = this.props.backData;
      const clearData = {
        name: "清分量",
        type: imgType,
        barWidth : 10,
        data: currentData.map(a => a.cleanAmount) || []
      };
      const linkData = {
        name: "關聯量",
        type: imgType,
        barWidth : 10,
        data: currentData.map(b => b.linkAmount) || []
      };
      return {
        color: ["#386db3", "#e5323e"], // 圖顏色
        title: {
            text: ""
        },
        tooltip: {
            trigger: "axis"
        },
        legend: {
            data: ["清分量", "關聯量"],
            top: "20"
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {},
                // dataZoom: {yAxisIndex: "none"}, //區域縮放，區域縮放還原
                //數據視圖
                dataView: {
                  readOnly: false,
                  title: "數據視圖",
                  // 自定義數據表格樣式
                  optionToContent: function (opt) {
                    var axisData = opt.xAxis[0].data;
                    var series = opt.series;
                    var tdHeads = "<td  style=\"padding:5px 10px\">"+ dataName +"</td>";
                    series.forEach(function (item) {
                        tdHeads += "<td style=\"padding: 5px 10px\">"+item.name+"</td>";
                    });
                    var table = "<table border=\"1\" style=\"margin-left:20px;width:600px;border-collapse:collapse;font-size:14px;text-align:center\"><tbody><tr>"+tdHeads+"</tr>";
                    var tdBodys = "";
                    for (var i = 0, l = axisData.length; i < l; i++) {
                        for (var j = 0; j < series.length; j++) {
                            if(typeof(series[j].data[i]) == "object"){
                                tdBodys += "<td>"+series[j].data[i].value+"</td>";
                            }else{
                                tdBodys += "<td>"+ series[j].data[i]+"</td>";
                            }
                        }
                        table += "<tr><td style=\"padding: 0 10px\">"+axisData[i]+"</td>"+ tdBodys +"</tr>";
                        tdBodys = "";
                    }
                    table += "</tbody></table>";
                    return table;
                  }
                },
                magicType: {type: ["line", "bar"]}, //切換爲折線圖，切換爲柱狀圖
                restore: {},  //還原
            }
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: currentData.map(item => item[xtitle]) || []
        },
        yAxis: {
            type: "value",
            name: "清分量"
        },
        series: [clearData, linkData]
    }
  };
    render() {
      return(
        <ReactEcharts
          style={{ minHeight: "400px" }}
          option={this.getOption()}
          notMerge
          lazyUpdate
          theme={"theme_name"}
          // onChartReady={this.onChartReadyCallback}
          // onEvents={EventsDict}
        />
      )
    }
}

export default echartLine;

效果圖如下：