<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts X Axis Configuration Example</title>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 用于显示图表的容器 -->
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
xAxis: {
type: 'category', // x 轴类型，这里使用类别型
data: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E'], // x 轴数据
axisLabel: {
rotate: 45, // 旋转 x 轴标签，使其更好地适应
textStyle: {
fontSize: 12 // 设置标签字体大小
}
}
},
yAxis: {
type: 'value', // y 轴类型，这里使用数值型
// 其他 y 轴配置项可以添加在这里
},
series: [
{
name: 'Example Series',
type: 'bar', // 图表类型，这里使用柱状图
data: [120, 200, 150, 80, 70] // 柱状图数据
}
// 其他系列配置项可以添加在这里
]
};
// 使用配置项设置图表
myChart.setOption(option);
</script>
</body>
</html>
在上述示例中，xAxis 配置项用于配置 x 轴。type: 'category' 表示 x 轴是一个类别型轴，data 属性定义了 x 轴上的类别标签。axisLabel 可以用于配置标签的样式，其中 rotate 属性用于旋转标签，以便更好地适应。在这个例子中，标签被旋转了 45 度。
转载请注明出处：http://www.zyzy.cn/article/detail/5157/ECharts