antdensign和React写一个echarts后台模版首页

好的，下面是一个基于 React 和 Ant Design 的 echarts 后台模板首页代码：

import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { LineChartOutlined, PieChartOutlined, BarChartOutlined } from '@ant-design/icons';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/grid';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

class Home extends Component {
  componentDidMount() {
    // 初始化折线图
    const lineChart = echarts.init(document.getElementById('line-chart'));
    lineChart.setOption({
      title: {
        text: '折线图示例'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['销售额']
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          type: 'line',
          data: [120, 200, 150, 80, 70, 110, 130]
        }
      ]
    });

    // 初始化饼图
    const pieChart = echarts.init(document.getElementById('pie-chart'));
    pieChart.setOption({
      title: {
        text: '饼图示例'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ]
        }
      ]
    });

    // 初始化柱状图
    const barChart = echarts.init(document.getElementById('bar-chart'));
    barChart.setOption({
      title: {
        text: '柱状图示例'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['销售额']
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: [120, 200, 150, 80, 70, 110, 130]
        }
      ]
    });
  }

  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<LineChartOutlined />}>
              折线图
            </Menu.Item>
            <Menu.Item key="2" icon={<PieChartOutlined />}>
              饼图
            </Menu.Item>
            <Menu.Item key="3" icon={<BarChartOutlined />}>
              柱状图
            </Menu.Item>
            <SubMenu key="sub1" icon={<LineChartOutlined />} title="折线图">
              <Menu.Item key="4">折线图 1</Menu.Item>
              <Menu.Item key="5">折线图 2</Menu.Item>
              <Menu.Item key="6">折线图 3</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>首页</Breadcrumb.Item>
              <Breadcrumb.Item>图表</Breadcrumb.Item>
              <Breadcrumb.Item>折线图</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              <div id="line-chart" style={{ width: 800, height: 400 }}></div>
              <div id="pie-chart" style={{ width: 400, height: 400 }}></div>
              <div id="bar-chart" style={{ width: 800, height: 400 }}></div>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

export default Home;

这个页面包含了一个侧边栏菜单和三个 echarts 图表，分别是折线图、饼图和柱状图。你可以根据自己的需求来修改页面布局和图表数据。