好的，下面是
一个基于 React 和 Ant Design 的 echarts 后台模板首页代码：
```jsx
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 图表，分别是折线图、饼图和柱状图。你可以根据自己的需求来修改页面布局和图表数据。
1580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
