大屏可视化

最新推荐文章于 2024-07-30 10:56:44 发布

【青翼】

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量172

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/wyhwyhwyhs/article/details/139876702

版权

左下角

先拿到数据连接。

使用axios方法获取数据

因大屏可视化图表较多导致后面写起来较困难

进行抽离封装

import React,{useEffect,useState,useRef} from 'react'
import './index.css'
import { getWather } from '../../request'
import * as echarts from 'echarts'
// import electric from '../../images/electric.png'
// import water from '../../images/water.png'
import xz from '../../images/xiaozuo.png'
import xy from '../../images/xiaoyou.png'
function Index() {
  const [option , setOption] = useState({
    legend: {
      icon: 'circle',
      textStyle: {
          color: '#fff' 

      }
    },
    tooltip: {},
    dataset: {
      dimensions: ['product', '教学用水', '安防设备机电', '生态用水', '生活用水'],
      source: [
        { product: '八月', '教学用水': 43.3, '安防设备机电': 85.8, '生态用水': 93.7, '生活用水': 88 },
        { product: '七月', '教学用水': 76, '安防设备机电': 89, '生态用水': 65, '生活用水': 56 },
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
  })
  const eleWaterChart = useRef(null)
  useEffect(()=>{
    const mychart = echarts.init(eleWaterChart.current)
    getWather().then(resp=>{
      let dimensions = resp.data.data.result[0].series.map(item=>{
        return item.name
      })
      dimensions.unshift('product')
      option.dataset.dimensions=dimensions
      let source = resp.data.data.result[0].yAxis.data.map((item,index)=>{
        let inSource = dimensions.slice(1)
        let obj={}
        inSource.forEach((v,i)=>{
          obj[v] = resp.data.data.result[0].series[i].data[index]
        })
        return{
          product:item,
         ...obj
        }
      })
    })
    mychart.setOption(option)
  },[])
  return (
    <div className="right-top-echarts">
      <div className="right-top-top">
      <div className="right-top-left">
        <img src={xz}/>
      </div>
      <div className="right-top-right">
        <img src={xy}/> 
      </div>
      </div>
      <div className='ele-water' ref={eleWaterChart}></div>
    </div>
  )
}

export default Index

写完直接在主页面导入就好了