使用echarts
- 安装echarts和react的echarts模块
npm install --save echarts
- 导入echarts
// 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入柱状图 import 'echarts/lib/chart/bar'; // 引入提示框和标题组件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; // 使用样式 import 'echarts/theme/macarons'
- 声明一个echarts节点
getEchartsOfFollowUp() { return (<div id="charts" className={styles.followUpCharts}></div>); }
- 组件完成装载后初始化图表
componentDidMount() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('charts'), "macarons"); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); }
5. 使用
content={this.getEchartsOfFollowUp()}