后台数据连接图表渲染

先封装axios 写入

axios.defaults.baseURL="http://localhost:3002"是 Axios 库中用于设置默认基础 URL 的属性。Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送请求。

通过设置 axios.defaults.baseURL，你可以将所有的请求 URL 以该基础 URL 为前缀，从而简化代码，避免在每个请求中重复输入基础部分的 URL。

例如：

import axios  from "./axios";
export const getWerthe=()=>axios({
    method:"GET",
    url:"/v1.0/api/intelligentDetection/dataTop"

})

前台写入

import React, { useState, useEffect, useRef } from 'react'
import * as echarts from 'echarts';

引入后台 的数据
import { getWerthe } from '../../request';

function Index() {

引入图表的数据
  var [option, setOption] = useState(
    {
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          // ['product', '2015', '2016', '2017','2018'],
          ['Matcha Latte', 43.3, 85.8, 93.7],
          ['Milk Tea', 83.1, 73.4, 55.1],
          ['Cheese Cocoa', 86.4, 65.2, 82.5],
          ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    }
  )

页面监听

使用useRef可以实现以下几个常见的用途：

1. 访问DOM元素：通过将ref属性附加到DOM元素上，可以通过ref.current来访问该DOM元素。

2. 保存组件内部的可变值：与useState不同，useRef的值可以在重新渲染时保持不变。

3. 触发组件中的副作用：通过搭配useEffect使用，可以在组件渲染后执行一些副作用操作，而不需要依赖于组件的状态或属性。

  let eachteBox = useRef(null)
  useEffect(() => {
    var myChart = echarts.init(eachteBox.current);

连接后台数据进行渲染

    getWerthe().then(res => {

渲染图表的头部

      let ktype = res.data.data.result[0].series.map((item, index) => {
        return item.name
      })
      ktype.unshift('product')
      console.log(ktype);

渲染图表的主体
      let sroces = res.data.data.result[0].yAxis.data.map((item, index) => {
        let kk = ktype.slice(1)
        let obj = {}
        kk.forEach((v, i) => {
          obj[v]=res.data.data.result[0].series[i].data[index]
        })
        return {
          title: item,
          ...obj
        }

      })
      console.log(res.data.data.result[0].series[1],'1111');
      console.log(sroces);

      option.dataset.source = sroces
      setOption(option)
       myChart.setOption(option)
    })

    myChart.setOption(option);
  }, [option])
  return (

写图表必须写style样式写宽高
    <div ref={eachteBox} style={{ width: "500px", height: "400px" }}>
      
    </div>
  )
}