自定义echarts控件
自定义控件文档中js文件规范
js文件是组件的主入口文件，该文件提供了一个示例供您参考，并介绍了js文件中常用的组件生命周期或相关函数。
| 函数 | 说明 |
|---|---|
| definition() | 控件初始化时需要的属性(下面有详细介绍) |
| init() | 默认初始化方法 |
| render() | 默认渲染方法，当组件初始化和重绘时被调用。(自定义实现) |
| resize() | 缩放，当组件被拖拽、缩放时被调用。 |
| _transData() | 缩放，当组件被拖拽、缩放时被调用。 |
js文件示例如下：
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;