ant echarts条形图使用
时间: 2023-06-21 20:06:54 浏览: 103
Ant Design 是一个非常流行的 React UI 库,而 ECharts 则是一个强大的图表库。下面是一个简单的示例,展示如何在 Ant Design 中使用 ECharts 条形图:
1. 安装 ECharts:
```
npm install echarts --save
```
2. 导入 ECharts 和样式表:
```javascript
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
```
3. 创建一个容器来显示图表:
```javascript
<div id="myChart" style={{ height: 400 }}></div>
```
4. 初始化图表并渲染:
```javascript
const myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption({
title: {
text: '销售统计',
},
tooltip: {},
xAxis: {
data: ['苹果', '香蕉', '橙子', '梨子', '草莓'],
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10],
},
],
});
```
这是一个非常简单的示例,你可以通过 ECharts 的文档和 Ant Design 的文档了解更多信息。
阅读全文