Vue使用Echarts實現(xiàn)排行榜效果

更新時間：2022年03月25日 11:27:18 作者：浩鋮

這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實現(xiàn)排行榜效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Vue使用 Echarts 做出排行榜的感覺，供大家參考，具體內(nèi)容如下

其實這不算是一篇技術(shù)文的，就是單純的echarts調(diào)樣式就可以，但是有的地方設(shè)置還是不好設(shè)置的，所以說嘞，就保存一下吧，以后自己用到了的話課可以直接拿來修修改改就可以二次利用了。

做出來的效果就是這個樣子：

這個排行榜一共就展示前六，就是這個樣子，然后把這個echarts搞成了一個組件，在需要的地方引用就可以了。

下面直接上代碼：

<doc>
? 柱形圖-排行榜
</doc>
<template>
? <div id="bar" style="width: 100%;height:100%;"></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.init(document.getElementById('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) { ? // 設(shè)置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%'
? ? ? ? ? },
? ? ? ? ? series: [{
? ? ? ? ? ? name: '預(yù)警排行榜',
? ? ? ? ? ? barWidth: 15,
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? data: this.xValue,
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? borderRadius: [3, 20, 20, 3],
? ? ? ? ? ? ? ? color: function (params) { ? // 設(shè)置柱形圖的顏色
? ? ? ? ? ? ? ? ? if (params.dataIndex === 5) {
? ? ? ? ? ? ? ? ? ? return '#d84430'
? ? ? ? ? ? ? ? ? } else if (params.dataIndex === 4) {
? ? ? ? ? ? ? ? ? ? return '#f38237'
? ? ? ? ? ? ? ? ? } else if (params.dataIndex === 3) {
? ? ? ? ? ? ? ? ? ? return '#e2aa20'
? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? return '#608289'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? }
? ? ? ? ? }]
? ? ? ? };
? ? ? ? // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
? ? ? ? this.charts.setOption(option);
? ? ? ? window.addEventListener('resize', () => {
? ? ? ? ? this.charts.resize()
? ? ? ? })
? ? ? }
? ? }
? }
</script>
<style scoped>

</style>

就是這個樣子，如果有特別的樣式可以稍微改一下。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: