Vue使用 Echarts 做出排行榜的感覺

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

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

這個排行榜一共就展示前六，就是這個樣子，然后把這個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) {   // 設置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: '預警排行榜',
            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', () => {
          this.charts.resize()
        })
      }
    }
  }
</script>
<style scoped>

</style>

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