vue+echarts,使用yAxis.axisLabel.formatter自定义Y轴刻度标签

项目需求

根据后端接口传入的数据,判断传入的值为0.4时对应的y轴刻度是正常,传入的值为0.8时对应的y轴刻度是异常

效果展示

使用详解

yAxis.axisLabel.formatter

说明:刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

默认:'{value} '。

参数类型:string,Function

可选值:请参考以下博客

https://blog.csdn.net/qq_38974638/article/details/108986033

 代码展示

this.chart.setOption({
          yAxis: [{
            nameGap: 10,
            max: 1,
            type: 'value',
            name: this.name,
            axisTick: {
              how: false
            },
            axisLabel: {
              formatter: function (value) {
                if (title === '颗粒度') {
                  if (value === 0.4) {
                    return '正常';
                  } else if (value === 0.8) {
                    return '异常';
                  }} else {
                    return value;
                }},}
        }],
        })

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现 Vue+Echarts 柱状图的 y 轴从大到小排序,可以使用以下步骤: 1. 在 Echarts 的配置项中,设置 y 轴的 type 为 "value"。 2. 在 y 轴的轴线样式中,设置 axisLabelformatter 属性,使用一个回调函数来对 y 轴的标签进行排序。 3. 在回调函数中,使用 sort() 方法对 y 轴数据进行排序,然后返回排序后的标签数组。 下面是一个示例代码: ``` <template> <div id="chart" style="width: 600px;height:400px;"></div> </template> <script> import * as echarts from 'echarts'; export default { data() { return { chartData: [ { name: 'A', value: 76 }, { name: 'B', value: 68 }, { name: 'C', value: 82 }, { name: 'D', value: 91 }, { name: 'E', value: 72 }, { name: 'F', value: 68 }, { name: 'G', value: 95 }, ], }; }, mounted() { this.initChart(); }, methods: { initChart() { const chart = echarts.init(document.getElementById('chart')); const yAxisData = this.chartData.map(item => item.name).sort((a, b) => { return this.chartData.find(item => item.name === b).value - this.chartData.find(item => item.name === a).value; }); const option = { xAxis: { type: 'category', data: this.chartData.map(item => item.name), }, yAxis: { type: 'value', axisLabel: { formatter: (value) => { return yAxisData[value]; }, }, }, series: [ { data: this.chartData.map(item => item.value), type: 'bar', }, ], }; chart.setOption(option); }, }, }; </script> ``` 在上面的示例代码中,使用了一个回调函数来对 y 轴的标签进行排序。首先使用 map() 方法将原始数据中的名称提取出来,然后使用 sort() 方法对名称进行排序。在 axisLabelformatter 属性中,使用回调函数返回排序后的标签数组。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值