Ant Design引入Echarts

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

进入ant-design-pro目录，比如我的：/Users/rongsong/Downloads/ant-design-pro-1

终端执行以下命令：

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

2.在项目里就可以引入相关的包了

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';

3.示例代码

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>
        );
    }
}

4.运行结果

Ant Design引入Echarts