Vue使⽤Echarts实现排⾏榜效果
Vue使⽤ Echarts 做出排⾏榜的感觉，供⼤家参考，具体内容如下
其实这不算是⼀篇技术⽂的，就是单纯的echarts调样式就可以，但是有的地⽅设置还是不好设置的，所以说嘞，就保存⼀下吧，以后⾃⼰⽤到了的话课可以直接拿来修修改改就可以⼆次利⽤了。
做出来的效果就是这个样⼦：
这个排⾏榜⼀共就展⽰前六，就是这个样⼦，然后把这个echarts搞成了⼀个组件，在需要的地⽅引⽤就可以了。
下⾯直接上代码：
<doc>
柱形图-排⾏榜
</doc>
<template>
<div id="bar" ></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
xValue: [1,1,1,2,3,3],
yValue: ['陕西移动', '⼭西移动', '北京移动', '⼭东移动', '河北移动', '河南移动'],
};
},
mounted() {
this.show()
},
methods: {
show() {
this.charts = echarts.ElementById('bar'))
var option = {
color: ['#d84430'],
tooltip: {
show: true
},
yAxis: {
axisTick: {
show: false
},
axisLine: {
show: false,
},
axisLabel: {
inside: true,
verticalAlign: 'bottom',
lineHeight: 40,
color: '#DDDFEB',
formatter: function (value, index) {  // 设置y轴⽂字的颜⾊
if (index > 2) {
return '{first|' + value + '}'
} else {
return '{other|' + value + '}'
}
},
rich: {
other: {
color: '#DDDFEB',
opacity: 0.57
},
first: {
color: '#DDDFEB'
}
}
},
data: this.yValue
},
xAxis: {
nameTextStyle: {
color: 'rgba(255, 255, 255, 0.8)',
align: 'right'
},
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
color: 'rgba(255, 255, 255, 0.8)'
},
},
grid: {
top: '0%',
bottom: '0%',
left: '0%',
right: '0%'
},setoption
series: [{
name: '预警排⾏榜',
barWidth: 15,
type: 'bar',
data: this.xValue,
itemStyle: {
normal: {
borderRadius: [3, 20, 20, 3],
color: function (params) {  // 设置柱形图的颜⾊
if (params.dataIndex === 5) {
return '#d84430'
} else if (params.dataIndex === 4) {
return '#f38237'
} else if (params.dataIndex === 3) {
return '#e2aa20'
} else {
return '#608289'
}
}
},
}
}]
};
// 使⽤刚指定的配置项和数据显⽰图表。
this.charts.setOption(option);
window.addEventListener('resize', () => {
size()
})
}
}
}
</script>
<style scoped>
</style>
就是这个样⼦，如果有特别的样式可以稍微改⼀下。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。