Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置整理大全
更新時(shí)間：2022年11月11日 15:29:50 作者：sleepwalker_1992
直角坐標(biāo)系的設(shè)置指的是網(wǎng)格,坐標(biāo)軸和區(qū)域縮放的配置,下面這篇文章主要給大家介紹了關(guān)于Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置的相關(guān)資料,需要的朋友可以參考下
1、Echarts版本
"echarts": "^5.3.3",
2、最簡(jiǎn)單的直角坐標(biāo)系，以柱狀圖為例。
常見(jiàn)的直角坐標(biāo)系，x軸設(shè)置type: 'category'，為類目軸，適用于離散的類目數(shù)據(jù)；y軸設(shè)置type: 'value'，為數(shù)值軸，適用于連續(xù)數(shù)據(jù)。
<template>
<div ref="barChart" class="chart-content">暫無(wú)數(shù)據(jù)</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'bar',
data() {
return {};
},
mounted() {
this.draw();
},
methods: {
draw() {
this.chart = echarts.init(this.$refs.barChart);
var option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
this.chart.setOption(option);
},
},
};
</script>
<style scoped>
.chart-content {
width: 600px;
height: 400px;
box-sizing: border-box;
border: 1px solid #ccc;
}
</style>渲染結(jié)果：
3、坐標(biāo)軸名稱相關(guān)設(shè)置
name: '時(shí)間', // 坐標(biāo)軸名稱
nameLocation: 'end', // 坐標(biāo)軸名稱顯示位置，可取值'start'、'middle' 或 'center'、'end'
// 坐標(biāo)軸名稱文字樣式設(shè)置
nameTextStyle: {
color: '#d46c89',
fontWeight: 'bold',
fontSize: '16px',
},
nameGap: 20, // 坐標(biāo)軸名稱與軸線之間的距離，默認(rèn)值15
nameRotate: 30, // 坐標(biāo)軸名稱旋轉(zhuǎn)，角度值只設(shè)置x軸，渲染效果：
4、坐標(biāo)軸軸線相關(guān)設(shè)置
// 坐標(biāo)軸軸線相關(guān)設(shè)置
axisLine: {
show: true, // 是否顯示坐標(biāo)軸軸線
symbol: ['none', 'arrow'], // 軸線兩邊的箭頭，none表示沒(méi)有箭頭，arrow表示有箭頭，可取值為字符串或長(zhǎng)度為2的數(shù)組：默認(rèn)不顯示箭頭 'none'。兩端都顯示箭頭 'arrow'，只在末端顯示箭頭 ['none', 'arrow']
symbolSize: [15, 20], // 軸線兩邊的箭頭的大小，第一個(gè)數(shù)字表示寬度（垂直坐標(biāo)軸方向），第二個(gè)數(shù)字表示高度（平行坐標(biāo)軸方向）,默認(rèn)值[10, 15]。
symbolOffset: 20, // 軸線兩邊的箭頭的偏移，如果是數(shù)組，第一個(gè)數(shù)字表示起始箭頭的偏移，第二個(gè)數(shù)字表示末端箭頭的偏移；如果是數(shù)字，表示這兩個(gè)箭頭使用同樣的偏移。
// 坐標(biāo)軸軸線樣式設(shè)置
lineStyle: {
color: '#21a6e6',
width: 2,
type: 'dashed',
}
},x軸y軸都設(shè)置，渲染效果：
5、坐標(biāo)軸刻度相關(guān)設(shè)置
// 坐標(biāo)軸刻度相關(guān)設(shè)置
axisTick: {
show: true, // 是否顯示坐標(biāo)軸刻度。
interval: 0, // 坐標(biāo)軸刻度的顯示間隔，在類目軸中有效。不設(shè)置時(shí)默認(rèn)同 axisLabel.interval 一樣。設(shè)置成 0 強(qiáng)制顯示所有標(biāo)簽。如果設(shè)置為 1，表示『隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽』，如果值為 2，表示隔兩個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽，以此類推。
inside: true, // 默認(rèn)值false。true 表示坐標(biāo)軸刻度朝內(nèi)，false 表示坐標(biāo)軸刻度朝外
// 坐標(biāo)軸刻度樣式設(shè)置
lineStyle: {
color: '#d96c67',
width: 6,
}
},只設(shè)置X軸，渲染效果：
6、坐標(biāo)軸刻度標(biāo)簽相關(guān)設(shè)置
axisLabel: {
show: true, // 是否顯示坐標(biāo)軸刻度標(biāo)簽。
interval: 0, // 坐標(biāo)軸刻度標(biāo)簽的顯示間隔，在類目軸中有效。設(shè)置成 0 強(qiáng)制顯示所有標(biāo)簽，如果設(shè)置為 1，表示『隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽』，如果值為 2，表示隔兩個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽，以此類推
inside: false, // 默認(rèn)值false。true 表示坐標(biāo)軸刻度標(biāo)簽朝內(nèi)，false 表示坐標(biāo)軸刻度標(biāo)簽朝外
rotate: 30, // 刻度標(biāo)簽旋轉(zhuǎn)的角度，旋轉(zhuǎn)的角度從 -90 度到 90 度
margin: 20, // 刻度標(biāo)簽與軸線之間的距離
color: '#d46c89', // 刻度標(biāo)簽文字的顏色。不設(shè)置就默認(rèn)取 axisLine.lineStyle.color，即與軸線顏色一樣
},只設(shè)置x軸，渲染效果：
7、設(shè)置某個(gè)類目標(biāo)簽的文字樣式
type: 'category',
data: [{ // 類目數(shù)據(jù)，在類目軸（type: 'category'）中有效
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日'],
8、坐標(biāo)軸指示器相關(guān)設(shè)置
直線指示器
axisPointer: {
show: true, // 默認(rèn)不顯示。但是如果 tooltip.trigger 設(shè)置為 'axis' 或者 tooltip.axisPointer.type 設(shè)置為 'cross'，則自動(dòng)顯示 axisPointer。坐標(biāo)系會(huì)自動(dòng)選擇顯示哪個(gè)軸的 axisPointer，也可以使用 tooltip.axisPointer.axis 改變這種選擇
type: 'line', // 'line' 直線指示器,'shadow' 陰影指示器,'none' 無(wú)指示器
// 坐標(biāo)軸指示器的文本標(biāo)簽設(shè)置
label: {
show: true, // 是否顯示文本標(biāo)簽。如果 tooltip.axisPointer.type 設(shè)置為 'cross' 則默認(rèn)顯示標(biāo)簽，否則默認(rèn)不顯示
color: 'red',
backgroundColor: '#999',
},
// type: 'line'時(shí)坐標(biāo)軸指示器線的設(shè)置
lineStyle: {
color: 'orange', // 線的顏色
width: 3, // 線的寬度
},
}只設(shè)置X軸，鼠標(biāo)懸浮上去渲染效果：
陰影指示器
axisPointer: {
show: true, // 默認(rèn)不顯示。但是如果 tooltip.trigger 設(shè)置為 'axis' 或者 tooltip.axisPointer.type 設(shè)置為 'cross'，則自動(dòng)顯示 axisPointer。坐標(biāo)系會(huì)自動(dòng)選擇顯示哪個(gè)軸的 axisPointer，也可以使用 tooltip.axisPointer.axis 改變這種選擇
type: 'shadow', // 'line' 直線指示器,'shadow' 陰影指示器,'none' 無(wú)指示器
// 坐標(biāo)軸指示器的文本標(biāo)簽設(shè)置
label: {
show: true, // 是否顯示文本標(biāo)簽。如果 tooltip.axisPointer.type 設(shè)置為 'cross' 則默認(rèn)顯示標(biāo)簽，否則默認(rèn)不顯示
color: 'red',
backgroundColor: '#999',
},
// type: 'shadow'時(shí)坐標(biāo)軸指示器填充區(qū)域的設(shè)置
shadowStyle: {
color: 'orange', // 填充的顏色
opacity: 0.4,
},
}只設(shè)置X軸，鼠標(biāo)懸浮上去渲染效果：
9、實(shí)現(xiàn)坐標(biāo)軸刻度線和標(biāo)簽對(duì)齊
boundaryGap: true, // 類目軸中boundaryGap可取值，true或false，默認(rèn)true。
axisTick: {
alignWithLabel: true, // 類目軸中在 boundaryGap 為 true 的時(shí)候有效，可以保證刻度線和標(biāo)簽對(duì)齊。
},只設(shè)置X軸，渲染效果：
10、設(shè)置坐標(biāo)軸最小刻度值、最大刻度值、分割間隔
min: 50, // 坐標(biāo)軸刻度最小值
max: 250, // 坐標(biāo)軸刻度最大值
interval: 40, // 強(qiáng)制設(shè)置坐標(biāo)軸分割間隔只設(shè)置y軸，渲染效果：
11、完整示例
var option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
name: '時(shí)間',
nameGap: 20,
axisLine: {
symbol: ['none', 'arrow'],
symbolOffset: 14,
lineStyle: {
color: '#21a6e6',
width: 2,
type: 'dashed',
}
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: '#d96c67',
width: 6,
}
},
axisLabel: {
interval: 2,
rotate: 30,
margin: 10,
color: '#d46c89',
},
},
yAxis: {
type: 'value',
name: '數(shù)值',
nameGap: 20,
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 14,
lineStyle: {
color: '#21a6e6',
width: 2,
type: 'dashed',
}
},
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
},
]
};渲染效果：
12、更多配置可查看Echarts官網(wǎng)配置項(xiàng)xAxis、yAxis
總結(jié)
到此這篇關(guān)于Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置整理的文章就介紹到這了,更多相關(guān)Echarts直角坐標(biāo)系屬性設(shè)置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要是對(duì)js根據(jù)日期判斷星座的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要介紹了小程序如何定位所在城市及發(fā)起周邊搜索，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
不錯(cuò)的用resizeTo和moveTo兩個(gè)函數(shù)實(shí)現(xiàn)窗口的“打乒乓球”效果
不錯(cuò)的用resizeTo和moveTo兩個(gè)函數(shù)實(shí)現(xiàn)窗口的“打乒乓球”效果...2007-08-08
這篇文章主要介紹了微信小程序?qū)嵱么a段，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
雖然js是基于對(duì)象的，但在很多時(shí)候會(huì)使用到new這個(gè)操作符。2010-12-12
值得學(xué)習(xí)的JavaScript調(diào)試技巧分享
這篇文章主要給大家介紹了一些JavaScript調(diào)試技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要為大家詳細(xì)介紹了js滾動(dòng)條平滑移動(dòng)示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
DVA框架統(tǒng)一處理所有頁(yè)面的loading狀態(tài)
dva 有一個(gè)管理 effects 執(zhí)行的 hook，并基于此封裝了 dva-loading 插件。下面通過(guò)本文給大家分享DVA框架統(tǒng)一處理所有頁(yè)面的loading狀態(tài)，感興趣的朋友一起看看吧2017-08-08
感謝網(wǎng)友“l(fā)iufabin”提出的關(guān)于不支持FF的問(wèn)題，第一個(gè)在FF下經(jīng)過(guò)測(cè)試時(shí)支持的，第二個(gè)中的高度自適應(yīng)不支持，我在網(wǎng)上找了一個(gè)JQUERY的插件2009-05-05
JavaScript實(shí)現(xiàn)Fly Bird小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Fly Bird小游戲的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12