vue echarts展示柱状对比图以百分数显示
实现方法如下:
-
在Echarts中使用百分数formatter来格式化y轴标签。
-
将数据中的数值转换为百分数,可以使用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。
原文地址: https://www.cveoy.top/t/topic/wfb 著作权归作者所有。请勿转载和采集!