标签：const material console react theme ui import echarts

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>
  );
}

标签：const,material,console,react,theme,ui,import,echarts
来源： https://blog.csdn.net/qq_27361945/article/details/115150697

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。