PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

0.0.1-aplha

npm

17chart.js

> 开发图表示例网站：[http://17chart-dev-website-1258339218.cos-website.ap-beijing.myqcloud.com/](http://17chart-dev-website-1258339218.cos-website.ap-beijing.myqcloud.com/)

17chartchartecharts
Published27 Jun 2022
Direct dependencies18
Transitive dependenciesNot calculated

README

Current package documentation

17chart.js

什么是17chart？

17chart.js是基于Echart.js二次封装的一个图表库，目的在于：

  • 统一一套完整的图表渲染主题样式
  • 简化Echarts配置项的复杂度（一段即使上百行的option代码，大部分都是服务于UI样式和组件）
  • 对Echarts.js无需考虑的一些图表业务细节进行处理

开发图表示例网站：http://17chart-dev-website-1258339218.cos-website.ap-beijing.myqcloud.com/

什么是图表业务细节？

  • 旋转X轴名称后，可能需要增加图表的整体高度，避免图表显示区域过小
  • 旋转X轴之后，名称过长的情况的特殊处理
  • 小数格式化成为百分比数据后，yAxis、label、tooltip等都需要进行格式化显示
  • lengend、dataZoom影响grid.bottom或者grid.top的值
  • xAxis.name和yAxis.name影响grid.bottom或者grid.top的值
  • xAxsi是表示数值的条形图时，图表容器的高度需要根据数值个数调整高度
  • 饼图的显示需要从小到大、或者从大到小进行排序
  • 等等

这些业务细节可能会由于业务数据的不同，而需要进行调整。这可能耽误了我们大部分的前端时间。所以根据业务进行二次封装就变得很有必要。

如何使用17chart.js

当前还未发布npm，还在开发内测-alpha阶段，请勿使用!

1. 安装17chart.js

npm install 17chart.js

2. 引入17chart.js和17chart.css

import $17chart from '17chart.js'
import '17chart.js/17chart.css'

new $17chart.Bar('chart1', {
  data: data1,
  xField: 'name',
  yField: 'value',
})

版本日志

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 18

Native requirements
18 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
echarts
Environment
{
  "local_name": "echarts",
  "alias": false,
  "peer_metadata": null
}
^5.3.2runtime
@ant-design/pro-layout
Environment
{
  "local_name": "@ant-design/pro-layout",
  "alias": false,
  "peer_metadata": null
}
^6.38.8development
@rollup/plugin-typescript
Environment
{
  "local_name": "@rollup/plugin-typescript",
  "alias": false,
  "peer_metadata": null
}
^8.3.2development
@types/react
Environment
{
  "local_name": "@types/react",
  "alias": false,
  "peer_metadata": null
}
^17.0.0development
@types/react-dom
Environment
{
  "local_name": "@types/react-dom",
  "alias": false,
  "peer_metadata": null
}
^17.0.0development
@umijs/preset-react
Environment
{
  "local_name": "@umijs/preset-react",
  "alias": false,
  "peer_metadata": null
}
1.xdevelopment
@umijs/test
Environment
{
  "local_name": "@umijs/test",
  "alias": false,
  "peer_metadata": null
}
^3.5.25development
lint-staged
Environment
{
  "local_name": "lint-staged",
  "alias": false,
  "peer_metadata": null
}
^10.0.7development
prettier
Environment
{
  "local_name": "prettier",
  "alias": false,
  "peer_metadata": null
}
^2.2.0development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
17.xdevelopment
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
17.xdevelopment
react-markdown
Environment
{
  "local_name": "react-markdown",
  "alias": false,
  "peer_metadata": null
}
^8.0.3development
rollup
Environment
{
  "local_name": "rollup",
  "alias": false,
  "peer_metadata": null
}
^2.75.5development
rollup-plugin-json
Environment
{
  "local_name": "rollup-plugin-json",
  "alias": false,
  "peer_metadata": null
}
^4.0.0development
rollup-plugin-less
Environment
{
  "local_name": "rollup-plugin-less",
  "alias": false,
  "peer_metadata": null
}
^1.1.3development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^4.1.2development
umi
Environment
{
  "local_name": "umi",
  "alias": false,
  "peer_metadata": null
}
^3.5.25development
yorkie
Environment
{
  "local_name": "yorkie",
  "alias": false,
  "peer_metadata": null
}
^2.0.0development

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-OBjVVZdLM+VhvpW3D0/2Cg8hLJmmYVK07Orgm+xnZfSsr1gVJwZVV7tJpSqeImyDanzCCFlnBhKGx5gLHcSFZQ==",
  "shasum": "a446569a9e60eefd94fd879c60d446d500b38bdf",
  "tarball": "https://registry.npmjs.org/17chart.js/-/17chart.js-0.0.1-aplha.tgz",
  "fileCount": 102,
  "unpackedSize": 643002,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEQCIEtPacOAPLzmv3yNW7VePEToMuNquJP8mRB0UeZrtDD9AiA2oONIHNh1TSExKg/ugsjzx3sLZMqsTjQ2P1EE0qdPcA=="
    }
  ],
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiuSLXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+xRAAkUTXN9P2/w4wuOVPp9n2P9Zos73SPjE2OcutPwwhimx93O9H\r\nWb8nHnR4gipW+fnuFiCg6TpwFYAXJYKR1FroDFf1JUsAy3rRBUb7f0/ZRp3p\r\nyOokMLZjS+KVuxVy9F4aA1NRFj4bvA9e4U/8Rn03vlFdVH3IgkHtFcC1KBiC\r\nw9xa+T+GJH5dB1t1ZuZeRZFX1cQw3cD4AjiPDXu/gNAW4EFHn4Oc6MEal4hy\r\nEy25Qtt2WZS+xR+H9NIyYImYClVAl9PWoU1CT5q5LVOPFa24uWbH5DzWMHEN\r\nCQJhrjKS57Kz+LFQzGMcjavxCpRKMz4I0JsZyA2Dw6NNZSsLCAy1yAbH2RkN\r\n5e+AkHyRx6FDUnl2H+PSr+bPcMXkFvEkZVk5eBlmDt13ujdx+hC0BCsxhxDv\r\nfRyKkWJ+ADv+Gz41NZsc/4KiGGm4b8ZsoT6oOzcJwj2Te9ZIUF3iszzxfiUD\r\nlNBF8bcFOJvKyD9SYbUNzFf+qS9pIigTJLjcFi0EnAVrqEpGYVodGjXyn4f2\r\npTmsAv9TY13dcIRRqRT7eVWPsoj1nZyzRJtsaf4F3G9yAsMeyy44K73iJpIi\r\nxt0mHYGEsmk2WNi7uP9qBQ26KR6UpwJstJRdsmpxk/8298E2OC5Y2di1VBwL\r\nFmVHYL6Y9Df+OpmYJlozkSdnTg0VydGMCWc=\r\n=/MJ0\r\n-----END PGP SIGNATURE-----\r\n"
}

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 18:18 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:34a6718b5d97150abbb5d06ea3acf2f86821fe1e4456133541d1843b0bb56342

Other collected versions

0.0.39-alpha19 Oct0.0.37-alpha27 Oct0.0.36-alpha20 Oct0.0.35-alpha12 Oct0.0.34-alpha16 Sept0.0.33-alpha15 SeptView all collected versions →