echars官网：https://www.echartsjs.com/zh/index.html <br/> 下载安装什么的网上一堆，我就不说了，直接总结自己的使用和踩的小坑。 <br/> **一、引入：** ``` import echarts from 'echarts'; ``` 在这里顺便一提，如果想使用echarts的3D图表，那么还有以下两个步骤： ``` npm i echarts-gl ``` ``` import "echarts-gl"; ``` <br/> **二、准备容器：** ``` <div id="graph" style={{width: '100%', height: '500px'}}></div> ``` 然而在这一步我就踩坑了，首先是忘记设置高度，请一定要注意！！！容器一定要有高度，不然你是看不到你的图的。虽然这一步非常简单，然而容易被忽略，以为自己没下好依赖包或是没正确引入。还没完，就在我以为万事大吉的时候，我后来的开发中又遇到一个问题：图表死活没有渲染上去！！！一步一步找问题，最后发现根本没有获取到这个id为graph的标签。虽然没找到这个bug原因，但是后面还是找到了解决方法。就是如果你是基于react开发的话，我建议标签还是这样写： ``` <div ref="graph" style={{width: '100%', height: '500px'}}></div> ``` <br/> **三、图表初始化：** 这一步建议直接封装一个方法，因为后面操作图表，用的地方会很多。 ``` // 图表初始化函数 newGraph() { // 如果用的是ref请用这种方法： let myChart = echarts.init(this.refs.graph); // 如果用的是id请用这种方法： // let myChart = echarts.init(document.getElementById('graph')); // 你的图表数据，单独拿出来是因为后面都要异步请求获取的 let graphData = [120, 200, 150, 80, 70, 110, 130]; // 图表配置项，可以查看官网及官方文档 let option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: graphData, type: 'bar' }] }; // 最后一步，设置option让图表和数据生效 myChart.setOption(option, true); } ``` <br/> **四、异步请求：** 再弄个方法处理异步请求的数据： ``` getData () { axios.get(url).then(res=>{ let data = res.data.data; this.setState({data},()=>{ this.newGraph(); // 数据处理完后调用图表初始化方法 }); }); } ``` 别忘记调用： ``` componentDidMount() { this.getData(); } ``` <br/> **五、父组件传参：** 如果echarts图表是作为子组件引入，而参数是从父组件过来的话，那么还有一步就是利用生命周期componentWillReceiveProps来处理一下参数： ``` componentWillReceiveProps(nextProps) { let startDate = this.props.startDate; let endDate = this.props.endDate; if (nextProps.startDate !== this.props.startDate) { startDate = nextProps.startDate; } if (nextProps.endDate !== this.props.endDate) { endDate = nextProps.endDate; } this.setState({ startDate, endDate, }, () => { this.getData(); }) } ``` 一般这类参数都是异步请求的参数，丢给getData()就行了，其他步骤都一样，也能在父组件处理完数据再传过来，根据需求和实际场景来。