npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-acharts

v0.1.3

Published

A Vue.js project

Downloads

11

Readme

vue-acharts

基于vue的acharts图表组件

使用vue2.5.2+acharts1.0.15+构建

使用

在使用前,需在全局使用cdn等方式引入ACharts。这是由于目前尚未解决npm安装acharts出现的各种问题。

 <script src="http://g.tbcdn.cn/bui/acharts/1.0.15/acharts-min.js"></script>

vue-acharts组件会从全局window.AChart来获取到ACharts。

注册全局组件

import Vue from 'vue'
import ACharts from 'vue-acharts/components/ACharts'

// register component to use
Vue.component('ACharts', ACharts)

使用组件(demo)

<template>
  <div id="app">
    <A-Charts :options="options" />
    <A-Charts :options="options" />
    <A-Charts :options="options" />
    <button type="button" name="button" @click="createData">Change</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      option: {
        width: 950,
        height: 500,
        plotCfg: {
          margin: [50, 50, 80]
        },
        title: {
          text: '一年的平均温度'
        },
        subTitle: {
          text: 'Source: WorldClimate.com'
        },
        xAxis: {
          categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          title: {
            text: '温度',
            rotate: -90
          }
        },
        tooltip: {
          valueSuffix: '°C',
          shared: true,
          crosshairs: true
        },
        series: [{
          name: 'Tokyo',
          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        },
        {
          name: 'Shanghai',
          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
      }
    }
  },
  mounted () {
  },
  methods: {
    createData () {
      this.option.series = this.option.series.map((val) => {
        // val.name = ""
        val.data = val.data.map(val => parseInt(Math.random() * 20))
        return val
      })
    }
  },
  computed: {
    options: {
      cache: false,
      get () {
        console.log('app change')
        return this.option
      }
    }
  }
}
</script>

<style>
</style>

vue-acharts组件会帮助你监控option中数据的变化,并根据变化进行实时渲染。

Props

  • options

Methods

  • init
  • setTheme(themeConfig)

注意事项

vue-acharts会自动设定dom的id,格式为acharts-${integer}。这使得在使用的时候无需传入id配置项,vue-acharts会自动帮你设置各个图表的id。

事件

  • 图表支持的事件类型:

    • plotclick 图表边框内部的点击事件
      • ev.x 点击的x坐标
      • ev.y 点击的y坐标
      • ev.shape 点击的图形
    • plotmove 图表边框内部的移动事件
      • ev.x 移动到的x坐标
      • ev.y 移动到的y坐标
      • ev.shape 移动到的图形
    • plotover 进入图表的边框内部
      • ev.x 进入的x坐标
      • ev.y 进入的y坐标
      • ev.shape 移动到的图形
    • plotout 移出图表边框
    • seriesactived 图表序列激活,例如折线图激活
      • ev.series 图表序列
    • seriesunactived 图表序列取消激活
      • ev.series 图表序列
    • seriesitemclick 点击图表序列子项,例如饼图的一个子项(弧形)被点击
      • ev.series 图表序列
      • ev.seriesItem 图表序列子项
    • seriesitemselected 选中图表序列的一个子项,例如柱状图的一项被选中
      • ev.series 图表序列
      • ev.seriesItem 图表序列子项
    • seriesitemunselected 取消选中图表序列的一个子项
      • ev.series 图表序列
      • ev.seriesItem 图表序列子项
    • tooltipshow 提示信息显示
    • tooltiphide 提示信息隐藏

使用代码

<A-Chart :options="options" @plotclick="yourAction">
...
methods: {
  yourAction (ev) {
    console.log(ev.x, ev.y, ev.shape)
  }
}

本地开发测试

npm i
npm run dev

http://localhost:8080