自定义echarts控件
徐猛 于2024/09/02 09:33:42创建
李怡甜 于2024/11/25 15:47:10修改
展开目录
## 自定义控件文档中js文件规范 js文件是组件的主入口文件，该文件提供了一个示例供您参考，并介绍了js文件中常用的组件生命周期或相关函数。 | 函数 | 说明 | | :------------ | :------------ | | definition() | 控件初始化时需要的属性(下面有详细介绍) | | init() | 默认初始化方法 | | render() | 默认渲染方法，当组件初始化和重绘时被调用。(自定义实现) | | resize() | 缩放，当组件被拖拽、缩放时被调用。 | | _transData() | 缩放，当组件被拖拽、缩放时被调用。 | js文件示例如下： ```javascript let jsonConfig = { "chartConfig": [ { "title": "位置", "key": "center", "children": [ { "title": "水平位置", "key": "centerX", "widget": 6, "max": 100, "min": 0, "default": 50, "styleUnit": "%" }, { "title": "垂直位置", "key": "centerY", "widget": 6, "max": 100, "min": 0, "default": 60, "styleUnit": "%" } ] }, { "title": "图形样式", "key": "custom", "children": [ { "title": "外径", "key": "radiusOut", "widget": 6, "max": 100, "min": 0, "default": 55, "styleUnit": "%" }, { "title": "内径", "key": "radiusIn", "widget": 6, "max": 100, "min": 0, "default": 0, "styleUnit": "%" }, { "title": "圆角", "key": "itemStyle__normal__borderRadius", "widget": 6, "max": 20, "min": 0, "default": 5 }, { "title": "边框大小", "key": "itemStyle__normal__borderWidth", "widget": 6, "max": 20, "min": 0, "default": 2 }, { "title": "边框颜色", "key": "itemStyle__normal__borderColor", "widget": 5, "default": "#fff" } ] } ], "dataConfig": { "indexs": [ { "name": "展示", "sort": 0, "format": null, "type": 3 } ], "columns": [ { "name": "度量一", "sort": 0, "aggregate": 1, "format": null, "type": 2 } ], "data": [ { "展示": "展示一", "度量一": 78 }, { "展示": "展示二", "度量一": 100 }, { "展示": "展示三", "度量一": 100 }, { "展示": "展示四", "度量一": 40 }, { "展示": "展示五", "度量一": 70 }, { "展示": "展示六", "度量一": 105 } ] } } // defaultOption echarts默认配置项 let defaultOption = { "series": [ { "name": '基础饼图', "type": 'pie', "radius": ['0%', '55%'], "center": ['50%', '60%'], "itemStyle": { "normal": { "label": { "show": true, "color": 'rgba(0, 0, 0, 1)', }, "labelLine": { "length": 3, "show": true, }, "borderRadius": 0, "borderWidth": 0, "borderColor": '#fff', }, }, "data": [ { "value": 400, "name": '展示一', }, { "value": 335, "name": '展示二', }, { "value": 310, "name": '展示三', }, { "value": 234, "name": '展示四', }, { "value": 135, "name": '展示五', }, ], "type": 'pie', "radius": '50%', "label": { "normal": { "fontSize": 12, }, }, "emphasis": { "itemStyle": { "shadowBlur": 10, "shadowOffsetX": 0, "shadowColor": 'rgba(0, 0, 0, 0.5)', }, }, }, ], "tooltip": { "show": true, "trigger": 'item', }, "legend": { "show": true, "orient": 'vertical', "left": 'left', }, "label": { "show": true, "position": 'outside', "color": '#409EFF', }, "color": ['#538FE2', '#89E5F9', '#9DC6FF'], }; /** * 创建的所有控件的实例都必须继承 XZChart基类 */ class custom_pie extends XZChart { constructor(selectors, config) { super(selectors, config); } /** * 图形定义 此方法为必填方法 定义控件的基本属性 * 定义类型为饼图 * 默认的json配置为 jsonConfig PS:请注意拷贝 否则会修改到全局 因为你可能多次用到这个实例对象 * 需要的维度数量为1 * 需要的度量数量为1 */ definition() { this.definitions.type = 'custom_pie'; this.definitions.jsonConfig = jsonConfig; // 使用时深度拷贝下。 this.definitions.defaultOption = defaultOption; this.definitions.indexCount = 1; this.definitions.columnCount = 1; } /** * 控件初始化方法 会在控件初始化的时候执行一次 注意：只会执行一次！！请确保在正确的地方使用它 * 该过程中我们 需要初始化echarts实例 */ init() { this.chart = echarts.init(this.controlEl.el); this.chart.on('click', (params) => {}); this.render(); } /** * 控件获取数据的方法(核心) * 请注意我们的数据和配置项是分开的 都被定义在json文件里面 也就是我们一开始引入的 jsonConfig 最后挂在到 this.option上 * 格式如下： * option:{ dataConfig: {indexs: [],columns: [],data: []}} * 我们echarts最后的配置项会被设在到 this.chartOptions上 请确保最后设置的chart.setOption的内容是这个对象 * 我们在获取数据的时候，会根据我们配置项的dataConfig.indexs 以及 dataConfig.columns 来获取我们想要的数据 * * * */ _transData() { const { option: { dataConfig }, dataHandler, chartOptions, } = this; /** * dataHandler是数据处理的核心地方 我们不关心如何实现 只关系如何取值 * 下例解释 getDataByColumn 的获取值的方法 */ /** 获取控件数据配置的最后一个维度 （本例中为 "展示" ）*/ let findexs = dataHandler.renderIndexs.at(-1); const { columns } = dataConfig; if (findexs && columns.length) { /** 获取控件数据配置的第一个度量 */ /* 本例中为 { "name": "度量一","aggregate": 1, "type": 2} 其中 aggregate 为根据维度进行聚合的聚合方式 */ const { name, aggregate } = columns[0]; /** * getDataByColumn 为 dataHandler 获取指定维度或者度量的数据， 只需要把对应的name传入就可以得到（如果是度量需要第二个参数需要传入聚合方式） * 下例中得到数据为 columsZeroData -- [78, 100, 100, 40, 70, 105] * nameArr -- ['展示一', '展示二', '展示三', '展示四', '展示五', '展示六'] */ const columsZeroData = dataHandler.getDataByColumn(name, aggregate); const nameArr = dataHandler.getDataByColumn(findexs.name); /** * 对饼图需要的数据进行整理 具体控件请查询ecahrts官网 * 格式为 [{name: '展示一', value: 1}] */ const data = nameArr.map((name, index) => ({ name, value: columsZeroData[index], })); /** * 对最后需要chart.setOption的对象进行赋值 */ chartOptions.series[0].data = data; chartOptions.series[0].name = name; } } /** * * 控件处理配置项的核心方法 * @param {使我们json里面配置的chartConfig} chartConfig * 如果不是第一次设置配置，那么chartConfig会和this.chartConfig进行合并 创建出新的chartConfig * 合并字段为 * chartConfig json里面的配置项 * defaultOption echarts默认配置项 * this.chartConfig 每次设置的最新的配置项 */ _transOption(chartConfig) { const { custom, center } = chartConfig; /** * 获取到饼图的第一个系列 关于系列的详细知识请查询echarts文档 */ const optionZero = this.chartOptions.series[0]; /** * 设置饼图的半径和样式 （非必须 根据你想要的效果去处理） */ if (custom) { optionZero.radius = [custom.radiusIn, custom.radiusOut]; } if (center) { optionZero.center = [center.centerX, center.centerY]; } /** * ........ 下面可以 自定义设置你想要设置的配置项 * 这样一个饼图就处理好了！！！ */ } /** * 控件缩放时候需要执行的方法 可选 * 这里我们进行了对echarts的resize方法进行了调用 确保缩放后能重新渲染 */ resize() { this.chart && this.chart.resize(); } /** * 控件渲染方法 会在控件初始化、改变配置或者数据的时候调用 * 渲染控件时请确保控件已经初始化完毕 对于echarts控件 请确保echarts控件已经在init方法中 执行过echarts.init */ render() { if (this.chart) { this.chart.setOption(this.chartOptions); } } } /** * 图形默认配置 这里的属性会和 this.chartOptions 的属性进行合并 * 详情配置请查询echarts官网 */ window.custom_pie = custom_pie; ```