index.js 与 package.json 文件的作用
package.json 是用来定义接入 DataV 时组件的配置项，例如开放给您配置的组件样式、组件静态数据、组件初始化大小以及蓝图方法等。
package.json 文件 view 配置属性说明：
- 在 package.json 里主要定义了组件名称、依赖包和版本等一些接入的配置信息，其中在 datav -> view 配置属性下的配置是用来定义组件最上层 div 的初始化大小。
package.json 文件 apis 与 api_data 配置属性说明：
- 在 package.json 文件中 datav -> apis 配置用来定义组件数据接口所需要的字段以及触发的方法，而 api_data 是与 apis 对应，是组件的静态数据源。
组件发布到公网环境中才可以在组件配置里选择动态数据接口。
- package.json 文件 config 配置属性说明：
- 在 package.json 里 datav -> config 配置属性是作为配置组件样式可视化界面的参数，例如字体大小、颜色等一些配置项。当用户修改了组件样式配置，就会调用 index.js 里的 render 或者 updateOptions 方法，并传递修改后的 config 属性。
只有当没有设置 updateOptions 方法时才会调用 render 方法。
package.json 文件 events 配置属性说明：
- 在 package.json 里 datav -> events 配置属性用来定义蓝图事件（回调事件）的设置项，触发方式需要通过组件自定义事件去触发 this.emit 来抛出参数，进而实现与其他组件的联动效果，或者触发蓝图的事件。
package.json 文件 publicHandler 配置属性说明：
- 在 package.json 里 datav -> publicHandler 配置属性用来定义组件蓝图里的动作接口。在 publicHandler 配置里自定义一个名称，例如 select。该名称需要与 index.js 里定义的方法名相同，在公网上通过蓝图去触发组件的动作时，就会触发 index.js 里相应的方法去实现对应的效果。
index.js 是编写组件渲染方法和业务逻辑数据处理的脚本文件，只是在该 js 文件上预定了接入 DataV 的方法。例如初始化时调用 init 方法，渲染 dom 元素时调用 render 方法等。index.js 的主要方法有 init、render、resize、updateOptions 和 destroy 等方法。
index.js 文件中 init 和 destroy 方法说明：
- index.js 中的 init 方法是在组件初始化时调用，会传递 config 参数，config 参数对应取的是 packge.json 定义的 config 字段，表示组件的样式信息。
- destroy 方法则是在组件销毁时调用，例如在公网 DataV 环境中删除画布编辑器中的组件，则会调用该方法处理销毁实例的动作。
index.js 文件中 render 和 updateOptions 方法说明：
- index.js 中的 render 方法在 init 方法之后执行，会传递 data 和 config（不是必须的）参数。data 参数代表的是组件数据接口返回的数据，而 config 参数是组件的样式配置，与 init 方法传递的 config 参数原理相同。
- updateOptions 方法比较特殊，可以设置也可以不设置，如果设置了 updateOptions 方法，那么在调整组件样式时，不会触发 render 方法，而触发 updateOptions 方法；如果没有设置 updateOptions 方法，则正常调用 render 方法并传递 config 参数。
index.js 文件 emit 和 resize 方法说明：
- index.js 中的 emit 方法需要在 package.json 的 events 配置中声明后，蓝图编辑器中才会出现此事件，它抛出事件的 value 值需要为 object 类型。此方法也可以在交互面板中使用。
- resize 方法则是在修改组件大小时会触发，传递当前大小的 width 和 height 参数。
datav 对象属性：
view: 组件最上层 div 的初始化大小apis: 定义组件数据接口所需要的字段以及触发的方法api_data: 组件的静态数据源config: 作为配置组件样式可视化界面的参数，例如字体大小、颜色等一些配置项events: 定义蓝图事件publicHandler: 定义组件蓝图里的动作接口index.js
```tsx var Event = require(“bcore/event”); var $ = require(“jquery”); var _ = require(“lodash”); //var Chart = require(‘XXX’); var ECharts = require(“echarts”); const { param } = require(“jquery”);
/**
- 马良基础类
/
module.exports = Event.extend(
function Base(container, config) {
this.config = {
theme: {},
};
this.container = $(container); //容器
this.apis = config.apis; //hook一定要有
this._data = null; //数据
this.chart = null; //图表
this.init(config);
},
{
/*
- 公有初始化
- config参数对应取的是package.json定义的config字段，表示组件的样式信息 / init: function (config) { //1.初始化,合并配置 this.mergeConfig(config); //2.刷新布局,针对有子组件的组件 可有可无 this.updateLayout(); //3.子组件实例化 //this.chart = new Chart(this.container[0], this.config); this.chart = ECharts.init(this.container[0]); //4.如果有需要, 更新样式 this.updateStyle(); // this.container.append(‘‘); // this.button = this.container.find(“.button”); // //默认样式 (不建议在组件中引全局css样式表, 直接用js写) // this.button.css({ // color: “#fff”, // cursor: “pointer”, // }); }, /*
- 绘制，默认渲染方法
- 在init方法之后执行
- @param data data参数代表的是组件数据接口返回的数据
- @param options 不一定有，组件的样式配置，与init方法传递的config参数原理相同
- !!注意: 第二个参数支持config, 就不需要updateOptions这个方法了
*/
render: function (data, config) {
data = this.data(data);
var cfg = this.mergeConfig(config);
//更新图表
//this.chart.render(data, cfg);
// this.container.html(data[0].value)
//更新图表
this.chart.setOption({
xAxis: {
type: “category”,
data: data[0].x,
axisLabel: {
}, }, yAxis: { type: “value”, }, tooltip: { show: cfg.tooltipShow, trigger: “axis”, }, series: [ {color: "rgba(0,255,255,1)",fontSize: 10,
}, ], }); var a = this; this.chart.on(“click”, function (params) { a.emit(“echarts-click”, { value: params.data, x: params.name }); }); //如果有需要的话,更新样式 this.updateStyle(); // this.button.html(_.get(data, [0, “value”])); // // 点击事件（如何配置回调ID） // var _this = this; // this.button.on(“click”, function () { // _this.emit(“button-click”, { value: $(this).html() }); // }); }, showTooltip: function (show) { this.chart.setOption({ xAxis: { type: “category”, data: this._data[0].x, axisLabel: {data: data[0].value,type: "line",
}, }, yAxis: { type: “value”, }, tooltip: { show: show, trigger: “axis”, }, series: [ {color: "rgba(0,255,255,1)",fontSize: 10,
}, ], }); var a = this; this.chart.on(“click”, function (params) { a.emit(“echarts-click”, { value: params.data, x: params.name }); }); }, setColor: function (obj) { this.button.css({ color: obj.color }); }, /**data: this._data[0].value,type: "line",
- resize方法则是在修改组件大小时会触发，传递当前大小的width和height参数。
- @param width
- @param height / resize: function (width, height) { this.updateLayout(width, height); //更新图表 //this.chart.render({ // width: width, // height: height //}) }, /*
- 每个组件根据自身需要,从主题中获取颜色 覆盖到自身配置的颜色中.
- 暂时可以不填内容 / setColors: function () { //比如 //var cfg = this.config; //cfg.color = cfg.theme.series[0] || cfg.color; }, /*
- 数据,设置和获取数据
- @param data
- @returns {|number} / data: function (data) { if (data) { this._data = data; } return this._data; }, /**
- 更新配置
- 优先级: config.colors > config.theme > this.config.theme > this.config.colors
- [注] 有数组的配置一定要替换
- @param config
- @private / mergeConfig: function (config) { if (!config) { return this.config; } this.config.theme = .defaultsDeep(config.theme || {}, this.config.theme); this.setColors(); this.config = .defaultsDeep(config || {}, this.config); return this.config; }, /*
- 更新布局
- 可有可无 / updateLayout: function () {}, /*
- 更新样式
- 有些子组件控制不到的,但是需要控制改变的,在这里实现 / updateStyle: function () { var cfg = this.config; this.container.css({ “font-size”: cfg.size + “px”, color: cfg.color || “#fff”, }); }, /*
- 更新配置
- 如果设置了updateOptions方法，那么在调整组件样式时，不会触发render方法，而触发updateOptions方法
- !!注意:如果render支持第二个参数options, 那updateOptions不是必须的 / //updateOptions: function (options) {}, /*
- 更新某些配置
- 给可以增量更新配置的组件用 / //updateXXX: function () {}, /*
- index.js中的emit方法需要在package.json的events配置中声明后，蓝图编辑器中才会出现此事件，
- 它抛出事件的value值需要为object类型。此方法也可以在交互面板中使用。 / // emit: function () {}, /*
- 在组件销毁时调用，销毁组件
*/
destroy: function () {
console.log(“请实现 destroy 方法”);
},
}
);
<a name="z6YcG"></a>## package.json```json{"name": "@gornin/echart-demo","version": "0.0.1","dependencies": {"bcore": "0.0.18","echarts": "^5.3.2","jquery": "2.1.4","lodash": "4.6.1",},"datav": {"cn_name": "echart-demo","icon": "","protocol": 2,"type": ["regular"],"view": {"width": "400","height": "200","minWidth": "200","minHeight": "100"},"config": {"tooltipShow": {"name": "展示弹窗","type": "switch","default": true,"statusText": true},"size": {"name": "字号","type": "number","default": 22,"range": [10,100]}},"apis": {"source": {"handler": "render","description": "接口描述","fields": {"value": {"description": "值说明"}}}},"api_data": {"source": [{"x": ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"value": [150,230,224,218,135,147,260]}]},"events": {"echarts-click": {"description": "echarts点击","fields": {"value": {"description": "value"},"x": {"description": "x"}}}},"publicHandler": {"showTooltip": {"name": "展示弹窗","description": "展示弹窗","type": "object","fields": {"data": {"name": "数据","type": "boolean"}}}}}}
静态资源，组件兼容更新
官网文档
package.json 配置
{"datav":{"config":{// ..."path": {"type": "hidden","default": "./resources/surface.json"},"img": {"type": "hidden","default": "./resources/surface.png"}}}}
index.js
console.log("config:", cfg, cfg.path);if (cfg.path) {this.app.loader.add(cfg.path).load(() => this.onLoadSpriteComplete(this));}
resources 目录
保存静态资源
若有收获，就点个赞吧
0 人点赞
