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

@hyjiacan/vue-echarts

v0.3.0

Published

Wrapper of echarts for Vue2

Downloads

10

Readme

ECharts

ECHARTS 的简单封装。

此组件最大限度保留 echarts 原生用法,以降低学习成本。

安装

npm i @hyjiacan/vue-echarts

用法


<template>
  <e-charts style="height: 400px;" :listen="events" :options="{}"/>
</template>
<script>
import ECharts from '@hyjiacan/vue-echarts'

export default {
  components: {ECharts},
  data() {
    return {
      events: {
        click: (e) => {
          console.info(e)
        }
      },
      mounted: false
    }
  }
}
</script>

当未明确指定高度(使用 classstyle 指定 width/height)时,组件会自动撑满父容器。

ECharts 会监控(周期为 500ms,可以通过调用 setResizeInterval 改变周期)组件元素的尺寸变化, 在变化后,若组件指定了 auto-resize 属性,那么就自动执行 resize 操作。

组件中采用了单一事件循环,不会造成大量的CPU资源占用。

属性

|名称|类型|必填|默认值|描述| |---|---|---|---|---| |options|Object|是|-|传给图片实例的配置对象| |group|String|否|-|用于 echarts.connect/disconnectgroup ID。参考 echarts.connect| |theme|String|否|-|应用的主题。参考 echarts.registerTheme| |opts|Object|否|-|附加参数。参考 echarts.init| |listen|Object|否|-|需要在图表上监听的事件集合| |auto-resize|Boolean|true|是否在容器大小变化后自动执行 resize 操作| |empty-text|String|暂无数据|当选项为空或数据为空时的占位文本| |show-empty-mask|Boolean|false|是否在没有数据时显示 mask 以及 empty-text| |carousel|Object|-|走马灯效果(自动播放)参数,详见 carousel| |option-opts|Object|否|-|在调用 setOption(option, opts) 时的第二个参数| |not-merge|Boolean|否|false|在调用 setOption(option, notMerge, lazyUpdate) 时的第二个参数。当指定了 option-opts 时无效| |lazy-update|Boolean|否|false|在调用 setOption(option, notMerge, lazyUpdate) 时的第三个参数。当指定了 option-opts 时无效| |delay|Number|否|0|用于延时渲染图表。一般用于存放图表的窗口具有动画时,以在动画执行完成后再进行渲染。单位为 毫秒|

options 中,添加了一些额外的属性:

  • key 用于区分不同的数据项。一般用于对同一个图表应用不同 options 时,在渲染前清除原有的渲染结果。 并没有把 key 设置成 prop,是为了方便在 option 中直接指定,以便于同个图表展示不同的数据。

另外,可以通过 ECharts.defaults 设置默认值(会自动与 setOption(option) 中的 option 进行 浅表 合并)。

import ECharts from '@hyjiacan/vue-echarts'

ECharts.defaults.color = ['red', 'green', 'blue']

listen 监听事件的写法:

const handlers = {
  legendselected: function (e) {
  },
  click: {
    // 也可以是对象
    query: 'series',
    handler: function (e) {
    },
    // 指定上下文: this 指向
    context: {}
  },
}

第三方组件

目前能够自动识别并 按需加载 以下组件:

需要在项目中添加对应包的依赖。

carousel

carousel 是基于 action 的图表定时操作支持,其结构如下:

carousel = {
  // 是否在鼠标放上时暂时,移开后恢复
  mouse: true,
  // 操作时间间隔,单位为毫秒
  interval: 5000,
  // 自动播放的动作,其值可以是对象(单个动作)或数组(多个动作)
  // 值与调用 dispatchAction 的值一致
  // 在未指定 seriesIndex 时,会自动设置为 0
  // 可以附加一个 undo 属性,用于指定此操作在下次执行时会先被取消(执行对应的取消操作)
  actions: [{
    type: 'highlight'
  }]
}
  • carousel 值为数组时,其表示要执行的 actions,同时使用默认的 {interval: 5000, mouse: true}
  • carousel 值为字符串时,表示其要执行的某个 action,同时使用默认的 {interval: 5000, mouse: true}

目前支持的 action:

  • highlight
  • legendSelect Working in progress
  • showTip
  • pieSelect
  • geoSelect
  • mapSelect

内置事件

|名称|参数|描述| |---|---|---| |ready|{id: String, chart: echarts}|组件首次渲染完成后触发。idECharts 组件实例的 id,并非 echarts 图表实例的 id|

仅当 options 不为空,并且其内的数据有效时才会渲染图表,在其后才会触发 ready 事件。 ready 事件仅在首次渲染后会触发一次。

函数

get

ECharts.get(id) 获取组件的 echarts 实例,idready 事件的参数, 也可以通过 $el.getAttribute('data-echarts-id') 获取到。

resize

ECharts.resize(id) 调整指定组件的尺寸,idready 事件的参数, 也可以通过 $el.getAttribute('data-echarts-id') 获取到。

resizeAll

ECharts.resizeAll() 调整所有组件的尺寸。

setResizeInterval

ECharts.setResizeInterval(timeout) 设置自动调整尺寸的周期,单位为毫秒。默认为 500ms

setInterceptor

ECharts.setInterceptor(options) 设置 options 拦截器,用于在将其提交给 echarts 前做全局处理。返回修改后的或者新的 options 对象。

插槽

|名称|参数|描述| |---|---|---| |prepend|-|图表前的内容,处于图表 z-index 的下一层| |append|-|图表后的内容,处于图表 z-index 的上一层| |empty|-|图表选项或数据为空时要显示的内容,指定此插槽时,empty-text 无效|

为了防止鼠标事件被拦截,append 插槽以及其子元素会忽略鼠标事件。

参考

待办

  • 仅在有图表实例时才执行定时器,如果图表被销毁,那么就停止定时器