react引入echarts 百度地图

首先，需要在你的index.html模板页面头部加载百度地图JavaScript API代码，密钥可去百度地图开放平台官网申请

然后，使用npm方式安装react组件库，然后通过es模块加载

npm install react-bmapgl --save npm install echarts --save

import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import './Home.scss'
import { useNavigate } from 'react-router-dom'
//饼图
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/grid' 
 
export default function Home() {
  
  const state = useSelector(state => state)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  useEffect(() => {
    initMap()
  }, [])
  const initMap = () => {
    const map = new window.BMapGL.Map('map')
    const myGeo = new window.BMapGL.Geocoder()
    let label = '保定'
 
    myGeo.getPoint(label, async (point) => {
      if (point) {
        //4.初始化地图
        map.centerAndZoom(point, 11)
        //5.添加控件
        const scaleCtrl = new window.BMapGL.ScaleControl() //添加比例尺控件
        map.addControl(scaleCtrl)
        const zoomCtrl = new window.BMapGL.ZoomControl()  //添加缩放控件
        map.addControl(zoomCtrl)
        map.setMapStyleV2({
          styleId: 'faf39623c43c28b2555ad8455151d134'
        })
        var cityCtrl = new window.BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);
 
      }
    }, label)
 
  }
 
 
  let [pie, setPie] = useState('')
  const option = {
    title: {
      text: '设备状态',
      left: 'center',
      top:'15'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: '5',
      top:'50',
      data: ['良好', '异常', '警告', '正常']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        center: ['50%', '60%'],
        data: [
          { value: 310, name: '良好' },
          { value: 234, name: '异常' },
          { value: 135, name: '警告' },
          { value: 1548, name: '正常' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 50,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
 
  useEffect(()=>{
    var node = document.getElementById('pie')
    setPie(node)
  },[pie])
  if(pie!==''){
    var myChart=echarts.init(pie)
    myChart.setOption(option)
  }
 
 
  
 
  let [line,setLine]=useState('')
  const opt2={
    title: {
      text: '实时功耗',
      left: 'center',
      top:'15'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
      }
    ]
  };
 
  useEffect(()=>{
    var linenode=document.getElementById('line')
    setLine(linenode)
  },[line])
  if(line!==''){
    var myChart2=echarts.init(line)
    myChart2.setOption(opt2)
 
  }
 
 
  let [round,setRound]=useState('')
  const opt3={
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  };
 
  useEffect(()=>{
    var roundnode=document.getElementById('round')
    setRound(roundnode)
  },[round])
  if(round!==''){
    var myChart3=echarts.init(round)
    myChart3.setOption(opt3)
 
  }
 
 
 
 
  return (
    <div className='container1' style={{ backgroundImage: 'url(img/bg.jpg)' }}>
      {/* title */}
      <div className="title" style={{ backgroundImage: 'url(img/top_title.png)', backgroundSize: 'cover' }}>
 
        <div style={{ color: '#fff', width: '25%', lineHeight: '60px', textAlign: 'end' }}>2023-07-04 11:11</div>
 
        <div style={{ color: '#fff', width: '50%', fontSize: '30px', fontWeight: 'bolder', lineHeight: '80px', textAlign: 'center' }}>
          智慧照明综合管理平台
        </div>
 
        <div style={{ color: '#fff', width: '20%', lineHeight: '45px' }}>
          <button style={{ border: '0', background: 'RGB(40,133,255)', color: '#fff', height: '30px', width: '80px', borderRadius: '5px' }}>进入控制台</button>
        </div>
 
        <div style={{ width: '5%' }}>
          <img src="img/nav_icon.png" style={{ width: '50%' }} alt="" />
        </div>
      </div>
      <div className="content">
        {/* 左侧 */}
        <div className="left">
          <div id='pie' className="left-item" style={{ backgroundImage: 'url(img/content_bj.png)', backgroundSize: 'cover' }}>
 
          </div>
          <div id='line' className="left-item" style={{ backgroundImage: 'url(img/content_bj.png)', backgroundSize: 'cover' }}>
 
          </div>
          <div id='round' className="left-item" style={{ backgroundImage: 'url(img/content_bj.png)', backgroundSize: 'cover' }}>
 
          </div>
        </div>
        {/* 地图 */}
        <div id="map">
 
        </div>
        {/* 右侧 */}
        <div className="right">
          <div id='leida' className="right-item" style={{ backgroundImage: 'url(img/content_bj.png)', backgroundSize: 'cover' }}>
 
          </div>
          <div id='zhu' className="right-item" style={{ backgroundImage: 'url(img/content_bj.png)', backgroundSize: 'cover' }}>
 
          </div>
          <div id='bb' className="right-item" style={{ backgroundImage: 'url(img/content_bj.png)', backgroundSize: 'cover' }}>
 
          </div>
        </div>
      </div>
 
 
    </div>
  )
}
 
 
 
 
.container1{
    width: 100%;
    height: 100%;
    .title{
        height: 80px;
        width: 100%;
        display: flex;
    }
    .content{
        width: 100%;
        display: flex;
        .left{
            flex:20%;
            padding: 10px 10px;
            box-sizing: border-box;
            .left-item{
                width: 100%;
                height: 200px;     
            }
        }
        #map{
            flex: 50%;
           
            
           
        }
        .right{
            flex: 20%;
            padding: 10px 10px ;
            box-sizing: border-box;
            .right-item{
                width: 100%;
                height: 200px;  
            }
        }
    }
}

//边框布局

import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import './Home.scss'
import { useNavigate } from 'react-router-dom'
//饼图
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/grid' 
// import '../../src/icomoon.css'

export default function Home() {
  const [arr1,setArr1]=useState([
    {id:1,name:'故障设备监控'},
    {id:2,name:'异常设备监控'},
  ])
  const [active1,setActive1]=useState(0)

  function changeTab(index){
    setActive1(index)

  }
  
  return (
    <div className='container1' style={{ backgroundImage: 'url(img/bg.jpg)' }}>
      <div className="title" style={{backgroundImage:'url(img/top_title.png',backgroundSize:'cover'}}>
         立可得 智能看板
      </div>
      <div className="content">
        {/* 左 */}
        <div className="column left">
          <div className="panel overview" >
              <div className="inner">
                <div className="item">
                  <div className="num">
                      2,190
                  </div>
                  <div className="word">
                    <div style={{width:'5px',height:'13px',background:'skyblue',marginRight:'10px'}}></div>
                    设备总数
                  </div>
                </div>
                <div className="item">
                  <div className="num">
                      190
                  </div>
                  <div className="word">
                  <div style={{width:'5px',height:'13px',background:'yellow',marginRight:'10px'}}></div>
                    季度新增
                  </div>
                </div>
                <div className="item">
                  <div className="num">
                      3,001
                  </div>
                  <div className="word">
                  <div style={{width:'5px',height:'13px',background:'green',marginRight:'10px'}}></div>
                    运营设备
                  </div>
                </div>
                <div className="item">
                  <div className="num">
                      108
                  </div>
                  <div className="word">
                  <div style={{width:'5px',height:'13px',background:'red',marginRight:'10px'}}></div>
                    异常设备
                  </div>
                </div>
              </div>
          </div>
          <div className="panel moniter">
              <div className="inner">
                {/* tab */}
                <div className="tabs">
                  {
                    arr1.map((item,index)=>(
                      <div className={index==active1?'error-active':'error'} key={index} onClick={()=>{changeTab(index)}}>
                        {item.name}
                      </div>
                    ))
                  }  
                </div>
                {/* tab切换 */}
                {
                  active1==0?(
                    <div className="content1">
                  <div className="head">
                    <div className='h1'>故障时间</div>
                    <div className='h2'>故障地址</div>
                    <div className='h3'>故障代码</div>
                  </div>
                  <div className="sweper">
                    <ul>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                        <li><div>20210423</div><div>传智教育黑马程序员广州校区前端与移动开发63期</div><div>200001</div></li>
                    </ul>
                  </div>
                </div>
                  ):(
                    <div className="content1">
                    <div className="head">
                      <div className='h1'>故障时间</div>
                      <div className='h2'>故障地址</div>
                      <div className='h3'>故障代码</div>
                    </div>
                    <div className="sweper">
                      <ul>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>
                        <li><div>20210623</div><div>广东省广州市天河区珠吉路津安创意园2楼204</div><div>211001</div></li>    
                      </ul>
                    </div>
                  </div>
                  )
                }
              </div>
          </div>
          <div className="panel point">
              <div className="inner">
              
              </div>

          </div>

        </div>
        {/* 中 */}
        <div className="column middle">
            <div className="panel map">
               <div className="inner">
                
               </div>
            </div>
            <div className="panel ele">
              <div className="inner">

              </div>
            </div>

        </div>
        {/* 右 */}
        <div className="column right">
          <div className="panel order">
            <div className="inner">

            </div>
          </div>
          <div className="panel sale">
            <div className="inner">

            </div>
          </div>
          <div className="panel sale">
            <div className="inner">

            </div>
          </div>
          <div className="panel sale">
            <div className="inner">

            </div>
          </div>



        </div>
      </div>
      

    </div>
  )
}

.container1{
    width: 100%;
    // height: 100%;  //注意别定高度 由内容撑开
    box-sizing: border-box;
    .title{
        height: 100px;
        width: 100%;
        color: rgb(85, 164, 234);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
    }

    .content{
        width: 100%;
        display: flex;
        // box-sizing: border-box;
        
        .left{
            // width: 450px;
            flex:0.28;
            .panel{
                border: 20px solid red;    
                border-image: url('../../public/img/border.png');
                border-image-slice: 50 38 20 126;
                border-width: 50px 38px 20px 126px;   
                border-image-repeat: stretch;
                position: relative;
                box-sizing: border-box;
                .inner{
                    position: absolute;
                    width: 412px;  //手动调整
                    left:-126px;
                    top:-50px;
                    right: -38px;
                    bottom: -20px;
                    padding: 20px 30px;
                }
            }
            .overview{
                width: 100%;
                height: 108px; 
                margin: 0 10px;
                .inner{
                    display: flex;
                    color:azure;
                    .item{
                        flex: 1;
                        .num{
                            font-size: 25px;
                            text-align: center;
                        }
                        .word{
                            margin-top: 10px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: rgb(38, 149, 240);
                        }
                    }
                }
                   
            }

            .moniter{
                width: 100%;
                height: 475px;  
                margin-top: 15px;
                margin: 15px 10px 0px 10px;
                .tabs{
                    height: 30px;
                    display: flex;
                    .error{
                        flex: 0.45;
                        height: 30px;
                        color: rgb(25, 98, 234);
                        // text-align: center;
                        line-height: 30px;
                        font-size: 20px;
                        margin-right: 20px;
                    }
                    .error-active{
                        flex: 0.45;
                        height: 30px;
                        color: aliceblue;
                        // text-align: center;
                        line-height: 30px;
                        border-right: 2px solid rgb(19, 175, 253);
                        font-size: 20px;
                        margin-right: 20px;
                    }
                }

                .content1{
                    color: aliceblue;
                    .head{
                        height: 40px;
                        display: flex;
                        color:#68d8fe;
                        .h1{
                            flex:0.25;
                            height: 40px;
                            line-height: 40px;
                        }
                        .h2{
                            flex:0.5;
                            height: 40px;
                            line-height: 40px;
                        }
                        .h3{
                            flex:0.25;
                            height: 40px;
                            line-height: 40px;
                        }   
                    }

                    .sweper{
                        margin-top: 10px;
                        height: 390px;
                        /* 父相 */
                        position: relative;
                        /* 超出的内容隐藏 */
                        overflow: hidden;
                        ul{
                            /* 子绝 */
                            position: absolute;
                            li{
                                height: 35px;
                                line-height: 35px;
                                color:#5696e5;
                                display: flex;
                                div:nth-child(1){
                                    width: 20%;
                                }
                                div:nth-child(3){
                                    width: 20%;     
                                }
                                div:nth-child(2){
                                    width: 50%;
                                    /* 超出的文字显示省略号 */
                                    /* 1.禁止换行 */
                                    white-space: nowrap;
                                    /* 2.超出隐藏 */
                                    overflow: hidden;
                                    /* 3.设置隐藏的部分为省略号 */
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                   
                }
                 
            }

            .point{
                width: 100%;
                height: 335px; 
                margin: 15px 10px 0px 10px;    
            }
           
            
        }
        .middle{
            flex:0.4;
            .panel{
                border: 20px solid red;    
                border-image: url('../../public/img/border.png');
                border-image-slice: 50 38 20 126;
                border-width: 50px 38px 20px 126px;   
                border-image-repeat: stretch;
                position: relative;
                box-sizing: border-box;
                .inner{
                    position: absolute;
                    left:-126px;
                    top:-50px;
                    right: -38px;
                    bottom: -20px;
                    padding: 20px 30px;
                }
            }
            .map{
                width: 100%;
                height: 603px;  
                margin: 0px 30px;
                

            }

            .ele{
                width: 100%;
                height: 335px; 
                margin: 15px 30px 0px 30px;
               

            }
            
        }
        .right{
            // width: 450px;
            flex:0.28;
            .panel{
                border: 20px solid red;    
                border-image: url('../../public/img/border.png');
                border-image-slice: 50 38 20 126;
                border-width: 50px 38px 20px 126px;   
                border-image-repeat: stretch;
                position: relative;
                box-sizing: border-box;
                .inner{
                    position: absolute;
                    width: 100%;
                    left:-126px;
                    top:-50px;
                    right: -38px;
                    bottom: -20px;
                    padding: 20px 30px;
                }
            }
            .order{
                width: 100%;
                height: 154px; 
                margin: 0px 50px;
            }

            .sale{
                width: 100%;
                height: 244px; 
                margin: 15px 50px 0px 50px;  
            }
            
           
        }
        
    }
    
}