current position:Home>Vue uses echarts to make the feeling of leaderboard

Vue uses echarts to make the feeling of leaderboard

2022-01-26 23:17:07 Super invincible cool Tyrannosaurus Rex Ares

Vue Use Echarts Feel like making a leaderboard

In fact, this is not a technical article , It's pure echarts Just adjust the style , But some places are not easy to set , So say , Just save it , If you use it in the future, the class can be directly used for repair, modification and secondary utilization .

The effect is like this :
 Insert picture description here
This list shows the top six , That's what it looks like , And put this echarts Into a component , Just reference where needed .

Let's go straight to the code :

<doc>
   Bar charts - Ranking List 
</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: [' Shaanxi Mobile ', ' Shanxi Mobile ', ' Beijing Mobile ', ' Shandong Mobile ', ' Hebei mobile ', ' Henan Mobile '],
      };
    },
    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) {
       //  Set up y Color of axis text 
                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: ' Alert ranking ',
            barWidth: 15,
            type: 'bar',
            data: this.xValue,
            itemStyle: {
    
              normal: {
    
                borderRadius: [3, 20, 20, 3],
                color: function (params) {
       //  Set the color of the column chart 
                  if (params.dataIndex === 5) {
    
                    return '#d84430'
                  } else if (params.dataIndex === 4) {
    
                    return '#f38237'
                  } else if (params.dataIndex === 3) {
    
                    return '#e2aa20'
                  } else {
    
                    return '#608289'
                  }
                }
              },
            }
          }]
        };
        //  Use the configuration item and data display chart just specified .
        this.charts.setOption(option);
        window.addEventListener('resize', () => {
    
          this.charts.resize()
        })
      }
    }
  }
</script>
<style scoped>

</style>

That's what it looks like , If there is a special style, you can change it a little .

copyright notice
author[Super invincible cool Tyrannosaurus Rex Ares],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262317048642.html

Random recommended