Ant Design引入Echarts

绝地灬酷狼 2022-03-02 10:50 770阅读 0赞

**目录**

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

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

3.示例代码

4. 运行结果

--------------------

### **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.运行结果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70]: /images/20220302/37ec1c4442a94e4eb897a322f30a804c.png