dengta-components
Advanced tools
组件库从原生支持自定义组件，因此是跨平台、与框架无关的可扩展组件。不限定使用者使用的框架类型和代码运行平台。组件库通过引入包括但不限于d3、g2、vue等方式去绘制图表，满足丰富的可扩展性，实现丰富多样化的可视化图表。通过支持接入API和自定义数据的方式，组件库可以快速生成贴合业务场景的自定义图表
安装
npm install dengta-components -S
注册
import Vue from "vue";
import App from "./App.vue";
import 'dengta-components' // 或者是直接引用js文件，例如：import '/dengta-components.js'
// 自定义组件注册，使Vue忽略在Vue之外的自定义元素
Vue.config.ignoredElements = ['g2-chart'];
new Vue({
render: (h) => h(App),
}).$mount("#app");
使用
// App.vue
<template>
<div id="app">
<g2-chart
data-chart-type=""
data-api-config=""
data-chart-config=""
/>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style lang="less">
#app {
width: 600px;
height: 400px;
}
</style>
安装 & 注册 & 使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
// 由于同步脚本会延迟 DOM 构建和呈现，因此您应该始终异步加载第三方脚本
<script src="/dengta-components.js" async></script>
<style>
.box {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div class="box">
// dengta-component.js加载后注册了g2-chart组件，直接使用
<g2-chart
data-chart-type=""
data-api-config=""
data-chart-config=""
></g2-chart>
</div>
</body>
</html>
| 属性 | 描述 | 值介绍 |
|---|---|---|
| data-chart-type | 用来指定要渲染的图表类型 | 'line', 'stackBar', 'area', 等... |
| data-api-config | 用来指定图表数据 | 当为字符串数组，表示的是自定义数据。当为字符串对象，表示的是api接口信息 |
| data-chart-config | 图表样式配置信息 | json字符串对象，不同的图表类型或是相同图表类型，配置信息都不一样，通过该信息绘制自定义图表 |
监听自定义事件
| 事件名称 | 描述 | 使用方式 |
|---|---|---|
| resizeChart | 监听resizeChart事件，当事件发生，重新渲染该图表 | customElement.dispatchEvent(new CustomEvent('resizeChart')) |
| dataChart | 监听dataChart事件，当事件发生，将图表数据作为参数执行回调 | customElement.dispatchEvent(new CustomEvent('dataChart', { detail: (value) => { console.log(value) } })) |
抛出自定义事件
| 事件名称 | 描述 | 监听方式 |
|---|---|---|
| renderChart | 当图表渲染完成之后，抛出该事件 | customElement.addEventListener('renderChart', function() { }})) |
FAQs
We found that dengta-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub Actions checkout now blocks risky pull_request_target checkouts by default to help prevent pwn request supply chain attacks.
Product
Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.