在react引入Apache ECharts柱状图表

//快捷方式为rfce

import React,{ useState,useEffect,useRef } from 'react'

//引入图表的头部
import * as echarts from 'echarts'

//引入外部样式App.css
import './App.css'

function App() {

//监听页面
  let cheaBox = useRef(null)
  let [option,setoption]=useState({

//改变头部的颜色和头部的样式为圆形
  legend: {
    icon:"circle",
    textStyle:{color:'#fff'}
  },
  tooltip: {},
  dataset: {
    source: [

//头部为水电图七月八月水电
      ['product', '教学用水', '安全设备通电', '生态用水','生活用水'],
      ['七月', 1433, 1758, 1337,1567],

      ['八月', 1254, 1150, 1680,"1590"],
 
    ]
  },
  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' }]
})
  useEffect(() => {
    var myChart = echarts.init(cheaBox.current);

    option && myChart.setOption(option);
  },)
  return (
    <div className='box'>

//总用电量可用数据进行计算

      <div className='left'>
        用电总量18030
      </div>

//总用水量可用数据进行计算
      <div className='right'>
            用水总量8580
      </div>

//响应式布局 给图表设置样式
      <div ref={cheaBox} style={{ width: "500px", height: "300px" ,background:'#1a1854',float:"left"}}>

      </div>
    </div>
  )
}

export default App