Ant Design 中引入echarts

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

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

安装结果如下图所示：

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

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