import React, {useRef, useEffect} from 'react';
import {useTheme} from '@material-ui/core/styles';
//import echarts from 'echarts/lib/echarts'; 
import * as echarts from 'echarts';
//let exfn = ()=><div>页面</div>;



export default function() {

    const theme = useTheme();
	const chartRef = useRef();
    console.log(theme);
    useEffect(() => {
		const config = {
	    	xAxis: {
		        type: 'category',
		        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [{
		        data: [120, 200, 150, 80, 70, 110, 130],
		        type: 'bar',
		        showBackground: true,
		        backgroundStyle: {
		            color: 'rgba(180, 180, 180, 0.2)'
		        }
		    }],
	    };
		let chartInstance;
		function renderChart() {
		    const renderedInstance = echarts.getInstanceByDom(chartRef.current);
		    if (renderedInstance) {
		        chartInstance = renderedInstance;
		    } else {
		        chartInstance = echarts.init(chartRef.current);
		    }
		    chartInstance.setOption(config);
		};
	    renderChart();
	    console.log('render');
	    console.log(chartRef.current);
	},[]);
	
	return (
        <div style={{backgroundColor:theme.palette.background,flexGrow:1,color:theme.palette.text.primary}}>
            text
            <div style={{width: 600, height: 400, }}id="z" ref={chartRef}>
                
            </div>
        </div>
	);

};

//export default exfn;

useTheme

https://material-ui.com/zh/styles/advanced/#accessing-the-theme-in-a-component

 

useRef

https://react.docschina.org/docs/refs-and-the-dom.html

 

import * as echarts from 'echarts';

——这是echarts最新版本的语法

 

className

https://react.docschina.org/docs/dom-elements.html#classname

https://material-ui.com/zh/styles/advanced/#accessing-the-theme-in-a-component

 

 

import React from 'react';
import { ThemeProvider, makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    background: theme.background,
    border: 0,
    fontSize: 16,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
}));

function DeepChild() {
  const classes = useStyles();
  console.log("父类名称：",classes);  //父类名称： {root: "makeStyles-root-5"}
  console.log("类名称：",classes.root);//类名称： makeStyles-root-5
  return (
    <button type="button" className={classes.root}>
      Theming
    </button>
  );
}

const themeInstance = {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
};

export default function Theming() {
  return (
    <ThemeProvider theme={themeInstance}>
      <DeepChild />
    </ThemeProvider>
  );
}