react 结合 echarts~

index.js

import React, { useState, useEffect } from 'react'
import styles from './index.less';
import { Histogram } from '@/utils/tools/chart'

export default function IndexPage () {
  const [tabName, setTabName] = useState(1);
  const topTitle = [
    { name: '进出入管理', id: 1 },
    { name: '基础信息', id: 2 }
  ]

  const BoxContentData = [
    { name: '空间面积', img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616f7d00fd7338670cf62d6a', Value: 200, unit: 'm³', Details: 'Details', getSocket: 'AMM' },
    { name: '空间高度', img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616f7eccfd7338670cf62d6b', Value: 3.05, unit: '米', Details: 'Details', getSocket: 'AHight' },
    { name: '负责人', img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616f7d00fd7338670cf62d6a', Value: 42, unit: '人', Details: 'Details', detail: '详情', getSocket: 'APeople' },
    { name: '固定人员', img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616f7d00fd7338670cf62d6a', Value: 40, unit: '人', Details: 'Details', detail: '详情', getSocket: 'AFixPeople' },
    { name: '访问客户', img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616f7d00fd7338670cf62d6a', Value: 16, unit: '人', Details: 'Details', detail: '详情', getSocket: 'ACus' },
  ]
  const personnel = [
    {
      name: '公司人员', value: '332', Details: '人',
      img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616d55f9fd7338670cf62d5f'
    },
    {
      name: '访问客户', value: '42', Details: '人',
      img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616d565522a0c614fc192fa1'
    },
    {
      name: '快递人员', value: '71', Details: '人',
      img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616d56a422a0c614fc192fa2'
    },
    {
      name: '外卖人员', value: '40', Details: '人',
      img: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616d56cdb5b1ce441a3d6295'
    }
  ]
  function openSocket (data) {
    dispatch({ type: 'globalModel/getsocketEffect', payload: data });
  }
  function tabClick (data) {
    setTabName(data.id)
  }

  useEffect(() => {
    if (tabName === 1) {
      Histogram('#column');  // 当 tabName 变量发生改变的时候 也执行了 Histogram 这个方法 因为 tabName ===2 的时候没有这个DOM 节点 下次注意！ 所以加个判断
    }
  }, [tabName]);

  return (
    <div className={styles.box}>
      <div className={styles.ContentTop}>
        {
          topTitle.map((data, index) => {
            return (
              <span onClick={() => tabClick(data)} key={index} className={tabName === data.id ? styles.TopTitle : styles.CurrentTopTitle}>
                {data.name}
              </span>
            )
          })
        }
      </div>
      {tabName === 1 ? (
        <div className={styles.personnel}>
          {personnel.map((data, index) => {
            return (
              <div className={styles.Office} key={index}>
                <div className={styles.manageBox}>
                  <img src={data.img} />
                </div>
                <div className={styles.manageValue}>
                  <span className={styles.name}>
                    {data.name}
                  </span>
                  <div className={styles.content}>
                    <span className={styles.value}>{data.value}</span>
                    <span className={styles.Details}>{data.Details}</span>
                  </div>
                </div>
              </div>
            )
          })}
        </div>) : null}
      {tabName === 1 ? (
        <div className={styles.panel} >
          <div id="column" className={styles.chart}>
          </div>
        </div>) : null}
      {tabName === 2 ? (<div className={styles.BoxContent}>
        {BoxContentData.map((data, index) => {
          return (
            <div className={styles.OneBox} key={index}>
              <div className={styles.img}>
                <img src={data.img} />
              </div>
              <div className={styles.title}>
                <span>{data.name}</span>
                <div className={styles.magnitude}>
                  <span className={styles.number}>{data.Value}</span>
                  <span className={styles.unit}>{data.unit}</span>
                </div>
              </div>
              <div onClick={() => DetailsClick(data)} className={styles.detail}>
                {data.detail}
              </div>
            </div>
          )
        })}
      </div>) : null}
    </div>
  );
}

Css

.box {
  box-sizing: border-box;
  width: 310px;
  height: 461px;
  background-size: cover;
  background: url('https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616d389a2ee1bd19ee8adbf1');
  padding-top: 12px;
}

.ContentTop {
  display: flex;
  justify-content: center;
  cursor: pointer;
  width: 283px;
  height: 35px;
  line-height: 35px;
  margin-left: 16px;
  background: #051A31;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
  border-radius: 17px;
  overflow: hidden;

  span {
    flex: 1;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
  }
}

.TopTitle {
  width: 148px;
  height: 35px;
  border-radius: 17px;
  text-align: center;
  color: #fff;
  background-color: #0051AC;
}

.CurrentTopTitle {
  color: #0078FF;
  text-align: center;
  background-color: #000000;
}

.BoxContent {
  display: flex;
  flex-direction: column;
  background: url('https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=616f86b422a0c614fc192faa')100% 100%;
  background-size: cover;
  margin-top: 8px;
  margin-left: 9px;
  width: 288px;
  height: 389px;

  .OneBox {
    position: relative;
    flex: 1;
    display: flex;
  }

  .img {
    margin: 15px 0 0 11px;
    width: 48px;
    height: 48px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .title {
    margin-top: 19px;
  }

  span {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-left: 14px;
  }
}

.magnitude {
  display: flex;

  .unit {
    line-height: 36px;
    font: 14px !important;
    color: #F3FCFF;
  }

}

.detail {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 12px;
  color: #F3FCFF;
}

.number {
  font-size: 24px !important;
  color: #fff;
}

.personnel {
  display: flex;
  flex-wrap: wrap;
  padding: 26px 0 23px 20px;
  width: 100%;
  height: 182px;
  // background-color: pink;
}

.Office {
  display: flex;
  width: 50%;

  img {
    width: 48px;
    height: 48px;
  }
}


.manageValue {
  flex: 1;
  padding-left: 14px;

  .name {
    font-size: 13px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #FFFFFF;
  }

  .value {
    font-size: 24px;
    font-family: Gilroy;
    font-weight: bold;
    color: #F3FCFF;
    text-shadow: 0px 4px 3px rgba(85, 85, 85, 0.22);
  }

  .Details {
    margin-left: 5px;
    font: 14px;
    color: #F3FCFF;
  }
}

.content {
  margin-top: 2px;
}

.panel {
  position: relative;
  width: 311px;
  height: 240px;
  // background-color: pink;
  overflow: hidden;
}

.chart {
  transform: scale(.5) rotate(0);
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
}

Histogram

import * as echarts from 'echarts';
export const Histogram = (data) => {
  let chartDom = document.querySelector(data);
  var myChart = echarts.init(chartDom);

  const ChartData = [
    { name: '公司人员', value: 332 },
    { name: '访问客户', value: 42 },
    { name: '快递', value: 71 },
    { name: '外卖', value: 40 }
  ]
  for (const key in ChartData) {
    if (Object.hasOwnProperty.call(ChartData, key)) {
      const element = ChartData[key];
      console.log(element.name);
    }
  }
  // console.log(keys);
  myChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '0%',
      left: 'center',
      itemWidth: 24,  // 设置宽度
      itemHeight: 24, // 设置高度
      itemGap: 35, // 设置间距
      textStyle: {
        //图例字体大小
        fontSize: 24,
        color: '#fff'
      },
    },
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        radius: ['60%', '70%'],
        avoidLabelOverlap: false,
        color: ['#4999FF', '#2B6DD1', '#F5CC6D', '#DF86F0', '#CAE7F3'],
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '24',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: ChartData
      }
    ]
  })
}