極客react之Ant Design Pro系列快速入門(八)-- 使用echarts
阿新 • • 發佈:2019-01-25
使用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()}