zoukankan      html  css  js  c++  java
  • Vue使用 Echarts 做出排行榜的感觉

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

    其实这不算是一篇技术文的,就是单纯的echarts调样式就可以,但是有的地方设置还是不好设置的,所以说嘞,就保存一下吧,以后自己用到了的话课可以直接拿来修修改改就可以二次利用了。

    做出来的效果就是这个样子:

    在这里插入图片描述

    这个排行榜一共就展示前六,就是这个样子,然后把这个echarts搞成了一个组件,在需要的地方引用就可以了。

    下面直接上代码:

    <doc>
      柱形图-排行榜
    </doc>
    <template>
      <div id="bar" style=" 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>
    

    就是这个样子,如果有特别的样式可以稍微改一下。

    【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
    【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
    【博客园地址】JayveeWong: http://www.cnblogs.com/wjw1014
    【CSDN地址】JayveeWong: https://blog.csdn.net/weixin_42776111
    【Gitee地址】Jayvee:https://gitee.com/wjw1014
    【GitHub地址】Jayvee:https://github.com/wjw1014
  • 相关阅读:
    窗体控件JFrame的使用
    WindowBuilder的安装与简介
    Swing事件机制
    Swing的MVC结构
    Swing框架的继承关系
    SWT简介
    Swing简介
    AWT简介
    Java界面设计
    使用Java建立聊天客户端
  • 原文地址:https://www.cnblogs.com/wjw1014/p/15698154.html
Copyright © 2011-2022 走看看