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

/*
 * @Author: dayan_hjm 近30天产量
 * @Date: 2023-10-23 09:32:12 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2023-11-17 10:21:39
 */


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 = {
      missionsIntensity_arr:[],
      year:[],
    };
  }

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

  }

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

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          borderColor:"rgba(105, 255, 222, 0.5)",
          borderWidth:2,
          padding:5,
          textStyle:{
            fontSize:12,
            color:"#ededed"
          },
          backgroundColor:"#0000008a"

          // formatter:'{c}' ,
        },
        grid: {
          left: '8%',
          top: '15%',
          right: '8%',
          bottom: '10',
          containLabel: true
        },
        // legend: {
        //   data: ['字段1', '字段2'],
        //   right: 'center',
        //   top: 0,
        //   textStyle: {
        //     color: "#fff"
        //   },
        //   itemWidth: 12,
        //   itemHeight: 10,
        //   // itemGap: 35
        // },

        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
                color: '#7d7d7d',
                fontSize: 12
            },
            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} 吨",
            textStyle: {
              color: '#7d7d7d',
              fontSize: 13
            },
          },

          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        }],
        series: [
          {
            name: '吨数',
            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: '#69ffde5c'
                }, {
                  offset: 1,
                  color: 'rgba(228, 228, 126, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(228, 228, 126, 1)',
                borderColor: 'rgba(228, 228, 126, .1)',
                borderWidth: 12
              }
            },
            data: this.state.missionsIntensity_arr,
            "smooth": true
          },
          // {
          //   name: '字段2',
          //   type: 'line',
          //   smooth: true,
          //   symbol: 'circle',
          //   symbolSize: 5,
          //   showSymbol: false,
          //   lineStyle: {

          //     normal: {
          //       color: 'rgba(255, 128, 128, 1)',
          //       width: 2
          //     }
          //   },
          //   areaStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //         offset: 0,
          //         color: 'rgba(255, 128, 128,.2)'
          //       }, {
          //         offset: 1,
          //         color: 'rgba(255, 128, 128, 0)'
          //       }], false),
          //       shadowColor: 'rgba(0, 0, 0, 0.1)',
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: 'rgba(255, 128, 128, 1)',
          //       borderColor: 'rgba(255, 128, 128, .1)',
          //       borderWidth: 12
          //     }
          //   },
          //   data: [-6.4, 0.1, 6.6, 11.2, 42.1, 26.0, 20.2, 18.31, 21.59, 24.42, 34.03, 32.9]
          // },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }, 3000)
  }

  render() {

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