Ant Design 中引入echarts

超、凢脫俗 2022-05-10 18:28 674阅读 0赞

首先在Ant Design项目上安装 echarts 相关的包：

npm install echarts --save
    npm install echarts-for-react --save

安装结果如下图所示：![70][]

然后项目里就可以引入相关的包了：

import ReactEcharts from 'echarts-for-react';
    
    //引入echarts主模块
    import echarts from 'echarts/lib/echarts';
    // 引入柱状图
    import 'echarts/lib/chart/bar';
    // 引入标题和提示框
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';

最后贴出柱状图完整文件代码：

import React from 'react';
    import ReactEcharts from 'echarts-for-react';
    
    //引入echarts主模块
    import echarts from 'echarts/lib/echarts';
    // 引入柱状图
    import 'echarts/lib/chart/bar';
    // 引入标题和提示框
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    // 引入图表卡片
    import {ChartCard} from '../../components/Charts';
    
    var dataSet=[10,15,30,20];
    
    export default class Echart extends React.Component {
    	
    	constructor(props) {
    		super(props);
    	}
    
    	componentDidMount=()=>{
    		// 图表显示容器
    		let el=document.getElementById("main");
    		// 图表初始化
    		let myChart=echarts.init(el);
    		
    		setInterval(()=>{
    
    			var dataSet1=dataSet.map(function(ele){
    				return Math.random(20)*ele;
    			})
    
    			// 图表配置项
    			let option={
    				title:{
    					text:'柱状图',
    					subtext:'销量统计'
    				},
    				xAxis:{
    					data:["河北","河北","山西","广州"]
    				},
    				yAxis:{
    					gridIndex:0,
    					min:0,
    					max:30,
    					interval:5
    				},
    				series:[{
    					name:'销量',
    					type:'bar',
    					data:dataSet1
    				}],
    				legend:{
    					show:true,
    					data:[{
    						name:'销量',
    						icon:'circle'
    					}]
    				}
    			}		
    
    			// 进行图表配置
    			myChart.setOption(option);
    
    		},1000);
    	}
    
    	render() {
    		return (
    			<div>
    				<div id="main" style={
       {width:'80%',height:400}}></div>
    			</div>
    		);
    	}
    }

最后放出echarts官网地址：  
[http://www.echartsjs.com/index.html][http_www.echartsjs.com_index.html]

[70]: /images/20220505/23078466ce0e443ca027fea82f2125de.png
[http_www.echartsjs.com_index.html]: http://www.echartsjs.com/index.html