数据可视化 DLV
数据可视化 DLV
- 最新动态
- 产品介绍
-
用户指南
- 准备工作
- DLV控制台简介
- 如何使用DLV
- 管理工作空间
- 新建数据连接
- 创建大屏
- 开发大屏
- 管理大屏
- 管理图层
-
管理数据连接
-
新建数据连接
- 数据连接概述
- 使用静态数据源
- 新建API数据连接
- 新建API网关数据连接
- 新建CSV文件数据连接
- 新建对象存储服务(OBS)数据连接
- 新建DWS数据连接
- 新建DLI数据连接
- 新建MRS Hive数据连接
- 新建MRS SparkSQL数据连接
- 新建ClickHouse数据连接
- 新建RDS MySQL数据连接
- 新建RDS PostgreSQL数据连接
- 新建RDS SQL Server数据连接
- 新建RDS GaussDB数据连接
- 新建RDS GeminiDB Influx 接口数据连接
- 新建云搜索服务 Elasticsearch数据连接
- 新建DAYU数据服务连接
- 新建分布式数据库中间件(DDM)数据连接
- 新建Oracle数据连接
- 新建MySQL数据连接
- 新建PostgreSQL数据连接
- 新建SQL Server数据连接
- 新建Elasticsearch数据连接
- 编辑数据连接
- 查找数据连接
- 删除数据连接
- 管理VPC连接
-
新建数据连接
- 管理组件
- 组件指南
- 组合大屏
- 在第三方系统中集成大屏
- 修订记录
- 开发指南
- 最佳实践
- API参考
- 常见问题
- 文档下载
- 通用参考
本文导读
展开导读
链接复制成功!
Index.js规范
Index.js文件是组件的主入口文件,该文件提供了一个示例供您参考,并介绍了index.js文件中常用的组件生命周期或相关函数。
函数 |
说明 |
---|---|
refresh() |
默认渲染方法,当组件初始化和重绘时被调用。 (自定义实现) |
resize() |
缩放,当组件被拖拽、缩放时被调用。 |
loadData() |
更新组件数据,当组件加载数据时调用。 (自定义实现) |
dispatch(String: eventType, object: data) |
可选方法,触发组件交互事件。如果该组件支持事件交互,需用户自定义实现该方法,并且此方法需要在gui.json中配置组件交互事件(events)。
|
getRelation() |
获取组件数据配置映射字段。 |
Index.js文件示例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import gui from './gui.json'; import './index.less'; //global: echarts jQuery class App extends BaseChart { constructor(props = {}) { super(props); Object.assign(props); this.chart = echarts.init(this.el); } refresh() { this.loadData(); } loadData() { let option = this.getOption(); if (option) { this.chart.setOption(option, true); } } resize() { this.chart.resize(); } getOption() { let styledata = this.config.styledata, relation = this.getRelation(); let yData = [], data = []; this.data.forEach(item => { yData.push(item[relation.x]); data.push(item[relation.y]); }); return { backgroundColor: '222', grid: { top: '20', left: '20', right: '20', bottom: '20', containLabel: true }, yAxis: [{ type: 'category', data: yData, inverse: true, axisTick: { show: false }, axisLabel: { margin: 10, textStyle: { fontFamily: styledata['font'], fontSize: 24, color: '#fff' } }, axisLine: { show: false } }], xAxis: [{ type: 'value', axisLabel: { show: false }, axisLine: { show: false }, splitLine: { show: false } }], series: [{ type: 'bar', barWidth: 14, data, label: { normal: { show: true, position: 'insideBottomRight', formatter: '{c}%', distance: 0, offset: [30, -20], color: '#fff', fontSize: 16, padding: [5, 15, 10, 15] } }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#57eabf' }, { offset: 1, color: '#2563f9' }], false), barBorderRadius: 14 } } }, { type: "bar", barWidth: 14, xAxisIndex: 0, barGap: "-100%", data: [120, 120], itemStyle: { normal: { color: "#444a58", barBorderRadius: 14 } }, zlevel: -1 }] }; } } App.gui = gui;export default App; |
父主题: 组件开发指南