实现方法如下:

  1. 在Echarts中使用百分数formatter来格式化y轴标签。

  2. 将数据中的数值转换为百分数,可以使用js中的toFixed()方法。例如,将0.25转换为25%可以使用(0.25*100).toFixed(2)。

下面是一个简单的例子:

<template>
  <div>
    <div ref="echart" style="height: 500px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      chartData: [
        {name: 'A', value: 0.25},
        {name: 'B', value: 0.35},
        {name: 'C', value: 0.45},
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.echart)

      const option = {
        xAxis: {
          type: 'category',
          data: this.chartData.map(item => item.name),
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          }
        },
        series: [{
          type: 'bar',
          data: this.chartData.map(item => (item.value * 100).toFixed(2)),
        }]
      }

      chart.setOption(option)
    }
  }
}
</script>

在上述例子中,我们将y轴标签的formatter设置为'{value}%',将数据中的数值乘以100并使用toFixed(2)方法转换为百分数,最后将转换后的数据传递给Echarts的series。

vue echarts展示柱状对比图以百分数显示

原文地址: https://www.cveoy.top/t/topic/wfb 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录