dengta-components
v1.1.0
Published
灯塔公共组件
Downloads
5
Readme
dengta-components
组件库从原生支持自定义组件，因此是跨平台、与框架无关的可扩展组件。不限定使用者使用的框架类型和代码运行平台。组件库通过引入包括但不限于d3、g2、vue等方式去绘制图表，满足丰富的可扩展性，实现丰富多样化的可视化图表。通过支持接入API和自定义数据的方式，组件库可以快速生成贴合业务场景的自定义图表
引用方式
以单页应用基于VUE为例
安装
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() { }})) |