tqv-data-operation-screen/src/pages/tlk/component/bottomLineForSend.jsx

/*
 * @Author: dayan_hjm 近30天产量
 * @Date: 2023-10-23 09:32:12 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2024-10-17 14:24:52
 */


import React, { useState, useEffect, Component } from "react";
import styles from "../style.less";
import { useHistory, useLocation, withRouter } from "react-router-dom";
import mod from '../mod';
import {
  mondService,
} from "../api";

@withRouter

class BottomLineForSend extends Component {
  // 构造函数，组件的实例创建时，最先执行
  constructor(props, context) {
    super(props, context);
    this.store = mod;
    this.state = {
      factoryProdcution_arr: [],
      missionsIntensity_arr: [],
      year: [],
      AvgQty:[],
    };
  }

  componentDidMount() {
    this.getUrl()
  }
  async getUrl() {
    await mondService().then(({ data = [], resultCode }) => {
      if (+resultCode === 0) {
        let year = [], missionsIntensity_arr = [],AvgQty = [], factoryProdcution_arr = [];
        data.map((x, i) => {
          const name_ = x.DateId.split('-')[1] + '-' + x.DateId.split('-')[2];
          year.push(name_);
          missionsIntensity_arr.push(x.ProdQty);
          AvgQty.push(x.AvgQty);
          factoryProdcution_arr.push(x.Avg5daysQty)
        });
        this.setState({ year, missionsIntensity_arr, AvgQty,factoryProdcution_arr });
        this.setData();
      }
    });

  }

  setData() {
    setTimeout(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts21'));

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          borderColor: "rgba(105, 255, 222, 0.5)",
          borderWidth: 2,
          padding: 5,
          className: 'dyLeft',
          textStyle: {
            fontSize: 12,
            textAlign: "left",
            color: "#ededed"
          },
          backgroundColor: "#0000008a",
        },
        // formatter: `日期: {b0}<br />{a0}: {c0}吨<br />{a1}: {c1}吨`,
        grid: {
          left: '5%',
          top: '15%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        legend: {
          data: ['日产量(Daily Net Prodution)', '日产量趋势( Daily Net Production Trends)', "平均产量(Average Net Production)"],
          fontFamily: 'DingTalkJinBuTi',
          padding: [5, 0, 40, 0],
          textStyle: {
            color: "#CDF1FF",
            fontSize: 10
          },
          itemWidth: 8,
          itemHeight: 8,
        },

        xAxis: [{
          type: 'category',
          // boundaryGap: ['20%', '20%'],
          axisLabel: {
            // interval: 0,//设置是否展示全部数据在x轴
            rotate: -60,
            textStyle: {
              color: '#7d7d7d',
              fontSize: 11,
            },
            showMaxLabel: true,//关键部分，显示最后一个label
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
              type: 'dashed',

            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#3b3b3b',
              type: 'dashed',
            }
          },
          data: this.state.year
        }, {

          axisPointer: { show: false },
          axisLine: { show: false },
          position: 'bottom',
          offset: 20,



        }],

        yAxis: [{
          type: 'value',
          axisTick: { show: false },
          // splitNumber: 6,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            },
          },
          axisLabel: {
            formatter: "{value}t",
            textStyle: {
              color: '#7d7d7d',
              fontSize: 11
            },
          },

          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        }],
        series: [
          {
            name: '日产量(Daily Net Prodution)',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: '#69FFDE',
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 255, 182, 0.5)'
                }, {
                  offset: 1,
                  color: 'rgba(0, 255, 182, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(0, 255, 182, 0.3)',
                borderWidth: 12
              }
            },
            data: this.state.missionsIntensity_arr,
            "smooth": true
          },
          {
            name: '日产量趋势( Daily Net Production Trends)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: '#FFCE00'
            },
            lineStyle: {
              normal: {
                color: '#FFCE00',
                width: 2
              }
            },
            data: this.state.factoryProdcution_arr,
          },
          {
            name: '平均产量(Average Net Production)',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: '#8D93FF',
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: '#8D93FF',
                borderColor: '#8D93FF',
                borderWidth: 12
              }
            },
            data: this.state.AvgQty,
            "smooth": true
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }, 3000)
  }

  render() {

    return (
      <div className={["eacharView cbBottomLineForSend"]}>
        <div id="echarts21"></div>
      </div>
    )
  }
}
export default BottomLineForSend;