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

@hd-fe/echarts

v0.2.11

Published

前端图表库

Downloads

9

Readme

汇电图表库说明

本图表库以简单易用为基本原则,仅对 echarts 常用图表和配置进行了简单封装。所有配置格式与 echarts 官网一致。

主要功能

  • 主题定制,统一全局图表样式

  • 封装常用图表类型和配置属性

使用

完整引入

  // main.js
  import Vue from 'vue'
  import HdECharts from '@hd-fe/echarts'
  import App from './App.vue'

  Vue.use(HdECharts)

  new Vue({
    el: '#app',
    render: h => h(App)
  })

按需引入

  import Vue from 'vue'
  import { HdLine } from '@hd-fe/echarts'
  import App from './App.vue'

  Vue.use(HdLine)

  new Vue({
    el: '#app',
    render: h => h(App)
  })

主题定制

完整引入时

  ...
  import HdECharts from '@hd-fe/echarts'
  import theme from './theme.json'

  Vue.use(HdECharts, { theme })

themm.json 文件可参考 主题编辑器 导出,与 官网配置项 配置基本一致

按需引入时

  ...
  import { HdLine, HdBar } from '@hd-fe/echarts'
  import theme from './theme.json'

  Vue.use(HdLine, { theme })  // theme是全局设置,只需要设置一次
  Vue.use(HdBar)  // HdLine已设置theme,HdBar可不再配置

封装的图表类型

折线

柱状

饼状

雷达图

拆线-柱状

其他

可配置的属性

  • title: Object 配置格式与 echarts 官网配置 options 下的 title 相同
  • legend: Object 配置格式与 echarts 官网配置 options 下的 legend 相同
  • tooltip: Object 配置格式与 echarts 官网配置 options 下的 tooltip 相同
  • xAxis: Object 配置格式与 echarts 官网配置 options 下的 xAxis 相同
  • yAxis: Object 配置格式与 echarts 官网配置 options 下的 yAxis 相同
  • series: Array 配置格式与 echarts 官网配置 options 下的 series 相同
  • options: Object 配置格式与 echarts 官网配置 options 相同
  • watchShallow: Booleanoptions 值进行浅监听并触发图表更新,默认值 true ,如果需要进行 options 值的深监听,可设置 false
  • autoresize: Boolean 浏览器窗口大小改变时自适应,默认值 true 可设置 false