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

您可能感兴趣的文章:

小程序实现日历效果
这篇文章主要为大家详细介绍了小程序实现日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
swiper动态改变滑动内容的实现方法
假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1。下面通过实例代码给大家讲解swiper动态改变滑动内容的实现方法，感兴趣的朋友一起看看吧
2018-01-01
JS将制定内容复制到剪切板示例代码
这篇文章主要介绍了JS将制定内容复制到剪切板的方法,需要的朋友可以参考下
2014-02-02
wufengteam core统一中心注册器功能解析
这篇文章主要为大家介绍了wufengteam core统一中心注册器功能解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
浅谈JavaScript原型链
这篇文章主要为大家详细介绍了JavaScript原型链，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2023-04-04
实例代码详解javascript实现窗口抖动及qq窗口抖动
这篇文章主要介绍了实例代码详解javascript实现窗口抖动及qq窗口抖动的相关资料,需要的朋友可以参考下
2016-01-01
js将网址转为urlencode类型
网址urlencode加密函数，主要用于中文目录
2008-06-06
JS实现旋转木马轮播案例
这篇文章主要为大家详细介绍了JS实现旋转木马轮播案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
JavaScript接入百度地图API的方法步骤
在网站开发过程中，经常会调用到地图，百度地图JavaScript API可帮助您在网站中构建功能丰富、交互性强的地图应用，本文就详细的介绍一下，感兴趣的可以了解一下
2021-07-07
微信小程序实现简单计算器与秒表
这篇文章主要为大家详细介绍了微信小程序实现简单计算器与秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09