如图所示:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9b0179309ebf8d75f24f7892faf00750.png)
代码如下:
<template>
<div class="ml20 mr20 mb20 colorFOp">
<div class="head tc mb20 ">测试案例</div>
<div ref="test" class="testChart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
myTestChart:{},
};
},
mounted() {
this.testChart()
window.onresize = ()=>{
this.myTestChart.resize()
}
},
methods: {
formatCurrency(value){
if (value == 0) return 0;
if(value == ".") return '';
if(value == "N/A") return 'N/A';
if (!value) return '';
let val = Number(value)
let intPart = parseInt(val)
let intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
let floatPart = '0'
val = val.toString()
let value2Array = val.split('.')
if (value2Array.length === 2) {
floatPart = value2Array[1].toString()
return intPartFormat + '.' + floatPart
} else {
return intPartFormat
}
},
testChart(){
this.myTestChart = echarts.init(this.$refs.test);
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '15',
right: '30',
bottom: '15',
top:'15',
containLabel: true
},
xAxis: [
{
type: 'value',
splitLine:{
show: false
},
boundaryGap: ['5%', '5%'],
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#fff',
width:'1'
}
},
axisLabel: {
textStyle: {
color: '#fff',
}
},
}
],
yAxis: [
{
type: 'category',
inverse: true,
axisTick:{
show:false,
},
splitLine:{
show: false
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#fff',
width:'1'
}
},
axisLabel: {
textStyle: {
color: '#fff',
}
},
data: Array.from({length:4},(v,k)=>`${k+1}月`)
},
],
series: [{
type:'bar',
data: [3322,2336,3388,3399],
hoverAnimation: true,
barWidth : 12,
itemStyle: {
barBorderRadius:25,
color: '#06d4e4',
},
label:{
normal:{
formatter:val => {
return `${this.formatCurrency(val.value)}`
},
show:true,
position: 'right',
textStyle:{
fontSize:10,
color:'#06d4e4'
}
}
}
}]
}
this.myTestChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.testChart{
margin:100px auto;
width:850px;
height: 50vh;
}
.title{
font-size: 16px;
color: #00F8FD;
line-height: 42px;
}
</style>