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-10-30 11:24:04
 */


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

@withRouter

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

  componentDidMount() {
    this.setData();
    this.setData2();
  }

  setData() {
    setTimeout(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts4'));
      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
      var option = {

        grid: {
          left: '0%',
          top: '1%',
          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: ['碳酸锂', '氧化纳', '金属锂', '氢氧化钠']
        },
        {
          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: [{
            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% 处的颜色
                    },
                  ],
                },
              },
            },

          }],
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: function (param) {
                return param.value + '万元';
                // return param.name+"："+param.value + '万元';

              },
              textStyle: {
                color: 'rgba(255,255,255,1)',
                fontSize: '12',
              }
            }
          },
          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: [99.5, 99.5, 99.5, 99.5],
          barWidth: 15,
          itemStyle: {
            normal: {
              color: '#ffffff24',
              barBorderRadius: 15,

            }
          },
          z: 1
        }]
      };


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

  setData2() {
    setTimeout(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts6'));
      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',
          formatter: "{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
            //colorLightness: [0, 1]
          }
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['50%', '50%'],
          color: ['rgb(131,249,103)', '#8D93FF', '#2FD2FF', '#FFCE00'], //'#FBFE27','rgb(11,228,96)','#FE5050'
          data: [{
            value: 205,
            name: '直接访问',
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(141, 147, 255, 0.3)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(141, 147, 255, 1)', // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
          {
            value: 310,
            name: '邮件营销',
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(105, 255, 222, 0.3)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(105, 255, 222, 1)', // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
          {
            value: 234,
            name: '联盟广告',
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(47, 210, 255, 0.3)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(47, 210, 255, 1)', // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
          {
            value: 135,
            name: '视频广告学习相',
            itemStyle: {
              normal: {
                barBorderRadius: 15,
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255, 206, 0, 0.3)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 206, 0, 1)', // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
          ],
          roseType: 'radius',

          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }]
      };


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

    }, 200)
  }

  render() {

    return (
      <div className={["eacharView cbLeftMenoyView"]}>
        <div id="echarts6"></div>
        <ul className={"name_ul"}>
          <li>碳酸锂</li>
          <li>氧化纳</li>
          <li>金属锂</li>
          <li>氢氧化钠</li>
        </ul>
        <div id="echarts4"></div>
      </div>
    )
  }
}
export default LeftMenoyView;