首先在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