diff --git a/src/assets/images/chart/informations/text_barrage.png b/src/assets/images/chart/informations/text_barrage.png new file mode 100644 index 00000000..3b7db8ef Binary files /dev/null and b/src/assets/images/chart/informations/text_barrage.png differ diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 16b0bb69..bc9825fb 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,4 +1,5 @@ export * from '@/hooks/useTheme.hook' export * from '@/hooks/usePreviewScale.hook' export * from '@/hooks/useCode.hook' -export * from '@/hooks/useChartDataFetch.hook' \ No newline at end of file +export * from '@/hooks/useChartDataFetch.hook' +export * from '@/hooks/useLifeHandler.hook' \ No newline at end of file diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts new file mode 100644 index 00000000..aa0d557b --- /dev/null +++ b/src/hooks/useLifeHandler.hook.ts @@ -0,0 +1,47 @@ +import { CreateComponentType, EventLife } from '@/packages/index.d' +import * as echarts from 'echarts' + +// 所有图表组件集合对象 +const components: { [K in string]?: any } = {} + +// 项目提供的npm 包变量 +export const npmPkgs = { echarts } + +export const useLifeHandler = (chartConfig: CreateComponentType) => { + const events = chartConfig.events || {} + // 生成生命周期事件 + const lifeEvents = { + [EventLife.BEFORE_MOUNT](e: any) { + // 存储组件 + components[chartConfig.id] = e.component + const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim() + generateFunc(fnStr, e) + }, + [EventLife.MOUNTED](e: any) { + const fnStr = (events[EventLife.MOUNTED] || '').trim() + generateFunc(fnStr, e) + } + } + return lifeEvents +} + +/** + * + * @param fnStr 用户方法体代码 + * @param e 执行生命周期的动态组件实例 + */ +function generateFunc(fnStr: string, e: any) { + try { + // npmPkgs 便于拷贝 echarts 示例时设置option 的formatter等相关内容 + Function(` + "use strict"; + return ( + async function(e, components, node_modules){ + const {${Object.keys(npmPkgs).join()}} = node_modules; + ${fnStr} + } + )`)().bind(e?.component)(e, components, npmPkgs) + } catch (error) { + console.error(error) + } +} diff --git a/src/packages/components/Charts/Bars/BarCommon/config.vue b/src/packages/components/Charts/Bars/BarCommon/config.vue index a8b3a525..f7b48235 100644 --- a/src/packages/components/Charts/Bars/BarCommon/config.vue +++ b/src/packages/components/Charts/Bars/BarCommon/config.vue @@ -3,12 +3,6 @@ - - - - - 恢复默认 - - - - - - 恢复默认 - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 展示阴影 + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/packages/components/Informations/Texts/TextBarrage/index.ts b/src/packages/components/Informations/Texts/TextBarrage/index.ts new file mode 100644 index 00000000..a93cf259 --- /dev/null +++ b/src/packages/components/Informations/Texts/TextBarrage/index.ts @@ -0,0 +1,14 @@ +import image from '@/assets/images/chart/informations/text_barrage.png' +import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' +import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' + +export const TextBarrageConfig: ConfigType = { + key: 'TextBarrage', + chartKey: 'VTextBarrage', + conKey: 'VCTextBarrage', + title: '弹幕文字', + category: ChatCategoryEnum.TEXT, + categoryName: ChatCategoryEnumName.TEXT, + package: PackagesCategoryEnum.INFORMATIONS, + image +} diff --git a/src/packages/components/Informations/Texts/TextBarrage/index.vue b/src/packages/components/Informations/Texts/TextBarrage/index.vue new file mode 100644 index 00000000..54e9df2b --- /dev/null +++ b/src/packages/components/Informations/Texts/TextBarrage/index.vue @@ -0,0 +1,102 @@ + + + + + diff --git a/src/packages/components/Informations/Texts/index.ts b/src/packages/components/Informations/Texts/index.ts index 093a2d52..960dcaef 100644 --- a/src/packages/components/Informations/Texts/index.ts +++ b/src/packages/components/Informations/Texts/index.ts @@ -1,4 +1,5 @@ import { TextCommonConfig } from './TextCommon/index' +import { TextBarrageConfig } from './TextBarrage/index' import { TextGradientConfig } from './TextGradient/index' -export default [TextCommonConfig, TextGradientConfig] +export default [TextCommonConfig, TextGradientConfig, TextBarrageConfig] diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 5e800fe9..94e90c91 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -90,6 +90,14 @@ export const BlendModeEnumList = [ { label: '亮度', value: 'luminosity' } ] +// vue3 生命周期事件 +export enum EventLife { + // 渲染之后 + MOUNTED = 'vnodeMounted', + // 渲染之前 + BEFORE_MOUNT = 'vnodeBeforeMount', +} + // 组件实例类 export interface PublicConfigType { id: string @@ -115,12 +123,15 @@ export interface PublicConfigType { } filter?: string status: StatusType + events?: { + [K in EventLife]?: string + } } export interface CreateComponentType extends PublicConfigType, requestConfig { key: string chartConfig: ConfigType - option: GlobalThemeJsonType + option: GlobalThemeJsonType, } // 组件成组实例类 diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 3924834a..ca20e464 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -81,6 +81,8 @@ export class PublicConfigClass implements PublicConfigType { public request = cloneDeep(requestConfig) // 数据过滤 public filter = undefined + // 事件 + public events = undefined } // 多选成组类 diff --git a/src/settings/animations/index.ts b/src/settings/animations/index.ts index 5d588fc6..65106a74 100644 --- a/src/settings/animations/index.ts +++ b/src/settings/animations/index.ts @@ -11,7 +11,6 @@ export const animations = [ { label: '放大晃动缩小', value: 'tada' }, { label: '扇形摇摆', value: 'wobble' }, { label: '左右上下晃动', value: 'jello' }, - { label: 'Y轴旋转', value: 'flip' } ] }, { diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index 2a27725c..efaee756 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue @@ -116,7 +116,8 @@ $centerHeight: 100px; height: $centerHeight; overflow: hidden; .list-img { - height: 100%; + height: 100px; + width: 140px; border-radius: 6px; @extend .go-transition; } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts new file mode 100644 index 00000000..c7f78903 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts @@ -0,0 +1,177 @@ +// 获取实例 +const eTemplateString = ` +console.log(e) +` +// 获取全局 echarts 实例 +const echartsTemplateString = ` +console.log(echarts) +` + +// 获取当前组件图表集合 +const componentsTemplateString = ` +console.log(components) +` + +// 获取 nodeModules 实例 +const nodeModulesTemplateString = ` +console.log(node_modules) +` + +// 异步引入 +const importTemplateString = ` +await import('https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.js') + +// lodash 默认赋值给 "_" +console.log('isEqual', _.isEqual(['1'], ['1'])) +` + +// 修改图表 tooltip +const tooltipTemplateString = + ` +// 获取echart实例 +const chart = this.refs.vChartRef.chart + +// 图表设置tooltip +chart.setOption({ + tooltip: { + trigger: 'axis', //item + enterable: true, + formatter (params) { + return` + + '`' + + ` +
+ + 《这是一个自定义的tooltip》 +
+
+ ` + + '$' + + `{Object.entries(params[0].value).map(kv => ` + + '`' + + `
` + + '$' + + `{kv[0]}:` + + '$' + + `{kv[1]}
` + + '`' + + `).join('')} +
+ ` + + '`;' + + ` + }, + } +}) +` + +// 添加【轮播列表】样式 +const addStyleString = + ` +// 组件样式作用域标识 +const scoped = this.subTree.scopeId +function loadStyleString(css){ + let style = document.createElement('style') + style.type = 'text/css' + style.appendChild(document.createTextNode(css)) + let head = document.getElementsByTagName('head')[0] + head.appendChild(style) +} +loadStyleString(` + + '`' + + ` +.dv-scroll-board[` + + '$' + + `{scoped}] { + position: relative; + overflow: hidden; +} +.dv-scroll-board[` + + '$' + + `{scoped}]::before { + content: ''; + display: block; + position: absolute; + top: -20%; + left: -100%; + width: 550px; + height: 60px; + transform: rotate(-45deg); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0)); + animation: cross 2s infinite; +} +@keyframes cross{ + to{ + top: 80%; + left: 100%; + transform: rotate(-45deg); + } +} +` + + '`' + + `) +` + +// 修改地图原点大小 +const editMapPointString = ` +const chart = this.refs.vChartRef.chart +// 定义地图原点大小 同理可自定义标签等等内容 +this.props.chartConfig.option.series[0].symbolSize = (val) => { + return Math.sqrt(val[2]) / 3; +} +this.setupState.vEchartsSetOption(); +let i = 0; // 当前轮播索引 +const len = 3; // 轮播部分提示 +(function showTips() { + const action = (type, dataIndex) => { + chart.dispatchAction({ + type, + dataIndex, + seriesIndex: 0, + }); + } + setInterval(() => { + action("downplay", i); + action("hideTip", i); + if (i === len) i = 0; + i++; + action("highlight", i); + action("showTip", i); + }, 2000); +})() +` + +export const templateList = [ + { + description: '获取当前组件实例', + code: eTemplateString + }, + { + description: '获取全局 echarts 实例', + code: echartsTemplateString + }, + { + description: '获取组件图表集合', + code: componentsTemplateString + }, + { + description: '获取 nodeModules 实例', + code: nodeModulesTemplateString + }, + { + description: '获取远程 CDN 库', + code: importTemplateString + }, + { + description: '修改图表 tooltip', + code: tooltipTemplateString + }, + { + description: '添加【轮播列表】样式', + code: addStyleString + }, + { + description: '修改【地图】圆点，新增提示自动轮播', + code: editMapPointString + } +] diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts new file mode 100644 index 00000000..b6d23e30 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts @@ -0,0 +1,3 @@ +import ChartEventMonacoEditor from './index.vue' + +export { ChartEventMonacoEditor } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue new file mode 100644 index 00000000..1865164d --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue @@ -0,0 +1,285 @@ + + + + + diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue new file mode 100644 index 00000000..e60a7731 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/views/chart/ContentConfigurations/index.d.ts b/src/views/chart/ContentConfigurations/index.d.ts index d17818aa..59ca5bcf 100644 --- a/src/views/chart/ContentConfigurations/index.d.ts +++ b/src/views/chart/ContentConfigurations/index.d.ts @@ -3,4 +3,5 @@ export enum TabsEnum { CHART_SETTING = 'chartSetting', CHART_ANIMATION = 'chartAnimation', CHART_DATA = 'chartData', + CHART_EVENT = 'chartEvent' } diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index c1b11b20..0f8a8609 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -75,12 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore()) const { setItem } = useChartLayoutStore() const chartEditStore = useChartEditStore() -const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon } = icon.ionicons5 +const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue')) const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue')) const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue')) const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue')) +const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue')) const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue')) const collapsed = ref(getDetails.value) @@ -148,6 +149,12 @@ const chartsTabList = [ title: '数据', icon: FlashIcon, render: ChartData + }, + { + key: TabsEnum.CHART_EVENT, + title: '事件', + icon: RocketIcon, + render: ChartEvent } ] diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue index 81790f63..422fd441 100644 --- a/src/views/preview/components/PreviewRenderGroup/index.vue +++ b/src/views/preview/components/PreviewRenderGroup/index.vue @@ -18,6 +18,7 @@ :themeSetting="themeSetting" :themeColor="themeColor" :style="{ ...getSizeStyle(item.attr) }" + v-on="useLifeHandler(item)" >
@@ -27,7 +28,7 @@ import { PropType } from 'vue' import { CreateComponentGroupType } from '@/packages/index.d' import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils' - +import { useLifeHandler } from '@/hooks' const props = defineProps({ groupData: { type: Object as PropType, diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index 4335ab96..af55e9c1 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -29,6 +29,7 @@ :themeSetting="themeSetting" :themeColor="themeColor" :style="{ ...getSizeStyle(item.attr) }" + v-on="useLifeHandler(item)" >
@@ -41,7 +42,7 @@ import { CreateComponentGroupType } from '@/packages/index.d' import { chartColors } from '@/settings/chartThemes/index' import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils' - +import { useLifeHandler } from '@/hooks' const props = defineProps({ localStorageInfo: { type: Object as PropType,