<template>
<div class="com-container">
<div class="com-chart" ref="seller_ref"></div>
</div>
</template>
<script>
export default {
data () {
return {
chartInstance: null, // echarts实例对象
allData: [], // 服务器获取的所有数据
currentPage: 1, // 当前页数
totalPage: 0, // 总页数
timerId: null // 定时器标识
}
},
mounted () {
this.initChart()
this.getData()
this.screenAdapter()
window.addEventListener('resize', this.screenAdapter)
},
destroyed () {
clearInterval(this.timerId)
window.removeEventListener('resize', this.screenAdapter)
},
methods: {
initChart () {
// 初始化echarts实例对象
this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'dark')
// this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'vintage')
const option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category'
},
title: {
text: '▎ 商家销量排行',
left: 20,
top: 20,
textStyle: {
color: '#fff',
fontSize: 66
}
},
grid: {
top: '20%',
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
z: 1,
lineStyle: {
width: 66,
color: '#2D3443'
}
}
},
series: [{
type: 'bar',
label: {
show: true,
position: 'right',
textStyle: {
color: '#fff'
}
},
barWidth: 66,
itemStyle: {
barBorderRadius: [0, 33, 33, 0],
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#5052EE'
}, {
offset: 1,
color: '#AB6EE5'
}
])
}
}]
}
this.chartInstance.setOption(option)
this.chartInstance.on('mouseover', () => {
clearInterval(this.timerId)
})
this.chartInstance.on('mouseout', () => {
this.startInterval()
})
},
async getData () {
// 获取数据
const {
data: res
} = await this.$http.get('seller')
console.log(res)
this.allData = res
// 从大道小的排序
this.allData.sort((a, b) => {
return a.value - b.value
})
// 计算总页数
this.totalPage = this.allData.length % 5 ? this.allData.length / 5 : this.allData.length / 5 + 1
this.updateChart()
// 开启轮播
this.startInterval()
},
updateChart () {
const start = (this.currentPage - 1) * 5
const end = this.currentPage * 5
const showData = this.allData.slice(start, end)
// 处理数据并且更新界面图表
const sellerNames = showData.map(item => item.name)
const sellerValues = showData.map(item => item.value)
const option = {
xAxis: {
// 设置最大值
max: this.allData[this.allData.length - 1].value
},
yAxis: {
data: sellerNames
},
series: [{
data: sellerValues
}]
}
this.chartInstance.setOption(option)
},
startInterval () {
if (this.timerId) {
clearInterval(this.timerId)
}
this.timerId = setInterval(() => {
this.currentPage++
if (this.currentPage > this.totalPage) {
this.currentPage = 1
}
this.updateChart()
}, 3000)
},
screenAdapter () {
const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
const option = {
title: {
textStyle: {
fontSize: titleFontSize
}
},
tooltip: {
axisPointer: {
lineStyle: {
width: titleFontSize
}
}
},
series: [
{
barWidth: titleFontSize,
itemStyle: {
barBorderRadius: [0, titleFontSize / 2,
titleFontSize / 2, 0]
}
}
]
}
this.chartInstance.setOption(option)
this.chartInstance.resize()
}
}
}
</script>
<style scoped>
</style>
echarts可以轮播的横向柱状图
最新推荐文章于 2024-05-12 09:30:00 发布