146 lines
2.9 KiB
TypeScript
146 lines
2.9 KiB
TypeScript
|
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
|||
|
|
import { MapConfig } from './index'
|
|||
|
|
import { chartInitConfig } from '@/settings/designSetting'
|
|||
|
|
import { CreateComponentType } from '@/packages/index.d'
|
|||
|
|
import cloneDeep from 'lodash/cloneDeep'
|
|||
|
|
|
|||
|
|
export const includes = []
|
|||
|
|
const BAR_ITEM_DEFAULT_COLORS = [
|
|||
|
|
{ color: "#00CF28", wfColor: "#03D61A" },
|
|||
|
|
{ color: "#AF380E", wfColor: "#BD1408" },
|
|||
|
|
{ color: "#047DB0", wfColor: "#02BBD1" },
|
|||
|
|
{ color: "#01E5A9", wfColor: "#01C97F" },
|
|||
|
|
];
|
|||
|
|
/**
|
|||
|
|
* 柱图子项
|
|||
|
|
*/
|
|||
|
|
class BarItem {
|
|||
|
|
/**
|
|||
|
|
* 高度
|
|||
|
|
* @default 10
|
|||
|
|
*/
|
|||
|
|
tall: number = 10;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 颜色 (可选)
|
|||
|
|
*/
|
|||
|
|
color?: string;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 框线颜色 (可选)
|
|||
|
|
*/
|
|||
|
|
wfColor?: string;
|
|||
|
|
|
|||
|
|
constructor(options?: Partial<BarItem>) {
|
|||
|
|
if (options) {
|
|||
|
|
Object.assign(this, options);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 柱图选项的类定义
|
|||
|
|
*/
|
|||
|
|
export class BarOption {
|
|||
|
|
/**
|
|||
|
|
* 地名，参考飞线参数
|
|||
|
|
* @default "湖北省"
|
|||
|
|
*/
|
|||
|
|
location: string = "湖北省";
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 宽度
|
|||
|
|
* @default 15
|
|||
|
|
*/
|
|||
|
|
width: number = 15;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 旋转，角度制
|
|||
|
|
* @default -45
|
|||
|
|
*/
|
|||
|
|
rotation: number = -45;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* X方向偏移
|
|||
|
|
* @default 5
|
|||
|
|
*/
|
|||
|
|
offsetX: number = 5;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Y方向偏移
|
|||
|
|
* @default 0
|
|||
|
|
*/
|
|||
|
|
offsetY: number = 0;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Z方向偏移(即高度)
|
|||
|
|
* @default 0
|
|||
|
|
*/
|
|||
|
|
offsetZ: number = 0;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击触发回调
|
|||
|
|
*/
|
|||
|
|
onClick: (node: any, item: BarItem) => void = (node, item) => {
|
|||
|
|
console.log("click ->", node, item);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 移入触发回调
|
|||
|
|
*/
|
|||
|
|
onEnter: (node: any, item: BarItem) => void = (node, item) => {
|
|||
|
|
console.log("enter ->", node, item);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 移出触发回调
|
|||
|
|
*/
|
|||
|
|
onLeave: (node: any, item: BarItem) => void = (node, item) => {
|
|||
|
|
console.log("leave ->", node, item);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 数据项列表
|
|||
|
|
* @default []
|
|||
|
|
*/
|
|||
|
|
items: BarItem[] = [];
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 构造函数
|
|||
|
|
* @param options Partial<BarOption>
|
|||
|
|
*/
|
|||
|
|
constructor(options?: Partial<BarOption>) {
|
|||
|
|
const opts = { ...options };
|
|||
|
|
|
|||
|
|
if (opts.items) {
|
|||
|
|
this.items = opts.items.map((item, index) => {
|
|||
|
|
const defaultColorSet = BAR_ITEM_DEFAULT_COLORS[index % BAR_ITEM_DEFAULT_COLORS.length];
|
|||
|
|
|
|||
|
|
const finalColor = item.color ?? defaultColorSet.color;
|
|||
|
|
const finalWfColor = item.wfColor ?? defaultColorSet.wfColor;
|
|||
|
|
|
|||
|
|
// 3. 创建一个新的 BarItem 实例，包含所有信息
|
|||
|
|
return new BarItem({
|
|||
|
|
...item,
|
|||
|
|
color: finalColor,
|
|||
|
|
wfColor: finalWfColor,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
delete opts.items;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Object.assign(this, opts);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const option = {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
export const MapDefaultConfig = { ...option }
|
|||
|
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
|||
|
|
public key: string = MapConfig.key
|
|||
|
|
public attr = { ...chartInitConfig, w: 1300, h: 900, zIndex: -1 }
|
|||
|
|
public chartConfig = cloneDeep(MapConfig)
|
|||
|
|
public option = echartOptionProfixHandle(option, includes)
|
|||
|
|
// public option = option
|
|||
|
|
}
|