<!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 data = [
{ name: 'Category A', value: 120 },
{ name: 'Category B', value: 200 },
{ name: 'Category C', value: 150 },
{ name: 'Category D', value: 80 },
{ name: 'Category E', value: 70 }
];
// 提取类别名称和值
var categories = data.map(item => item.name);
var values = data.map(item => item.value);
// 配置项
var option = {
xAxis: {
type: 'category', // x 轴类型，这里使用类别型
data: categories, // x 轴数据
axisLabel: {
rotate: 45, // 旋转 x 轴标签，使其更好地适应
textStyle: {
fontSize: 12 // 设置标签字体大小
}
},
axisTick: {
alignWithLabel: true // 与标签对齐，使标签和刻度对应
}
},
yAxis: {
type: 'value', // y 轴类型，这里使用数值型
// 其他 y 轴配置项可以添加在这里
},
series: [
{
name: 'Example Series',
type: 'bar', // 图表类型，这里使用柱状图
data: values // 柱状图数据
}
// 其他系列配置项可以添加在这里
]
};
// 使用配置项设置图表
myChart.setOption(option);
</script>
</body>
</html>
在这个例子中，通过提取数据中的类别名称和对应的值，将它们分别作为 categories 和 values 配置给了 xAxis 和柱状图的 data 属性。此外，通过 axisTick 的 alignWithLabel: true 配置，使得 x 轴的刻度与标签对齐，更好地表达了类别和值的对应关系。
转载请注明出处：http://www.zyzy.cn/article/detail/5158/ECharts