AntV 在h5页面中的使用

H5页面的使用

效果图   (react页面js完整代码和css代码在最下面)

Ant V 官网https://antv.vision/zh

h5页面npm安装或者直接引入

1，index.html 引入

   <script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2-all.min.js"></script>

2，页面添加canvas　　

　<canvas id="container" width="400" height="260"></canvas>

3，canvas样式添加

　 可以不加样式，这里不写样式了

4，js代码　　

 　this.initchart();

 initchart() {
    this.state.chart = new F2.Chart({   //创建chart对象
      id: "container",
      pixelRatio: window.devicePixelRatio,
      padding: [20, 40, "auto", "auto"],
      color: "red",
      defaultColor: "red",
    });
    let preDataReverse=[...this.state.dataList].reverse(); //图标数据反转排序
    this.state.chart.source(preDataReverse, {
      // release: {
      //   min: 2000,
      //   max: 2010
      // }
      time: {
        tickCount: 7,   //time轴个数
        min: 0,
      },
      orderAmounts: {
        count: 7,
        // range: [ 0, 1 ]
        min: 0,
      },
    });

    this.state.chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: "#1890FF",
        padding: [3, 5],
      },
      nameStyle: {
        fill: "#fff",
      },
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = items[0].title;
        // items[0].value = items[0].value+'人';  //鼠标悬浮时显示
      },
    });

                                            //横坐标*纵坐标       this.state.chart.line().position("time*orderAmounts").color("#5AADFF");
    this.state.chart
      .point()
      .position("time*orderAmounts")     // 横坐标*纵坐标       
      .color("#5AADFF")
      .style({
        color: "#5AADFF",
        lineWidth: 1,
        stroke: "#fff",
      });

    this.state.chart.interaction("pan");
    // 定义进度条
    this.state.chart.scrollBar({
      mode: "x",
      xStyle: {
        offsetY: -5,
      },
    });

    // 绘制 tag
    this.state.chart.guide().tag({
      position: [10, "5-7"],
      withPoint: false,
      content: "1,344",
      limitInPlot: true,
      offsetX: 5,
      direct: "cr",
    });
           
 
               this.state.chart.area().position("time*orderAmounts").color("#5AADFF");
                                             // 横坐标*纵坐标       
    this.state.chart.line().position("time*orderAmounts").color("#5AADFF");
    this.state.chart.render();
  }            

　

react 完整js代码

import React from 'react';
import './style.css';
import { API } from '@/api';
import LzEditor  from 'react-lz-editor'

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    sums: 0,
    currentTime: "",
    type: 1,
    day: 7,
    viewFlag: false,
    chart: null,
    dataList: [],
  };
  getPreMonth(date) {
    var day1 = new Date();
    day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
    var s1 =
      day1.getFullYear() +
      "-" +
      (day1.getMonth() + 1 < 10
        ? "0" + (day1.getMonth() + 1)
        : day1.getMonth() + 1) +
      "-" +
      day1.getDate();
    return s1;
  }
  static defaultProps = {};
  componentWillMount() {
    let currentTime = this.getPreMonth();
    this.setState({
      currentTime: currentTime,
    });
    // // 测试数据
    // var urlparam = encodeURIComponent(
    //   JSON.stringify({
    //     type: 6,
    //     day: 7,
    //   })
    // );

    var data1 = this.props.location.search;
    var urlparam = data1.substring(1).split('&')
    const dataUrl = JSON.parse(window.decodeURIComponent(urlparam));
    this.setState({
      type: dataUrl.type,
      day: dataUrl.day,
      sums: dataUrl.sums,
      viewFlag: dataUrl.viewFlag,
    });
    if (dataUrl.data) {
      this.setState({
        dataList: dataUrl.data,
      });
    }
    setTimeout(() => {
      if (this.state.type == "4") {
        if (this.state.dataList && this.state.dataList.length > 0) {
          this.initchart();
        }
      }
      if (this.state.type == "5") {
        if (this.state.dataList && this.state.dataList.length > 0) {
          this.initchart1();
        }
      }
    }, 3000);
  }
  componentDidMount() { }
  initchart() {
    this.state.chart = new F2.Chart({
      id: "container",
      pixelRatio: window.devicePixelRatio,
      padding: [20, 40, "auto", "auto"],
      color: "red",
      defaultColor: "red",
    });
    let preDataReverse=[...this.state.dataList].reverse();
    this.state.chart.source(preDataReverse, {
      // release: {
      //   min: 2000,
      //   max: 2010
      // }
      time: {
        tickCount: 7,
        min: 0,
      },
      orderAmounts: {
        count: 7,
        // range: [ 0, 1 ]
        min: 0,
      },
    });

    this.state.chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: "#1890FF",
        padding: [3, 5],
      },
      nameStyle: {
        fill: "#fff",
      },
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = items[0].title;
        // items[0].value = items[0].value+'人';
      },
    });

    this.state.chart.line().position("time*orderAmounts").color("#5AADFF");
    this.state.chart
      .point()
      .position("time*orderAmounts")
      .color("#5AADFF")
      .style({
        color: "#5AADFF",
        lineWidth: 1,
        stroke: "#fff",
      });

    this.state.chart.interaction("pan");
    // 定义进度条
    this.state.chart.scrollBar({
      mode: "x",
      xStyle: {
        offsetY: -5,
      },
    });

    // 绘制 tag
    this.state.chart.guide().tag({
      position: [10, "5-7"],
      withPoint: false,
      content: "1,344",
      limitInPlot: true,
      offsetX: 5,
      direct: "cr",
    });
    this.state.chart.area().position("time*orderAmounts").color("#5AADFF");
    this.state.chart.line().position("time*orderAmounts").color("#5AADFF");
    this.state.chart.render();
  }

  initchart1() {
    this.state.chart = new F2.Chart({
      id: "container",
      pixelRatio: window.devicePixelRatio,
      padding: [20, 40, "auto", "auto"],
      color: "red",
      defaultColor: "red",
    });
    let preDataReverse=[...this.state.dataList].reverse();
    this.state.chart.source(preDataReverse, {
      createTime: {
        tickCount: 7,
        min: 0,
      },
      customerOrderSns: {
        count: 7,
        min: 0,
      },
    });

    this.state.chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: "#1890FF",
        padding: [3, 5],
      },
      nameStyle: {
        fill: "#fff",
      },
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = items[0].title;
      },
    });

    this.state.chart.line().position("createTime*customerOrderSns").color("#5AADFF");
    this.state.chart
      .point()
      .position("createTime*customerOrderSns")
      .color("#5AADFF")
      .style({
        color: "#5AADFF",
        lineWidth: 1,
        stroke: "#fff",
      });

    this.state.chart.interaction("pan");
    // 定义进度条
    this.state.chart.scrollBar({
      mode: "x",
      xStyle: {
        offsetY: -5,
      },
    });

    // 绘制 tag
    this.state.chart.guide().tag({
      position: [10, "5-7"],
      withPoint: false,
      content: "1,344",
      limitInPlot: true,
      offsetX: 5,
      direct: "cr",
    });
    this.state.chart.area().position("createTime*customerOrderSns").color("#5AADFF");
    this.state.chart.line().position("createTime*customerOrderSns").color("#5AADFF");
    this.state.chart.render();
  }

  render() {
    var sums = this.state.sums;
    var currentTime = this.state.currentTime;
    var type = this.state.type;
    var day = this.state.day;
    var viewFlag = this.state.viewFlag;
    var chart = this.state.chart;
    var dataList = this.state.dataList;

    return (
      <div>
        <div>
          <div className="coupon_wrap">
            <div className="coupon_tab-main">
              <div className="chartDesCon">
                <div className="chartDes">
                  <div className="chartDes_warn">
                    {type == "4" && (
                      <div className="chartDes_warn_header">
                        我的会员下单金额{day}天数据
                      </div>
                    )}
                    {type == "5" && (
                      <div className="chartDes_warn_header">
                        我的会员下单数量{day}天数据
                      </div>
                    )}
                  </div>

                  <div className="chartDes_warn">
                    <div className="chartDes_warnCon">
                      <div className="chartDes_icon2">截止昨日：</div>
                      <div className="chartDes_warn-text">{currentTime}</div>
                    </div>
                    <div className="chartDes_warnCon">
                      {type == "4" && (
                        <div className="chartDes_icon2">
                          会员下单金额（元）：
                        </div>
                      )}
                      {type == "5" && (
                        <div className="chartDes_icon2">
                          会员下单数量（单）：
                        </div>
                      )}
                      <div className="chartDes_warn-text">{sums}</div>
                    </div>
                  </div>
                  <div className="chartDes_warn">
                    <div className="chartDes_warnCon">
                      <div className="chartDes_icon2"></div>
                      {type == "4" && (
                        <div className="chartDes_warn-text1">
                          下单金额（元）
                        </div>
                      )}
                      {type == "5" && (
                        <div className="chartDes_warn-text1">
                          下单数量（单）
                        </div>
                      )}
                    </div>
                  </div>
                </div>
                {dataList.length > 0 && (
                  <canvas id="container" width="400" height="260"></canvas>
                )}
              </div>
              {dataList.length > 0 && (
                <div>
                  <div>
                    <div className="memIvt1_listTitle_chart">
                      <div>日期</div>
                      {type == "4" && (
                        <div>会员日下单金额（元）</div>
                      )}
                      {type == "5" && (
                        <div>会员日下单数量（单）</div>
                      )}
                    </div>
                    {dataList.length > 0 && (
                      <div>
                        {dataList.map((item, index) => {
                          return (
                            <div className="memIvt1_list_chart">
                              <div className="memIvt1_list_div_chart">
                                {item.createTime}
                              </div>
                              {type == "4" && (
                                <div className="memIvt1_list_div_chart">
                                  {item.orderAmounts}
                                </div>
                              )}
                              {type == "5" && (
                                <div className="memIvt1_list_div_chart">
                                  {item.customerOrderSns}
                                </div>
                              )}
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                </div>
              )}

              {dataList.length <= 0 && (
                <div className="spokes_nodata">
                  <div className="memIvt1_nodata_img">
                    <img src="/static/images/spokesman_nodata.png" />
                  </div>
                  <div className="memIvt1_nodata_spoke_nodata_text">
                    <div>暂无记录</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

react 完整css代码

/* .home {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.home-body {
  flex: 1;
  padding-bottom: 120px;
}
.header {
   100%;
  height: 349px;
} */


.scrollBox {
  margin-top: 98px;
}
.coupon_item-l {
  border-right: dotted 5px #000000 !important;
}
.coupon_coupon_l_b {
  font-size: 26px;
  text-align: center;
  color: #f80000;
}
.coupon_coupon-fail_7 .coupon_gray_color {
  color: #a0a0a0;
}
.coupon_gray_color {
  color: #333333;
}
.coupon_coupon_l_t {
  font-size: 54px;
  color: #f80000;
}
.coupon_coupon-fail_7 .coupon_coupon_l_t {
  color: #a0a0a0;
}
.coupon_coupon-fail_7 .coupon_coupon_l_b {
  color: #a0a0a0;
}
.coupon_point_7 {
  font-size: 24px;
}
.coupon_coupon-item_7 {
  margin: 0 auto 20px;
   710px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.coupon_item-l_7 {
  display: flex;
  justify-content: center;
  align-items: center;
   200px;
  color: #f80000;
}
.coupon_flex_middle {
  display: flex;
  justify-content: start;
  align-items: center;
}
.coupon_w_100 {
   100%;
  text-align: center;
}
.coupon_coupon-fail_7 .coupon_item_middle {
  border-right: dotted #a0a0a0 1px;
  color: #a0a0a0;
}
.coupon_coupon-fail_7 .coupon_item_middle text {
  color: #a0a0a0;
}
.coupon_item_middle text {
  color: #333333;
}
.coupon_item_middle {
  margin: 15px 0;
  padding: 0 20px;
   405px;
  border-right: dotted #f80000 1px;
  box-sizing: border-box;
  color: #333333;
}
.coupon_circle-t_7,
.coupon_circle-b_7 {
  position: absolute;
  bottom: -8px;
   16px;
  height: 16px;
  border-radius: 50%;
  background: #f1f1f1;
}
.coupon_circle-t_7 {
  left: -8px;
}
.coupon_circle-b_7 {
  right: -8px;
}
.coupon_coupon-fail_7 .coupon_item-r_7 {
  color: #a0a0a0;
}
.coupon_item-r_7 {
   106px;
  padding: 20px 0;
  box-sizing: border-box;
  color: #f80000;
}
.coupon_item-r_7 text {
  display: block;
  height: 28px;
   100%;
  text-align: center;
  font-size: 28px;
}

.coupon_item_bottom {
  display: flex;
  justify-content: space-between;
}

.coupon_b_t {
  border-top: dashed 1px #dbdbdb;
}
.coupon_p_b_10 {
  padding-bottom: 10px;
}

.coupon_store_list {
  padding-top: 10px;
  font-size: 26px;
  color: #333333;
}
.coupon_jd-cell-l_7 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  color: #333333;
  font-size: 24px;
}
.coupon_jd-cell-r_7 {
  height: 50px;
  line-height: 50px;
  padding: 0 37px;
}
.coupon_jd-cell-r_7 .coupon_image {
  margin: 0;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
   12px;
  height: 22px;
}
.coupon_item_text {
  display: none;
  font-size: 24px;
  color: #999999;
  line-height: 2;
  padding-left: 20px;
  padding-right: 20px;
}
.coupon_explain {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}
.coupon_explainList {
  display: block;
}

.coupon_l_item_7 {
  padding-bottom: 10px;
}
.coupon_radio_flex {
   100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.coupon_t_l {
  text-align: left;
}

.coupon_m_b_18 {
  margin-bottom: 18px;
}

.coupon_picker_bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
}

.coupon_picker_wrap {
  position: absolute;
  left: 0;
  bottom: 0;
   100%;
  height: 857px;
  background: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.coupon_pos_top {
   44px;
  height: 44px;
  position: absolute;
  right: 36px;
  top: 20px;
  z-index: 6;
}

.coupon_picker_title {
   100%;
  color: #333333;
  font-size: 36px;
  text-align: center;
  padding: 70px 0;
}

.coupon_picker_text {
  height: 641px;
   100%;
  padding: 0 30px;
  box-sizing: border-box;
  font-size: 30px;
  color: #666666;
  letter-spacing: 3px;
}

.coupon_tab-head {
  background: #fff;
  display: flex;
  position: fixed;
   100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.coupon_tab-head .coupon_tab-item {
  flex-grow: 1;
  text-align: center;
  padding: 20px 0 25px;
  color: #333;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 28px;
}

.coupon_tab-head .coupon_act {
  color: #333;
  position: relative;
  font-weight: bold;
}

.coupon_tab-head .coupon_act:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -40px;
   80px;
  height: 6px;
  border-radius: 4px;
  background: #f80000;
}

.coupon_no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.coupon_no-data .coupon_image {
   200px;
  height: 400px;
  margin-bottom: 40px;
}

.coupon_no-data .coupon_text {
  color: #cacaca;
  font-size: 30px;
}

.coupon_item-l {
  border-right: dotted 5px #000000 !important;
}
.coupon_coupon_l_b {
  font-size: 26px;
  text-align: center;
  color: #f80000;
}
.coupon_coupon-fail_7 .coupon_gray_color {
  color: #a0a0a0;
}
.coupon_gray_color {
  color: #333333;
}
.coupon_coupon_l_t {
  font-size: 54px;
  color: #f80000;
}
.coupon_coupon-fail_7 .coupon_coupon_l_t {
  color: #a0a0a0;
}
.coupon_coupon-fail_7 .coupon_coupon_l_b {
  color: #a0a0a0;
}
.coupon_point_7 {
  font-size: 24px;
}
.coupon_coupon-item_7 {
  margin: 0 auto 20px;
   710px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.coupon_item-l_7 {
  display: flex;
  justify-content: center;
  align-items: center;
   200px;
  color: #f80000;
}
.coupon_flex_middle {
  display: flex;
  justify-content: start;
  align-items: center;
}
.coupon_w_100 {
   100%;
  text-align: center;
}
.coupon_coupon-fail_7 .coupon_item_middle {
  border-right: dotted #a0a0a0 1px;
  color: #a0a0a0;
}
.coupon_coupon-fail_7 .coupon_item_middle .coupon_text {
  color: #a0a0a0;
}
.coupon_item_middle .coupon_text {
  color: #333333;
}
.coupon_item_middle {
  margin: 15px 0;
  padding: 0 20px;
   405px;
  border-right: dotted #f80000 1px;
  box-sizing: border-box;
  color: #333333;
}
.coupon_circle-t_7,
.coupon_circle-b_7 {
  position: absolute;
  bottom: -8px;
   16px;
  height: 16px;
  border-radius: 50%;
  background: #f1f1f1;
}
.coupon_circle-t_7 {
  left: -8px;
}
.coupon_circle-b_7 {
  right: -8px;
}
.coupon_coupon-fail_7 .coupon_item-r_7 {
  color: #a0a0a0;
}
.coupon_item-r_7 {
   106px;
  padding: 20px 0;
  box-sizing: border-box;
  color: #f80000;
}
.coupon_item-r_7 .coupon_text {
  display: block;
  height: 28px;
   100%;
  text-align: center;
  font-size: 28px;
}
.coupon_tab-main .coupon_coupon_item_top {
  display: flex;
  border-bottom: dashed 1px #dbdbdb;
  position: relative;
  padding: 10px 0;
}
.coupon_item_bottom {
  display: flex;
  justify-content: space-between;
}

.coupon_b_t {
  border-top: dashed 1px #dbdbdb;
}
.coupon_p_b_10 {
  padding-bottom: 10px;
}

.coupon_store_list {
  padding-top: 10px;
  font-size: 26px;
  color: #333333;
}
.coupon_jd-cell-l_7 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  color: #333333;
  font-size: 24px;
}
.coupon_jd-cell-r_7 {
  height: 50px;
  line-height: 50px;
  padding: 0 37px;
}
.coupon_jd-cell-r_7 image {
  margin: 0;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
   12px;
  height: 22px;
}
.coupon_item_text {
  display: none;
  font-size: 24px;
  color: #999999;
  line-height: 2;
  padding-left: 20px;
  padding-right: 20px;
}
.coupon_explain {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}
.coupon_explainList {
  display: block;
}

.coupon_l_item_7 {
  padding-bottom: 10px;
}
.coupon_radio_flex {
   100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.coupon_t_l {
  text-align: left;
}

.coupon_m_b_18 {
  margin-bottom: 18px;
}

.coupon_picker_bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
}

.coupon_picker_wrap {
  position: absolute;
  left: 0;
  bottom: 0;
   100%;
  height: 857px;
  background: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.coupon_pos_top {
   44px;
  height: 44px;
  position: absolute;
  right: 36px;
  top: 20px;
  z-index: 6;
}

.coupon_picker_title {
   100%;
  color: #333333;
  font-size: 36px;
  text-align: center;
  padding: 70px 0;
}

.coupon_picker_text {
  height: 641px;
   100%;
  padding: 0 30px;
  box-sizing: border-box;
  font-size: 30px;
  color: #666666;
  letter-spacing: 3px;
}

.coupon_r-arrow {
   20px;
  height: 17px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

.coupon_r-arrow .coupon_image {
   20px;
  height: 17px;
}

.memIvt1_nodata_spoke_nodata_text {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.memIvt1_nodata_spoke_nodata_text div {
  font-size: 30px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 42px;
}
.memIvt1_nodata_spoke_nodata {
  text-align: center;
  margin-top: 88px;
}
.memIvt1_nodata_spoke_nodata_img {
   44px;
  height: 44px;
}
.memIvt1_list_div .taro-img {
   44px;
  height: 44px;
}

.memIvt1_listTitle {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
  border-radius: 5px;
  padding: 0 10px;
}
.memIvt1_listTitle_con {
  background: #fff;
  margin: 0 20px;
  border-radius: 10px;
  position: relative;
  top: -10px;
}

.memIvt1_listTitle > div {
  font-size: 28px;
  color: #333;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 88px;
  height: 88px;
  text-align: left;
   29%;
  text-align: center;
}
.memIvt1_listTitle > div:nth-of-type(1) {
   60px;
}
.memIvt1_list > .memIvt1_list_div:nth-of-type(1) {
   60px;
}
.memIvt1_list_con {
  padding: 0 10px;
}
.memIvt1_list_con .memIvt1_list:nth-of-type(1) {
  border: none;
}
.memIvt1_list {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f1f1f1;
}

.memIvt1_list > div {
  min-height: 108px;
  font-size: 26px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 36px;
   25%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  box-sizing: border-box;
}

.memIvt1_title {
   100%;
  font-size: 28px;
  color: #333;
  display: flex;
  box-sizing: border-box;
  position: relative;
  height: 44px;
  margin-bottom: 10px;
}
.memIvt1_title-text {
   200px;
  flex: 1;
}
.memIvt1_timePick {
  flex: 1;
  text-align: left;
  position: relative;
  padding: 0 20px;
}
.memIvt1_pick {
  position: absolute;
  top: 0;
   100%;
  z-index: 10;
}
.item-extra__info {
  display: none;
}


.item-content__info-title {
  opacity: 0;
}

.memIvt1_pickText {
  position: absolute;
  position: absolute;
  left: 50px;
}
.memIvt1_list_div {
  font-size: 26px;
  line-height: 36px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #333333;
   25%;
  display: flex;
  /* justify-content: flex-start; */
  align-items: center;
}
.memIvt1_list_div .taro-img{
  display: flex;
  align-items: center;
  justify-content: center;
}
.taro_page {
  background: #fafafa;
}
.jd-cell-more-icon {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.jd-cell-more-image {
   20px;
  height: auto;
}
.jd-cell-more-icon .taro-img {
  display: flex;
  align-items: center;
}
.mem-text {
  font-size: 26px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  position: absolute;
  top: 0;
  display: flex;
  z-index: 1;
}
.warn {
  padding: 0 20px 20px 20px;
  align-items: center;
}
.chartDes_warn {
  padding: 30px 0 0 0;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.chartDes_warn-text {
  text-indent: 0;
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
.chartDes_warn-text1 {
  text-indent: 0;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
}
.warn-text {
  text-indent: 0;
  font-size: 22px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f80000;
}
.icon2 {
  margin-right: 16px;
  font-size: 26px;
  color: #333333;
  font-family: PingFangSC-Regular, PingFang SC;
}
.chartDes_icon2 {
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}
.image {
  display: block;
   100%;
  height: 100%;
}
.warnCon {
  display: flex;
}
.chartDes_warnCon {
  display: flex;
}
.chartDes_icon2 {
  display: flex;
  padding-bottom: 15px;
}

.memIvt1_listTitle_chart {
  display: flex;
  height: 88px;
  background: #f1f1f1;
  border-radius: 5px 5px 0px 0px;
  justify-content: space-between;
  margin: 0 20px;
  padding: 0 20px;
}

.memIvt1_listTitle_chart > div {
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333300;
  height: 88px;
  line-height: 88px;
  text-align: center;
   50%;
}
.memIvt1_list_chart {
  display: flex;
  background: #fff;
  justify-content: space-between;
  padding: 0 20px 0 20px;
  margin: 0 20px;
}
.memIvt1_list_chart > div {
  min-height: 88px;
  font-size: 26px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333300;
   50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #f1f1f1;
}
.memIvt1_list_chart:nth-of-type(1) > div {
  border: none;
}
.memIvt1_list_div_chart {
  font-size: 26px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #333333;
   50%;
  display: flex;
  /* justify-content: flex-start; */
  align-items: center;
}
.chartDes {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}
.seniorityCon {
  padding: 0 20px;
}
.seniority {
  height: 100px;
  text-align: center;
  background: -webkit-gradient(linear, left top, right top, from(#f7dbdb), to(#f5d5d5));
  border-radius: 5px 5px 0px 0px;
  font-size: 30px;
  font-family: JDLANGZHENGTI--GB1-0, JDLANGZHENGTI--GB1;
  font-weight: normal;
  color: #333333;
}
.seniority_text {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
}
.chartDesCon {
  background: #ffffff;
  margin: 0 20px;
}
.memIvt1_nodata_img img{
   400px;
  height:400px;
}
.memIvt1_nodata_img{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:50px;
}
.chartDes_warn_header{
  font-weight: 500;
   100%;
  text-align: center;
  font-size: 24px;
  color: #666;
}
.memIvt1_nodata_nodata{
  background: #fff;
  padding: 30px 0 30px 0;
  margin: 0 10px;
}

import React from 'react';
import './style.css';
import { API } from '@/api';
import LzEditor  from 'react-lz-editor'

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    sums: 0,
    currentTime: "",
    type: 1,
    day: 7,
    viewFlag: false,
    chart: null,
    dataList: [],
  };
  getPreMonth(date) {
    var day1 = new Date();
    day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
    var s1 =
      day1.getFullYear() +
      "-" +
      (day1.getMonth() + 1 < 10
        ? "0" + (day1.getMonth() + 1)
        : day1.getMonth() + 1) +
      "-" +
      day1.getDate();
    return s1;
  }
  static defaultProps = {};
  componentWillMount() {
    let currentTime = this.getPreMonth();
    this.setState({
      currentTime: currentTime,
    });
    // // 测试数据
    // var urlparam = encodeURIComponent(
    //   JSON.stringify({
    //     type: 6,
    //     day: 7,
    //   })
    // );

    var data1 = this.props.location.search;
    var urlparam = data1.substring(1).split('&')
    const dataUrl = JSON.parse(window.decodeURIComponent(urlparam));
    this.setState({
      type: dataUrl.type,
      day: dataUrl.day,
      sums: dataUrl.sums,
      viewFlag: dataUrl.viewFlag,
    });
    if (dataUrl.data) {
      this.setState({
        dataList: dataUrl.data,
      });
    }
    setTimeout(() => {
      if (this.state.type == "4") {
        if (this.state.dataList && this.state.dataList.length > 0) {
          this.initchart();
        }
      }
      if (this.state.type == "5") {
        if (this.state.dataList && this.state.dataList.length > 0) {
          this.initchart1();
        }
      }
    }, 3000);
  }
  componentDidMount() { }
  initchart() {
    this.state.chart = new F2.Chart({
      id: "container",
      pixelRatio: window.devicePixelRatio,
      padding: [20, 40, "auto", "auto"],
      color: "red",
      defaultColor: "red",
    });
    let preDataReverse=[...this.state.dataList].reverse();
    this.state.chart.source(preDataReverse, {
      // release: {
      //   min: 2000,
      //   max: 2010
      // }
      time: {
        tickCount: 7,
        min: 0,
      },
      orderAmounts: {
        count: 7,
        // range: [ 0, 1 ]
        min: 0,
      },
    });

    this.state.chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: "#1890FF",
        padding: [3, 5],
      },
      nameStyle: {
        fill: "#fff",
      },
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = items[0].title;
        // items[0].value = items[0].value+'人';
      },
    });

    this.state.chart.line().position("time*orderAmounts").color("#5AADFF");
    this.state.chart
      .point()
      .position("time*orderAmounts")
      .color("#5AADFF")
      .style({
        color: "#5AADFF",
        lineWidth: 1,
        stroke: "#fff",
      });

    this.state.chart.interaction("pan");
    // 定义进度条
    this.state.chart.scrollBar({
      mode: "x",
      xStyle: {
        offsetY: -5,
      },
    });

    // 绘制 tag
    this.state.chart.guide().tag({
      position: [10, "5-7"],
      withPoint: false,
      content: "1,344",
      limitInPlot: true,
      offsetX: 5,
      direct: "cr",
    });
    this.state.chart.area().position("time*orderAmounts").color("#5AADFF");
    this.state.chart.line().position("time*orderAmounts").color("#5AADFF");
    this.state.chart.render();
  }

  initchart1() {
    this.state.chart = new F2.Chart({
      id: "container",
      pixelRatio: window.devicePixelRatio,
      padding: [20, 40, "auto", "auto"],
      color: "red",
      defaultColor: "red",
    });
    let preDataReverse=[...this.state.dataList].reverse();
    this.state.chart.source(preDataReverse, {
      createTime: {
        tickCount: 7,
        min: 0,
      },
      customerOrderSns: {
        count: 7,
        min: 0,
      },
    });

    this.state.chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: "#1890FF",
        padding: [3, 5],
      },
      nameStyle: {
        fill: "#fff",
      },
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = items[0].title;
      },
    });

    this.state.chart.line().position("createTime*customerOrderSns").color("#5AADFF");
    this.state.chart
      .point()
      .position("createTime*customerOrderSns")
      .color("#5AADFF")
      .style({
        color: "#5AADFF",
        lineWidth: 1,
        stroke: "#fff",
      });

    this.state.chart.interaction("pan");
    // 定义进度条
    this.state.chart.scrollBar({
      mode: "x",
      xStyle: {
        offsetY: -5,
      },
    });

    // 绘制 tag
    this.state.chart.guide().tag({
      position: [10, "5-7"],
      withPoint: false,
      content: "1,344",
      limitInPlot: true,
      offsetX: 5,
      direct: "cr",
    });
    this.state.chart.area().position("createTime*customerOrderSns").color("#5AADFF");
    this.state.chart.line().position("createTime*customerOrderSns").color("#5AADFF");
    this.state.chart.render();
  }

  render() {
    var sums = this.state.sums;
    var currentTime = this.state.currentTime;
    var type = this.state.type;
    var day = this.state.day;
    var viewFlag = this.state.viewFlag;
    var chart = this.state.chart;
    var dataList = this.state.dataList;

    return (
      <div>
        <div>
          <div className="coupon_wrap">
            <div className="coupon_tab-main">
              <div className="chartDesCon">
                <div className="chartDes">
                  <div className="chartDes_warn">
                    {type == "4" && (
                      <div className="chartDes_warn_header">
                        我的会员下单金额{day}天数据
                      </div>
                    )}
                    {type == "5" && (
                      <div className="chartDes_warn_header">
                        我的会员下单数量{day}天数据
                      </div>
                    )}
                  </div>

                  <div className="chartDes_warn">
                    <div className="chartDes_warnCon">
                      <div className="chartDes_icon2">截止昨日：</div>
                      <div className="chartDes_warn-text">{currentTime}</div>
                    </div>
                    <div className="chartDes_warnCon">
                      {type == "4" && (
                        <div className="chartDes_icon2">
                          会员下单金额（元）：
                        </div>
                      )}
                      {type == "5" && (
                        <div className="chartDes_icon2">
                          会员下单数量（单）：
                        </div>
                      )}
                      <div className="chartDes_warn-text">{sums}</div>
                    </div>
                  </div>
                  <div className="chartDes_warn">
                    <div className="chartDes_warnCon">
                      <div className="chartDes_icon2"></div>
                      {type == "4" && (
                        <div className="chartDes_warn-text1">
                          下单金额（元）
                        </div>
                      )}
                      {type == "5" && (
                        <div className="chartDes_warn-text1">
                          下单数量（单）
                        </div>
                      )}
                    </div>
                  </div>
                </div>
                {dataList.length > 0 && (
                  <canvas id="container" width="400" height="260"></canvas>
                )}
              </div>
              {dataList.length > 0 && (
                <div>
                  <div>
                    <div className="memIvt1_listTitle_chart">
                      <div>日期</div>
                      {type == "4" && (
                        <div>会员日下单金额（元）</div>
                      )}
                      {type == "5" && (
                        <div>会员日下单数量（单）</div>
                      )}
                    </div>
                    {dataList.length > 0 && (
                      <div>
                        {dataList.map((item, index) => {
                          return (
                            <div className="memIvt1_list_chart">
                              <div className="memIvt1_list_div_chart">
                                {item.createTime}
                              </div>
                              {type == "4" && (
                                <div className="memIvt1_list_div_chart">
                                  {item.orderAmounts}
                                </div>
                              )}
                              {type == "5" && (
                                <div className="memIvt1_list_div_chart">
                                  {item.customerOrderSns}
                                </div>
                              )}
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                </div>
              )}

              {dataList.length <= 0 && (
                <div className="spokes_nodata">
                  <div className="memIvt1_nodata_img">
                    <img src="/static/images/spokesman_nodata.png" />
                  </div>
                  <div className="memIvt1_nodata_spoke_nodata_text">
                    <div>暂无记录</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}