echart formatter Y轴为字符串的情况

原创
2019/04/22 15:51
阅读数 1.8K

一、Y轴为字符串时,通过设置yAxis.axisLabel.formatter实现

yAxis.axisLabel.formatter官方示例

// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'

// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
    // 格式化成月/日,只在第一个刻度显示年份
    var date = new Date(value);
    var texts = [(date.getMonth() + 1), date.getDate()];
    if (index === 0) {
        texts.unshift(date.getYear());
    }
    return texts.join('/');
}

我们在这里要使用第二种函数模板,但在使用中发现,返回为字符串不行,必须返回数组

写了一个动态的

type的值是动态获取的

Option.yAxis.axisLabel.formatter = function(value) {
              var texts = []
              const current = type.find((item, index)=>{
                return index+1 == value
              })
              texts.push(current?current.indexlevel:'')

              return texts
            }

二、折线拐点处汉字提示通过Option.series[0].itemStyle.normal.label.formatter设置,返回字符串

Option.series[0].itemStyle.normal.label.formatter = function(params) {
              var text = ''
              const current = type.find((item, index)=>{
                return index+1 == params.data
              })
              text= current?current.indexlevel:''
              return text
            }

 

最终效果

当type值为

效果图

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部