VUE之Echarts图表y轴刻度提示文字过长显示为省略号

简介: VUE之Echarts图表y轴刻度提示文字过长显示为省略号

实现方法:
在y轴配置中定义:

yAxis: {
          type: 'value',
          // max: '1200',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          axisTick: {
            show: false// 去除刻度
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#203557'
            }
          },
        triggerEvent: true,
          axisLabel: {
            formatter: param => {
              var template = param .toString()//由于是number类型,所以转字符串
              if (template .length > 3) { // 要显示的字符数
                template = template .substring(0, 3) + '...'//字符串截取
              }
              return template 
            }
          }
        },

效果图:
在这里插入图片描述

相关文章
|
4天前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
|
3天前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
14 0
|
5天前
|
JavaScript
vue 图表 Echarts
vue 图表 Echarts
9 0
|
5天前
|
JavaScript
vue实现点击按钮将指定文字复制到系统剪切板并提示复制成功
vue实现点击按钮将指定文字复制到系统剪切板并提示复制成功
6 0
|
5天前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
15 0
|
9天前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
|
13天前
|
JavaScript
vue点击按钮复制文字到粘贴板
vue点击按钮复制文字到粘贴板
13 0
|
1天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
7 1
|
2天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint