tqv-data-operation-screen/src/pages/sial/component/moodProductionView.jsx

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


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";

@withRouter

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

  componentDidMount() {
    this.getUrl()
  }

  async getUrl() {
    await twoService().then(({ data = [], resultCode }) => {
      if (+resultCode === 0) {
        let year = [], budgetSalesQty = [], budgetProdQty = [];
        data.map((x, i) => {
          year.push(x.bMonth);
          budgetSalesQty.push(x.budgetSalesQty || 0)
          budgetProdQty.push(x.budgetProdQty || 0)
        });
        this.setState({ year, budgetProdQty, budgetSalesQty });
        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"
          },
          backgroundColor: "#0000008a"
        },
        legend: {
          data: ['计划产量', '实际产量'],
          fontFamily: 'DingTalkJinBuTi',
          padding: [25, 0, 0, 10],
          textStyle: {
            color: "#fff"
          },
          itemWidth: 11,
          itemHeight: 11,
        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   left: 'right',
        //   top: 'center',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        //   xAxis: {
        //     data: dataAxis,
        //     axisTick: {
        //       show: false,
        //     },
        //     axisLine: {
        //       show: true,
        //       symbol: ['none', 'arrow'],
        //       symbolOffset: 12,
        //       lineStyle: {
        //         color: '#fff',
        //       }
        //     },
        //     z: 10
        //   },

        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}吨",
              textStyle: {
                color: '#7d7d7d',
                fontSize: 12
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#3b3b3b',
                type: 'dashed',

              }
            }
          }
        ],
        series: [
          {
            name: '计划产量',
            type: 'bar',
            animation: true,
            animationDuration: 3000,
            "smooth": true,

            emphasis: {
              focus: 'series'
            },
            barWidth: 10,

            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
                { offset: 0.7, color: 'rgba(255, 206, 0, 1)' },
                { offset: 1, color: 'rgba(255, 206, 0, 0.3)' },
              ])
            },

            data: this.state.budgetSalesQty
          },
          {
            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.budgetProdQty
          }
        ]
      }
      var myChart = echarts.init(document.getElementById('chartProduct'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }, 3000)
  }

  render() {

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