VUE之Echarts图表x轴y轴提示文字过长处理为省略号

简介: VUE之Echarts图表x轴y轴提示文字过长处理为省略号

只需对显示文字格式修改即可

yAxis: {
          type: 'category',
          axisLine: {
            show: false // 轴线
          },
          axisTick: {
            show: false// 去除刻度
          },
          axisLabel: {
            formatter: function(params) {
              const index = params.indexOf('#')
              const newParams = params.slice(0, index)
              var newParamsName = newParams.substring(0, 5) + '...'
              return newParamsName
            }
          },
          data: []
        },

前后对比图:这样看起来清爽多了
在这里插入图片描述
在这里插入图片描述

相关文章
|
12天前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
|
4天前
|
Apache
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
9 0
|
4天前
|
JavaScript 定位技术
【vue】 vue中echarts渐变被覆盖、失效,echarts.graphic.LinearGradient,不能正常显示的解决方法。
【vue】 vue中echarts渐变被覆盖、失效,echarts.graphic.LinearGradient,不能正常显示的解决方法。
8 0
|
4天前
|
JavaScript
【vue】 在vue2项目中使用echarts
【vue】 在vue2项目中使用echarts
10 0
|
11天前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
26 0
|
13天前
|
JavaScript
vue 图表 Echarts
vue 图表 Echarts
13 0
|
13天前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
28 0
|
1月前
|
JavaScript 容器
|
21天前
|
JavaScript Apache CDN
Vue项目使用ECharts实现图表
Vue项目使用ECharts实现图表
32 0