脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → echarts控制name位置

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位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js实现的网页颜色代码表全集

    js实现的网页颜色代码表全集

    js实现的网页颜色代码表全集...
    2007-07-07
  • JavaScript设计模式之策略模式详解

    JavaScript设计模式之策略模式详解

    这篇文章主要为大家详细介绍了JavaScript设计模式之策略模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 利用HTML与JavaScript实现注册页面源码

    利用HTML与JavaScript实现注册页面源码

    这篇文章主要给大家介绍了关于利用HTML与JavaScript实现注册页面的相关资料,文中通过代码介绍的非常详细,对大家实现注册页面具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • JS实现的对象去重功能示例

    JS实现的对象去重功能示例

    这篇文章主要介绍了JS实现的对象去重功能,结合实例形式分析了javascript针对json对象的遍历、判断、运算实现去重功能相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • 兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现

    兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现

    其中对于IE的检测很有意思。 以上代码，整理自Extjs的脚本，完全可以代替 Ext.onReady使用。
    2009-07-07
  • 详解如何快速配置webpack多入口脚手架

    详解如何快速配置webpack多入口脚手架

    这篇文章主要介绍了详解如何快速配置webpack多入口脚手架，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • JavaScript中将其他类型的值转换为字符串的方法及规则详解

    JavaScript中将其他类型的值转换为字符串的方法及规则详解

    在JavaScript中,将其他类型的值转换为字符串是一个非常常见且重要的操作,理解这些转换规则可以帮助我们避免类型错误、写出更健壮的代码,本文将系统讲解各种基本类型如何转换为字符串,需要的朋友可以参考下
    2025-07-07
  • 微信小程序实战项目之富文本编辑器实现

    微信小程序实战项目之富文本编辑器实现

    富文本在Web开发上的地位大家可想而知,很多地方都需要用到富文本编辑器,比如开发类似新闻管理小程序、商品简介等,下面这篇文章主要给大家介绍了关于微信小程序实战项目之富文本编辑器实现的相关资料,需要的朋友可以参考下
    2022-10-10
  • JavaScript详解类数组与可迭代对象的实现原理

    JavaScript详解类数组与可迭代对象的实现原理

    这篇文章主要介绍了JavaScript详解类数组与可迭代对象的实现原理，ES6中引入了迭代器与可迭代对象的概念，并且提供了对可迭代对象的相关支持，如for...of循环，Map(iterable)构造器，展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化
    2022-06-06
  • 再谈javascript图片预加载技术(详细演示)

    再谈javascript图片预加载技术(详细演示)

    由于javascript无法获取img文件头数据，必须等待其加载完毕后才能获取真实的大小，所以lightbox类效果为了让图片居中显示，导致其速度体验要比直接输出的差很多。
    2011-03-03

最新评论