坐標軸 x、y軸
x 軸和 y 軸都由軸線、刻度、刻度標簽、軸標題四個部分組成。部分圖表中還會有網(wǎng)格線來幫助查看和計算數(shù)據(jù)
普通的二維數(shù)據(jù)坐標系都有x軸和y軸，通常情況下，x軸顯示在圖表底部，y軸顯示在左側(cè)，一般配置如下：
option = {
xAxis: {
// ...
},
yAxis: {
// ...
}};
option = {
xAxis: {
type: 'time',
name: '時間'
// ...
},
yAxis: {
type: 'value',
name: '數(shù)量'
// ...
}
// ...};
當 x 軸（水平坐標軸）跨度很大，可以采用區(qū)域縮放方式靈活顯示數(shù)據(jù)內(nèi)容。
option = {
xAxis: {
type: 'time',
name: '時間'
// ...
},
yAxis: {
type: 'value',
name: '數(shù)量'
// ...
},
dataZoom: [
// ...
]
// ...};
在二維數(shù)據(jù)中，軸也可以有多個。
ECharts 中一般情況下單個 grid 組件最多只能放兩個 x/y 軸，
多于兩個 x/y 軸需要通過配置 offset 屬性
防止同個位置多個軸的重疊。兩個 x 軸顯示在上下，兩個 y 軸顯示在左右兩側(cè)。
option = {
xAxis: {
type: 'time',
name: '銷售時間'
// ...
},
yAxis: [
{
type: 'value',
name: '數(shù)量'
// ...
},
{
type: 'value',
name: '金額'
// ...
}
]
// ...};
軸線 axisLine
軸線兩端的箭頭，軸線的樣式：
option = {
xAxis: {
axisLine: {
symbol: 'arrow',
lineStyle: {
type: 'dashed'
// ...
}
}
// ...
},
yAxis: {
axisLine: {
symbol: 'arrow',
lineStyle: {
type: 'dashed'
// ...
}
}
}
// ...};
刻度axisTick
刻度線的長度，樣式：文章來源：http://www.zghlxwxcb.cn/news/detail-851217.html
option = {
xAxis: {
axisTick: {
length: 6,
lineStyle: {
type: 'dashed'
// ...
}
}
// ...
},
yAxis: {
axisTick: {
length: 6,
lineStyle: {
type: 'dashed'
// ...
}
}
}
// ...};
刻度標簽axisLable
文字對齊方式，自定義刻度標簽內(nèi)容：文章來源地址http://www.zghlxwxcb.cn/news/detail-851217.html
option = {
xAxis: {
axisLabel: {
formatter: '{value} kg',
align: 'center'
// ...
}
// ...
},
yAxis: {
axisLabel: {
formatter: '{value} 元',
align: 'center'
// ...
}
}
// ...};
一定要引入庫
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
一個基礎樹狀圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts Example</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
<style>
#chart {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
// 初始化echarts實例
var myChart = echarts.init(document.getElementById('chart'));
// 定義x軸和y軸的配置
var option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'], // 示例數(shù)據(jù)
},
yAxis: {
type: 'value',
},
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50], // 示例數(shù)據(jù)
}]
};
// 使用配置項顯示圖表
myChart.setOption(option);
</script>
</body>
</html>
到了這里，關于echarts坐標軸、軸線、刻度、刻度標簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
