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

/*
 * @Author: dayan_hjm 库存金额
 * @Date: 2023-10-23 09:32:12 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2023-11-28 10:43:30
 */


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

@withRouter

class LeftMenoyView extends Component {
  // 构造函数，组件的实例创建时，最先执行
  constructor(props, context) {
    super(props, context);
    this.store = mod;
    this.state = {
      max1:[],
      year:["碳酸锂","氧化纳",'金属锂',"氢氧化锂"],
      missionsIntensity_arr:[
        {value:0,name:"碳酸锂"},
        {value:0,name:"氧化纳"},
        {value:0,name:'金属锂'},
        {value:0,name:"氢氧化锂"},
      ],
    };
  }

  componentDidMount() {
    this.getUrl()
  }

  async getUrl() {
    let data_style= [{
            value: 25, name: '', itemStyle: {
              normal: {
                // barBorderRadius: 15,
                // borderColor: "rgba(141, 147, 255, 1)",
                // borderWidth: 1,
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(141, 147, 255, 0.3)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(141, 147, 255, 1)', // 100% 处的颜色
                    },
                  ],
                },
              },
            },

          }, {
            value: 33, name: '', itemStyle: {
              normal: {
                // barBorderRadius: 15,
                // borderColor: "rgba(105, 255, 222, 1)",
                // borderWidth: 1,

                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(105, 255, 222, 0.3)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(105, 255, 222, 1)', // 100% 处的颜色
                    },
                  ],
                },
              },
            },

          }, {
            value: 35, name: '', itemStyle: {
              normal: {
                // barBorderRadius: 15,
                // borderColor: "rgba(47, 210, 255, 1)",
                // borderWidth: 1,

                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(47, 210, 255, 0.3)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(47, 210, 255, 1)', // 100% 处的颜色
                    },
                  ],
                },
              },
            },

          }, {
            value: 40, name: '', itemStyle: {
              normal: {
                // barBorderRadius: 15,
                // borderColor: "rgba(255, 206, 0, 1)",
                // borderWidth: 1,

                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255, 206, 0, 0.3)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 206, 0, 1)', // 100% 处的颜色
                    },
                  ],
                },
              },
            },

          }]
    await momeyService().then(({ data = [], resultCode }) => {
      
      if (+resultCode === 0) {
        let year = [], missionsIntensity_arr = [],max1=[],num=[];
        data.map((x, i) => {
          num.push(x.indexValue)
          year.unshift(x.prodCatgory);
          data_style[i].value = x.indexValue;
          data_style[i].name = x.prodCatgory;
          missionsIntensity_arr.push(data_style[i])
        });
        const max_1 = getArrMax(num);
        for (let index = 0; index < data.length; index++) {
          max1.unshift(max_1/0.7)
        }
        console.log("year, missionsIntensity_arr,max1",year, missionsIntensity_arr,max1)
        this.setState({ year, missionsIntensity_arr,max1 });
        this.setData();
        this.setData2();
      }
    });

  }


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

        grid: {
          left: '0%',
          top: '4%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          show: false,
        }],
        yAxis: [{
          axisTick: 'none',
          axisLine: 'none',
          offset: '7',
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,.9)',
              fontSize: '0',
            }
          },
          data: this.state.year
        },
        {
          name: '单位：件',
          nameGap: '50',
          nameTextStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '16',
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0)'
            }
          },
          data: [],
        }],
        series: [{
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: this.state.missionsIntensity_arr,
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: function (param) {
                return getThousandNum(param.value) + '万元';
                // return param.name+"："+param.value + '万元';

              },
              textStyle: {
                color: 'rgba(255,255,255,1)',
                fontSize: '10',
              }
            }
          },
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
                { offset: 0.7, color: '#ffd01d94' },
                { offset: 1, color: '#ffd01d94' },
              ]),
              barBorderRadius: 15,
              // borderColor: "rgba(255, 206, 0, 1)",
              // borderWidth: 1
            }
          },
          labelLine: {
            length: 10,
            length2: 50,
          },
          labelLayout: {
            x: "20%",
            y: "20%",
            verticalAlign: "bottom",
            dy: -10,
          },
          z: 2
        }, {
          name: '白框',
          type: 'bar',
          yAxisIndex: 1,
          barGap: '-100%',
          data: this.state.max1,
          barWidth: 15,
          itemStyle: {
            normal: {
              color: '#ffffff24',
              barBorderRadius: 15,

            }
          },
          z: 1
        }]
      };


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }, 3000)
  }

  setData2() {
    setTimeout(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts6'));
      let index = 0;
      function fun() {
        var timer = setInterval(function () {
          myChart.dispatchAction({
            type: 'hideTip',
            seriesIndex: 0,
            dataIndex: index,
          });
          // 显示提示框
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index,
          });
          // 取消高亮指定的数据图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index == 0 ? 3 : index - 1,
          });
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index,
          });
          index++;
          if (index >= 4) {
            index = 0;
          }
        }, 3000);
      }
      fun();
      setTimeout(function () {
        fun();
      }, 5000);
      var option = {
        // //标题
        // title: {
        //   text: '16%',
        //   subtext: '氢氧化锂',
        //   x: 'center',
        //   y: '40%',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 20,
        //     lineHeight: 10,
        //   },
        //   subtextStyle: {
        //     color: 'rgba(205, 241, 255, 1)',
        //     fontSize: 14,
        //     lineHeight: 10,
        //     marginTop: 15,
        //   },
        // },

        //图例组件

        tooltip: {
          trigger: 'item',
          position: ['50%', '50%'],
          formatter: function (params, ticket, callback) {
            // $.get('detail?name=' + params.name, function (content) {
            //   callback(ticket, toHTML(content));
            // });
            return `<div class="testDiv"><p class="p1">
              ${params.percent ? params.percent.toFixed() : 0}<spanp class="p3">%</span>
            </p>
            <p class="p2">${params.name}</p>
            </div>`;
          },
          backgroundColor: 'rgba(0,0,0,0)',

          textStyle: {
            color: '#fff',
            fontSize: 20,
            lineHeight: 10,
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['50%', '50%'],
            roseType: 'area',
            //标题与数字一行显示
            label: {
              show: false,

            },

            //标题与数字分二行显示
            // label: {
            //     alignTo: 'edge',
            //     formatter: '{name|{b}}\n{time|{d}%}',
            //     minMargin: 5,
            //     edgeDistance: 10,
            //     lineHeight: 30,
            //     rich: {
            //         time: {
            //             fontSize: 10,
            //             color: 'auto'
            //         }
            //     }
            // },
            labelLine: {
              show: false
            },
            data: this.state.missionsIntensity_arr,
          },
        ],
      };



      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    }, 3000)
  }

  render() {

    return (
      <div className={["eacharView cbLeftMenoyView"]}>
        <div id="echarts6_box">
          <img
            src={require("@assets/imgs/dataVimg/guanghuan.png").default}
            alt=""
            class="guanghuan animate__animated animate__pulse animate__infinite animate__slower"
          />

          <div id="echarts6"></div>
        </div>
        <ul className={"name_ul"}>
          {
            this.state.year.map(x=>{
              return <li>{x}</li>
            })
          }
        </ul>
        <div id="echarts4"></div>
      </div>
    )
  }
}
export default LeftMenoyView;