echarts控制x軸和y軸name位置并加軸箭頭代碼示例
更新時間：2024年01月03日 15:40:59 作者：barry--*/
搞數(shù)據(jù)展示,很多朋友都會用到免費的echarts,下面這篇文章主要給大家介紹了關(guān)于echarts控制x軸和y軸name位置并加軸箭頭的相關(guān)資料,需要的朋友可以參考下
1.0 未調(diào)整前位置
1.1 調(diào)整后
2.0 代碼：
const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Evaporation', 'Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
name:'月份',//x軸標(biāo)題名稱
nameTextStyle:{
lineHeight:30, //標(biāo)題行高
verticalAlign:'top',//標(biāo)題位置
},
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [
{
type: 'value',
name: '溫度',
nameLocation:'end',
nameTextStyle:{
padding:[0,0,0,-40],//控制y軸標(biāo)題位置
},
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
}
]
};3.0 加上坐標(biāo)軸箭頭
3.2 代碼
const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Evaporation', 'Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
name:'月份',//x軸標(biāo)題名稱
nameTextStyle:{
lineHeight:30, //標(biāo)題行高
verticalAlign:'top',//標(biāo)題位置
},
//添加箭頭
axisLine:{
symbol:['none','path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 '],
symbolOffset:10,//箭頭距離x軸末端距離
symbolSize:[35,38]//箭頭的寬高
},
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [
{
type: 'value',
name: '溫度',
nameLocation:'end',
nameTextStyle:{
padding:[0,0,0,-40],//控制y軸標(biāo)題位置
},
alignTicks: true,
axisLine: {
symbol:['none','path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 '],
symbolSize:[35,38],//箭頭的寬高
symbolOffset:10,//箭頭距離x軸末端距離
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
}
]
};總結(jié)
到此這篇關(guān)于echarts控制x軸和y軸name位置并加軸箭頭的文章就介紹到這了,更多相關(guān)echarts控制name位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一說到prototype很多人可能第一個想到的是著名的prototype.js框架，當(dāng)然我們今天說的不是它，而是Javascript中的prototype屬性，一般都被翻譯為“原型”。這是一個比較特殊的屬性，Javascript中的繼承一般都依賴這屬性實現(xiàn)。2010-08-08
chrome瀏覽器不支持onmouseleave事件的解決技巧
發(fā)現(xiàn)給div加的 onmouseleave事件在chrome 中不起效果，下面與大家分享下具體的解決方法,不會的朋友可以了解下哈，希望對大家有所幫助2013-05-05
兼容Firefox的Javascript XSLT 處理XML文件
這篇文章主要介紹了兼容Firefox的Javascript XSLT 處理XML文件,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了基于BootStrap的前端分頁帶省略號和上下頁效果,需要的朋友可以參考下2017-05-05
Bootstrap網(wǎng)頁布局網(wǎng)格的實現(xiàn)
柵格就是網(wǎng)格，本文詳細(xì)的介紹了Bootstrap網(wǎng)頁布局網(wǎng)格的原理和實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript必知必會（二) null 和undefined
這篇文章主要介紹了JavaScript必知必會（二) null 和undefined的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
實現(xiàn)JS拖拽插件主要從六個方面做介紹：一、js拖拽插件的原理，二、根據(jù)原理實現(xiàn)的最基本效果，三、代碼抽象與優(yōu)化，四、擴展：有效的拖拽元素，五、性能優(yōu)化和總結(jié)，六、jquery插件化 ,需要的朋友可以參考下2015-08-08
在現(xiàn)代Web應(yīng)用中,單頁面應(yīng)用（SPA）越來越流行,為了提升用戶體驗,我們經(jīng)常需要在不重新加載頁面的情況下修改URL,本文將詳細(xì)介紹如何在不重新加載頁面的情況下修改URL,并通過多個示例展示其應(yīng)用場景,需要的朋友可以參考下2024-11-11
本文主要介紹了JavaScript嚴(yán)格模式的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01