Dengta-components NPM

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) } }))

抛出自定义事件