echarts控制x軸和y軸name位置并加軸箭頭代碼示例
更新時(shí)間：2024年01月03日 15:40:59 作者：barry--*/
搞數(shù)據(jù)展示,很多朋友都會(huì)用到免費(fèi)的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)題名稱(chēng)
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)題名稱(chēng)
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript中的prototype屬性實(shí)例分析說(shuō)明
一說(shuō)到prototype很多人可能第一個(gè)想到的是著名的prototype.js框架，當(dāng)然我們今天說(shuō)的不是它，而是Javascript中的prototype屬性，一般都被翻譯為“原型”。這是一個(gè)比較特殊的屬性，Javascript中的繼承一般都依賴(lài)這屬性實(shí)現(xiàn)。2010-08-08
chrome瀏覽器不支持onmouseleave事件的解決技巧
發(fā)現(xiàn)給div加的 onmouseleave事件在chrome 中不起效果，下面與大家分享下具體的解決方法,不會(huì)的朋友可以了解下哈，希望對(duì)大家有所幫助2013-05-05
兼容Firefox的Javascript XSLT 處理XML文件
這篇文章主要介紹了兼容Firefox的Javascript XSLT 處理XML文件,需要的朋友可以參考下2014-12-12
基于BootStrap的前端分頁(yè)帶省略號(hào)和上下頁(yè)效果
這篇文章主要介紹了基于BootStrap的前端分頁(yè)帶省略號(hào)和上下頁(yè)效果,需要的朋友可以參考下2017-05-05
Bootstrap網(wǎng)頁(yè)布局網(wǎng)格的實(shí)現(xiàn)
柵格就是網(wǎng)格，本文詳細(xì)的介紹了Bootstrap網(wǎng)頁(yè)布局網(wǎng)格的原理和實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript必知必會(huì)（二) null 和undefined
這篇文章主要介紹了JavaScript必知必會(huì)（二) null 和undefined的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
實(shí)現(xiàn)JS拖拽插件主要從六個(gè)方面做介紹：一、js拖拽插件的原理，二、根據(jù)原理實(shí)現(xiàn)的最基本效果，三、代碼抽象與優(yōu)化，四、擴(kuò)展：有效的拖拽元素，五、性能優(yōu)化和總結(jié)，六、jquery插件化 ,需要的朋友可以參考下2015-08-08
JavaScript如何在不重新加載頁(yè)面的情況下修改URL
在現(xiàn)代Web應(yīng)用中,單頁(yè)面應(yīng)用（SPA）越來(lái)越流行,為了提升用戶(hù)體驗(yàn),我們經(jīng)常需要在不重新加載頁(yè)面的情況下修改URL,本文將詳細(xì)介紹如何在不重新加載頁(yè)面的情況下修改URL,并通過(guò)多個(gè)示例展示其應(yīng)用場(chǎng)景,需要的朋友可以參考下2024-11-11
本文主要介紹了JavaScript嚴(yán)格模式的相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01