echarts控制x轴和y轴name位置并加轴箭头代码示例
更新时间：2024年01月03日 15:40:59 作者：barry--*/
搞数据展示,很多朋友都会用到免费的echarts,下面这篇文章主要给大家介绍了关于echarts控制x轴和y轴name位置并加轴箭头的相关资料,需要的朋友可以参考下
1.0 未调整前位置
1.1 调整后
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轴标题名称
nameTextStyle:{
lineHeight:30, //标题行高
verticalAlign:'top',//标题位置
},
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轴标题位置
},
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 加上坐标轴箭头
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轴标题名称
nameTextStyle:{
lineHeight:30, //标题行高
verticalAlign:'top',//标题位置
},
//添加箭头
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轴标题位置
},
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
]
}
]
};总结
到此这篇关于echarts控制x轴和y轴name位置并加轴箭头的文章就介绍到这了,更多相关echarts控制name位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
一说到prototype很多人可能第一个想到的是著名的prototype.js框架，当然我们今天说的不是它，而是Javascript中的prototype属性，一般都被翻译为“原型”。这是一个比较特殊的属性，Javascript中的继承一般都依赖这属性实现。2010-08-08
chrome浏览器不支持onmouseleave事件的解决技巧
发现给div加的 onmouseleave事件在chrome 中不起效果，下面与大家分享下具体的解决方法,不会的朋友可以了解下哈，希望对大家有所帮助2013-05-05
兼容Firefox的Javascript XSLT 处理XML文件
这篇文章主要介绍了兼容Firefox的Javascript XSLT 处理XML文件,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了基于BootStrap的前端分页带省略号和上下页效果,需要的朋友可以参考下2017-05-05
栅格就是网格，本文详细的介绍了Bootstrap网页布局网格的原理和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
JavaScript必知必会（二) null 和undefined
这篇文章主要介绍了JavaScript必知必会（二) null 和undefined的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
实现JS拖拽插件主要从六个方面做介绍：一、js拖拽插件的原理，二、根据原理实现的最基本效果，三、代码抽象与优化，四、扩展：有效的拖拽元素，五、性能优化和总结，六、jquery插件化 ,需要的朋友可以参考下2015-08-08
在现代Web应用中,单页面应用（SPA）越来越流行,为了提升用户体验,我们经常需要在不重新加载页面的情况下修改URL,本文将详细介绍如何在不重新加载页面的情况下修改URL,并通过多个示例展示其应用场景,需要的朋友可以参考下2024-11-11
作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域链作简单的介绍，希望能帮助大家更好的学习JavaScript。2014-05-05
本文主要介绍了JavaScript严格模式的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论