ECharts 中如何配置 X 轴和 Y 轴 案例
时间: 2023-03-26 21:02:33 浏览: 96
您好,关于 ECharts 中如何配置 X 轴和 Y 轴,可以通过以下方式进行配置:
1. 首先需要引入 ECharts 库,可以通过以下方式引入:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9./echarts.min.js"></script>
```
2. 创建一个容器来放置图表,例如:
```html
<div id="chart" style="width: 600px;height:400px;"></div>
```
3. 初始化图表,并配置 X 轴和 Y 轴,例如:
```javascript
var chart = echarts.init(document.getElementById('chart'));
var option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
chart.setOption(option);
```
其中,xAxis 表示 X 轴的配置,type 表示 X 轴的类型,可以是 category(类目轴)、value(数值轴)、time(时间轴)等,data 表示 X 轴的数据。
yAxis 表示 Y 轴的配置,type 表示 Y 轴的类型,可以是 value(数值轴)、category(类目轴)、time(时间轴)等。
series 表示系列数据,可以是折线图、柱状图、饼图等。
以上是一个简单的示例,具体的配置可以根据实际需求进行调整。