简单的vue图表

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var app = new Vue({
  el: ".app",
  data: {
    message: "Hello Vue!",
    series: [
      98,
      75,
      41,
      65,
      26,
      8,
      81,
      73,
      70,
      95,
      76,
      42,
      61,
      72,
      94,
      43,
      44,
      2,
      48,
      93,
      83,
      14,
      23,
      91,
      4,
      64,
      15,
      56,
      31
    ],
    categories: ["Benny Graham",
"Nora Randall",
"Flossie Meza",
"Glenda Hartman",
"Kasey Obrien",
"Jarvis Beck",
"Yesenia Edwards",
"Latoya Mullen",
"Delbert Jefferson",
"Kaye Wade",
"Bianca Kemp",
"Corey Potter",
"Cole Crane",
"Lucinda Frost",
"Sandy Campbell",
"Marcia Turner",
"Michal Webster",
"Sallie Stevens",
"Galen White",
"Dustin Marquez",
"Carrie Sheppard",
"Shelly Velasquez",
"Brenda Keller",
"Jacob Pearson",
"Lionel Brooks",
"Ginger Baxter",
"Claire Henderson",
"Chester Villa",
"Luella Ho"],
    yLabels: [0,
      10, 20, 30, 40, 50, 60, 70, 80, 90, 100
    ].reverse()
  },
  computed: {
    styles() {
      return {
        "grid-template-columns": `repeat(${this.series.length}, minmax(0, 1fr))`
      }
    },
    max() {
      return Math.max(...this.series);
    }
  },
  methods: {
    getBarStyles(value) {
      
      return {
        'height': `${value * 300 / this.max}px`
      }
    }
  }
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg