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

/*
 * @Author: dayan_hjm 月度产量/发货量
 * @Date: 2023-10-23 09:32:12 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2024-10-24 11:03:08
 */


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 {
  twoService,
} from "../api";
import { getThousandNum } from "@utils/util";

@withRouter

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

  componentDidMount() {
    this.getUrl()
  }

  async getUrl() {
    await twoService().then(({ data = [], resultCode }) => {
      if (+resultCode === 0) {
        let year = [], proQty = [], deliveryQty = [];
        data.map((x, i) => {
          year.push(x.bMonth);
          // proQty.push(x.proQty)
          deliveryQty.push(x?.DeliveryQty ? x?.DeliveryQty.toFixed(1) : 0)
        });
        this.setState({ year, deliveryQty });
        this.setData();
      }
    });

  }


  setData() {
    setTimeout(() => {
      var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
      var yMax = 500;
      var dataShadow = [];
      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      var option = {
        grid: {
          left: '2%',
          top: '18%',
          right: '0%',
          bottom: '8%',
          containLabel: true
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          borderColor:"rgba(105, 255, 222, 0.5)",
          borderWidth:2,
          padding:5, 
          textStyle:{
            fontSize:10,
            color:"#ededed"
          },
          valueFormatter: (value) => {
            return getThousandNum(Number(value)) 
          },
          backgroundColor:"#0000008a"
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: this.state.year,
            axisLabel: {
              /*inside: true,*/
              color: "rgba(255,255,255,.6)",
              interval: 0,
              textStyle: {
                color: '#7d7d7d',
                fontSize: 10

              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)',
                type: 'dashed',
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                color: '#3b3b3b',
                type: 'dashed',
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#7d7d7d',
                type: 'dashed',
              },
            },
            axisTick: { show: false },
            axisLabel: {
              formatter: "{value}t",
              textStyle: {
                color: '#7d7d7d',
                fontSize: 11
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                color: '#3b3b3b',
                type: 'dashed',

              }
            }
          }
        ],
        series: [
          {
            name: '发货量',
            type: 'bar',
            animation:true,
            animationDuration:3000,
            "smooth": true,
  
            barGap: 0,
            barWidth: 10,
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              labelLine:{
                show:false
              },
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(105, 255, 222, 1)' },
                { offset: 0.7, color: 'rgba(105, 255, 222, 1)' },
                { offset: 1, color: 'rgba(105, 255, 222, 0.3)' },
              ])
            },
            data: this.state.deliveryQty
          }
        ]
      }
      var myChart = echarts.init(document.getElementById('chartmain2'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }, 3000)
  }

  render() {

    return (
      <div className={["eacharView cbMoodSendView"]}>
        <div id="chartmain2"></div>
      </div>
    )
  }
}
export default MoodSendView;