@qxs-bns/components 0.0.63 → 0.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/package.json.mjs +1 -1
- package/es/src/data-chart/src/components/area.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/area.vue2.mjs.map +1 -1
- package/es/src/data-chart/src/components/area.vue3.mjs +1 -1
- package/es/src/data-chart/src/components/bar.vue.mjs +1 -1
- package/es/src/data-chart/src/components/bar.vue.mjs.map +1 -1
- package/es/src/data-chart/src/components/bar.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/bar.vue2.mjs.map +1 -1
- package/es/src/data-chart/src/components/bar.vue3.mjs +2 -0
- package/es/src/data-chart/src/components/bar.vue3.mjs.map +1 -0
- package/es/src/data-chart/src/components/funnel.vue.mjs +1 -1
- package/es/src/data-chart/src/components/funnel.vue.mjs.map +1 -1
- package/es/src/data-chart/src/components/funnel.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/funnel.vue2.mjs.map +1 -1
- package/es/src/data-chart/src/components/funnel.vue3.mjs +2 -0
- package/es/src/data-chart/src/components/funnel.vue3.mjs.map +1 -0
- package/es/src/data-chart/src/components/line.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/line.vue2.mjs.map +1 -1
- package/es/src/data-chart/src/components/pie.vue.mjs +1 -1
- package/es/src/data-chart/src/components/pie.vue.mjs.map +1 -1
- package/es/src/data-chart/src/components/pie.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/pie.vue2.mjs.map +1 -1
- package/es/src/data-chart/src/components/pie.vue3.mjs +2 -0
- package/es/src/data-chart/src/components/pie.vue3.mjs.map +1 -0
- package/es/src/data-chart/src/components/radar.vue.mjs +1 -1
- package/es/src/data-chart/src/components/radar.vue.mjs.map +1 -1
- package/es/src/data-chart/src/components/radar.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/radar.vue2.mjs.map +1 -1
- package/es/src/data-chart/src/components/radar.vue3.mjs +2 -0
- package/es/src/data-chart/src/components/radar.vue3.mjs.map +1 -0
- package/es/src/data-chart/src/components/scatter-simple.vue.mjs +1 -1
- package/es/src/data-chart/src/components/scatter-simple.vue.mjs.map +1 -1
- package/es/src/data-chart/src/components/scatter-simple.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/scatter-simple.vue2.mjs.map +1 -1
- package/es/src/data-chart/src/components/scatter-simple.vue3.mjs +2 -0
- package/es/src/data-chart/src/components/scatter-simple.vue3.mjs.map +1 -0
- package/es/src/data-chart/src/components/scatter.vue.mjs +1 -1
- package/es/src/data-chart/src/components/scatter.vue.mjs.map +1 -1
- package/es/src/data-chart/src/components/scatter.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/scatter.vue2.mjs.map +1 -1
- package/es/src/data-chart/src/components/scatter.vue3.mjs +2 -0
- package/es/src/data-chart/src/components/scatter.vue3.mjs.map +1 -0
- package/es/src/data-chart/src/data-chart.vue.mjs +1 -1
- package/es/src/data-chart/src/data-chart.vue.mjs.map +1 -1
- package/es/src/data-chart/src/utils/useCharts.mjs +1 -1
- package/es/src/data-chart/src/utils/useCharts.mjs.map +1 -1
- package/lib/package.json.cjs +1 -1
- package/lib/src/data-chart/src/components/area.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/area.vue2.cjs.map +1 -1
- package/lib/src/data-chart/src/components/area.vue3.cjs +1 -1
- package/lib/src/data-chart/src/components/bar.vue.cjs +1 -1
- package/lib/src/data-chart/src/components/bar.vue.cjs.map +1 -1
- package/lib/src/data-chart/src/components/bar.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/bar.vue2.cjs.map +1 -1
- package/lib/src/data-chart/src/components/bar.vue3.cjs +2 -0
- package/lib/src/data-chart/src/components/bar.vue3.cjs.map +1 -0
- package/lib/src/data-chart/src/components/funnel.vue.cjs +1 -1
- package/lib/src/data-chart/src/components/funnel.vue.cjs.map +1 -1
- package/lib/src/data-chart/src/components/funnel.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/funnel.vue2.cjs.map +1 -1
- package/lib/src/data-chart/src/components/funnel.vue3.cjs +2 -0
- package/lib/src/data-chart/src/components/funnel.vue3.cjs.map +1 -0
- package/lib/src/data-chart/src/components/line.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/line.vue2.cjs.map +1 -1
- package/lib/src/data-chart/src/components/pie.vue.cjs +1 -1
- package/lib/src/data-chart/src/components/pie.vue.cjs.map +1 -1
- package/lib/src/data-chart/src/components/pie.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/pie.vue2.cjs.map +1 -1
- package/lib/src/data-chart/src/components/pie.vue3.cjs +2 -0
- package/lib/src/data-chart/src/components/pie.vue3.cjs.map +1 -0
- package/lib/src/data-chart/src/components/radar.vue.cjs +1 -1
- package/lib/src/data-chart/src/components/radar.vue.cjs.map +1 -1
- package/lib/src/data-chart/src/components/radar.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/radar.vue2.cjs.map +1 -1
- package/lib/src/data-chart/src/components/radar.vue3.cjs +2 -0
- package/lib/src/data-chart/src/components/radar.vue3.cjs.map +1 -0
- package/lib/src/data-chart/src/components/scatter-simple.vue.cjs +1 -1
- package/lib/src/data-chart/src/components/scatter-simple.vue.cjs.map +1 -1
- package/lib/src/data-chart/src/components/scatter-simple.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/scatter-simple.vue2.cjs.map +1 -1
- package/lib/src/data-chart/src/components/scatter-simple.vue3.cjs +2 -0
- package/lib/src/data-chart/src/components/scatter-simple.vue3.cjs.map +1 -0
- package/lib/src/data-chart/src/components/scatter.vue.cjs +1 -1
- package/lib/src/data-chart/src/components/scatter.vue.cjs.map +1 -1
- package/lib/src/data-chart/src/components/scatter.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/scatter.vue2.cjs.map +1 -1
- package/lib/src/data-chart/src/components/scatter.vue3.cjs +2 -0
- package/lib/src/data-chart/src/components/scatter.vue3.cjs.map +1 -0
- package/lib/src/data-chart/src/data-chart.vue.cjs +1 -1
- package/lib/src/data-chart/src/data-chart.vue.cjs.map +1 -1
- package/lib/src/data-chart/src/utils/useCharts.cjs +1 -1
- package/lib/src/data-chart/src/utils/useCharts.cjs.map +1 -1
- package/package.json +1 -1
- package/types/src/data-chart/index.d.ts +4 -77
- package/types/src/data-chart/index.d.ts.map +1 -1
- package/types/src/data-chart/src/components/area.vue.d.ts +5 -1
- package/types/src/data-chart/src/components/area.vue.d.ts.map +1 -1
- package/types/src/data-chart/src/components/bar.vue.d.ts +4 -1
- package/types/src/data-chart/src/components/bar.vue.d.ts.map +1 -1
- package/types/src/data-chart/src/components/funnel.vue.d.ts +4 -1
- package/types/src/data-chart/src/components/funnel.vue.d.ts.map +1 -1
- package/types/src/data-chart/src/components/line.vue.d.ts +4 -1
- package/types/src/data-chart/src/components/line.vue.d.ts.map +1 -1
- package/types/src/data-chart/src/components/pie.vue.d.ts +4 -1
- package/types/src/data-chart/src/components/pie.vue.d.ts.map +1 -1
- package/types/src/data-chart/src/components/radar.vue.d.ts +4 -1
- package/types/src/data-chart/src/components/radar.vue.d.ts.map +1 -1
- package/types/src/data-chart/src/components/scatter-simple.vue.d.ts +4 -1
- package/types/src/data-chart/src/components/scatter-simple.vue.d.ts.map +1 -1
- package/types/src/data-chart/src/components/scatter.vue.d.ts +4 -1
- package/types/src/data-chart/src/components/scatter.vue.d.ts.map +1 -1
- package/types/src/data-chart/src/data-chart.vue.d.ts +6 -78
- package/types/src/data-chart/src/data-chart.vue.d.ts.map +1 -1
- package/types/src/data-chart/src/utils/useCharts.d.ts +2 -1
- package/types/src/data-chart/src/utils/useCharts.d.ts.map +1 -1
- package/types/tsconfig.tsbuildinfo +1 -1
@@ -1,2 +1,2 @@
|
|
1
|
-
import{defineComponent as e,
|
1
|
+
import{defineComponent as e,ref as t,computed as o,provide as r,createBlock as s,openBlock as a,resolveDynamicComponent as m,unref as p,normalizeClass as n}from"vue";import{useNamespace as i}from"@qxs-bns/hooks";import{JsonToExcel as l}from"@qxs-bns/utils";import{cloneDeep as u,merge as c}from"lodash-es";import*as d from"./analyze.mjs";import f from"./components/area.vue.mjs";import y from"./components/bar.vue.mjs";import h from"./components/card.vue.mjs";import j from"./components/funnel.vue.mjs";import v from"./components/line.vue.mjs";import g from"./components/pie.vue.mjs";import b from"./components/radar.vue.mjs";import w from"./components/scatter-simple.vue.mjs";import D from"./components/scatter.vue.mjs";import x from"./components/table.vue.mjs";import*as C from"./utils/config.mjs";import{defaultChartOption as S}from"./utils/config.mjs";import{InjectionChartMerge as T}from"./utils/injectionKeys.mjs";import{safeEvalConfig as q}from"./utils/safe-eval.mjs";import*as N from"./utils/types.mjs";import{useDataToExcelJson as B}from"./utils/useCharts.mjs";var z=e({name:"QxsDataChart",__name:"data-chart",props:{modelName:{type:String,required:!1,default:""},showTypeName:{type:String,required:!1,default:"table"},subShowType:{type:String,required:!1},data:{type:Object,required:!1,default:()=>({data:[],desc:{colDesc:[],showDesc:{showType:0,chartOptions:"{}",jsCodeSnippet:""},groupByDesc:[]}})},chartOptions:{type:null,required:!1,default:()=>({})},jsCodeSnippet:{type:String,required:!1,default:""},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(e,{expose:z}){const O=i("data-chart"),k=t(null),_={analyze:d,config:C,types:N},A={table:x,bar:y,line:v,pie:g,radar:b,scatter:D,funnel:j,area:f,card:h,"scatter-simple":w},L=o(()=>u(S[e.showTypeName])),Q=o(()=>{const{desc:{colDesc:t=[],groupByDesc:o=[]}={},data:r=[]}=e.data;let s=[],a=null;const m=o;s=m?.map(e=>(e.xAxis&&(a=e),e))||[];const p=a&&a.colDesc?r.filter(e=>{const t=a.colDesc;return e&&t&&void 0!==e[t]&&null!==e[t]}):r;return{colDesc:t||[],modelName:e.modelName,subShowType:e.subShowType,xGroupByDesc:a||{colDesc:"",groupByDesc:"",groupByValues:[],xAxis:!1},groupByDesc:s,data:p}});function E(){if("table"===e.showTypeName)return null;const t=k.value;return t&&"function"==typeof t.myChart?t.myChart():null}return z({exportExal:function(){if(0===e.data.data.length)return void console.log("暂无数据");const t=B(e.data);l(e.modelName,t)},QxsDataChartConfig:_,myChart:o(()=>E()),getMyChart:E}),r(T,function(t,o){let r=c({},L.value,t,o)||{};if(e.jsCodeSnippet)try{r=q(e.jsCodeSnippet,r)}catch(e){console.error("代码执行失败:",e)}return r}),(e,t)=>(a(),s(m(A[e.showTypeName]),{ref_key:"myChartRef",ref:k,key:e.showTypeName,class:n([p(O).e("wrapper")]),"sub-show-type":e.subShowType,"chart-data":p(Q),"chart-options":e.chartOptions,"lazy-load":e.lazyLoad},null,8,["class","sub-show-type","chart-data","chart-options","lazy-load"]))}});export{z as default};
|
2
2
|
//# sourceMappingURL=data-chart.vue.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"data-chart.vue.mjs","sources":["../../../../../../packages/components/src/data-chart/src/data-chart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EChartData, EChartsOption, IconRow, IFormatPublicData } from './utils/types'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { JsonToExcel } from '@qxs-bns/utils'\nimport { cloneDeep, merge as lodashMerge } from 'lodash-es'\nimport * as analyze from './analyze'\nimport Area from './components/area.vue'\nimport Bar from './components/bar.vue'\nimport Card from './components/card.vue'\nimport Funnel from './components/funnel.vue'\nimport Line from './components/line.vue'\nimport Pie from './components/pie.vue'\nimport Radar from './components/radar.vue'\nimport ScatterSimple from './components/scatter-simple.vue'\nimport Scatter from './components/scatter.vue'\nimport Table from './components/table.vue'\nimport * as config from './utils/config'\nimport { defaultChartOption } from './utils/config'\nimport { InjectionChartMerge } from './utils/injectionKeys'\nimport { safeEvalConfig } from './utils/safe-eval'\nimport * as types from './utils/types'\nimport { useDataToExcelJson } from './utils/useCharts'\n\ndefineOptions({\n name: 'QxsDataChart',\n})\nconst {\n showTypeName = 'table',\n subShowType,\n modelName = '',\n data: propData = {\n data: [],\n desc: {\n colDesc: [],\n showDesc: {\n showType: 0,\n chartOptions: '{}',\n jsCodeSnippet: '',\n },\n groupByDesc: [],\n },\n },\n chartOptions = {},\n jsCodeSnippet = '',\n} = defineProps<{\n modelName?: string\n showTypeName?: IconRow['showTypeName']\n subShowType?: string\n data?: EChartData\n chartOptions?: EChartsOption\n jsCodeSnippet?: string\n}>()\n\nconst ns = useNamespace('data-chart')\n\nconst QxsDataChartConfig = {\n analyze,\n config,\n types,\n}\nconst coms: {\n [key: string]: any\n} = {\n 'table': Table,\n 'bar': Bar,\n 'line': Line,\n 'pie': Pie,\n 'radar': Radar,\n 'scatter': Scatter,\n 'funnel': Funnel,\n 'area': Area,\n 'card': Card,\n 'scatter-simple': ScatterSimple,\n}\n\nconst
|
1
|
+
{"version":3,"file":"data-chart.vue.mjs","sources":["../../../../../../packages/components/src/data-chart/src/data-chart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { EChartData, EChartsOption, IconRow, IFormatPublicData } from './utils/types'\nimport type { ECharts } from 'echarts'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { JsonToExcel } from '@qxs-bns/utils'\nimport { cloneDeep, merge as lodashMerge } from 'lodash-es'\nimport * as analyze from './analyze'\nimport Area from './components/area.vue'\nimport Bar from './components/bar.vue'\nimport Card from './components/card.vue'\nimport Funnel from './components/funnel.vue'\nimport Line from './components/line.vue'\nimport Pie from './components/pie.vue'\nimport Radar from './components/radar.vue'\nimport ScatterSimple from './components/scatter-simple.vue'\nimport Scatter from './components/scatter.vue'\nimport Table from './components/table.vue'\nimport * as config from './utils/config'\nimport { defaultChartOption } from './utils/config'\nimport { InjectionChartMerge } from './utils/injectionKeys'\nimport { safeEvalConfig } from './utils/safe-eval'\nimport * as types from './utils/types'\nimport { useDataToExcelJson } from './utils/useCharts'\n\ndefineOptions({\n name: 'QxsDataChart',\n})\nconst {\n showTypeName = 'table',\n subShowType,\n modelName = '',\n data: propData = {\n data: [],\n desc: {\n colDesc: [],\n showDesc: {\n showType: 0,\n chartOptions: '{}',\n jsCodeSnippet: '',\n },\n groupByDesc: [],\n },\n },\n chartOptions = {},\n jsCodeSnippet = '',\n lazyLoad = true,\n} = defineProps<{\n modelName?: string\n showTypeName?: IconRow['showTypeName']\n subShowType?: string\n data?: EChartData\n chartOptions?: EChartsOption\n jsCodeSnippet?: string\n lazyLoad?: boolean\n}>()\n\nconst ns = useNamespace('data-chart')\n\n// 子组件引用\nconst myChartRef = ref<any>(null)\n\nconst QxsDataChartConfig = {\n analyze,\n config,\n types,\n}\nconst coms: {\n [key: string]: any\n} = {\n 'table': Table,\n 'bar': Bar,\n 'line': Line,\n 'pie': Pie,\n 'radar': Radar,\n 'scatter': Scatter,\n 'funnel': Funnel,\n 'area': Area,\n 'card': Card,\n 'scatter-simple': ScatterSimple,\n}\n\nconst defaultChartOptionCopy = computed(() => {\n return cloneDeep(defaultChartOption[showTypeName])\n})\n\nconst formatPublicData = computed<IFormatPublicData>(() => {\n const { desc: { colDesc = [], groupByDesc = [] } = {}, data = [] } = propData\n\n // 处理 X 轴数据\n let xValue: EChartData['desc']['groupByDesc'] = []\n\n let xGroupByDesc: EChartData['desc']['groupByDesc'][0] | null = null\n const typedGroupByDesc = groupByDesc as EChartData['desc']['groupByDesc']\n xValue = typedGroupByDesc?.map((groupByDescItem) => {\n // if (groupByDescItem.colValues) {\n // groupByDescItem.colValuesDesc = {}\n // groupByDescItem.colValues.split(',')?.forEach((item) => {\n // const [key, value] = item.split(':')\n // groupByDescItem.colValuesDesc[key] = value\n // })\n // }\n if (groupByDescItem.xAxis) {\n xGroupByDesc = groupByDescItem\n }\n return groupByDescItem\n }) || []\n\n // 修复数据过滤逻辑,避免因为字段不存在导致数据被过滤掉\n const dataValue = xGroupByDesc && (xGroupByDesc as EChartData['desc']['groupByDesc'][0]).colDesc\n ? data.filter(item => {\n const colDescKey = (xGroupByDesc as EChartData['desc']['groupByDesc'][0]).colDesc\n return item && colDescKey && (item[colDescKey] !== undefined && item[colDescKey] !== null)\n })\n : data\n\n // if (xGroupByDesc && xGroupByDesc.colValuesDesc && Object.keys(xGroupByDesc.colValuesDesc).length) {\n // const { colDesc: colDescItem, colValuesDesc } = xGroupByDesc\n // console.log('colDesc: colDescItem, colValuesDesc: ', colDescItem, colValuesDesc)\n // dataValue = dataValue.map((item) => {\n // if (typeof item[colDescItem] === 'number') {\n // item[colDescItem] = colValuesDesc[item[colDescItem]]\n // }\n // return item\n // })\n // }\n\n const mergeConfig = {\n colDesc: colDesc || [],\n modelName,\n subShowType,\n xGroupByDesc: xGroupByDesc || {\n colDesc: '',\n groupByDesc: '',\n groupByValues: [],\n xAxis: false,\n },\n groupByDesc: xValue,\n data: dataValue,\n }\n return mergeConfig\n})\n\n// 导出数据\nfunction exportExal() {\n if (propData.data.length === 0) {\n // useMessage.error('暂无数据')\n console.log('暂无数据')\n return\n }\n const arr = useDataToExcelJson(propData)\n JsonToExcel(modelName, arr)\n}\nfunction merge(config: EChartsOption, defaultConfig: EChartsOption) {\n const mergeOpt = lodashMerge({}, defaultChartOptionCopy.value, config, defaultConfig)\n let conf = mergeOpt || {}\n\n if (jsCodeSnippet) {\n try {\n // 使用安全的配置处理函数\n conf = safeEvalConfig(jsCodeSnippet, conf)\n }\n catch (error) {\n console.error('代码执行失败:', error)\n }\n }\n\n return conf\n}\n\n// 获取内部 myChart 实例的方法\nfunction getMyChart(): ECharts | null {\n // 对于 table 类型,没有 myChart 实例\n if (showTypeName === 'table') {\n return null\n }\n\n // 尝试从子组件获取 myChart 实例\n const childComponent = myChartRef.value\n if (!childComponent) {\n return null\n }\n\n // 检查子组件是否有 myChart 方法(来自 useCharts)\n if (typeof childComponent.myChart === 'function') {\n return childComponent.myChart()\n }\n\n return null\n}\n\n// 为了保持向后兼容,提供 myChart 计算属性\nconst myChart = computed(() => getMyChart())\n\ndefineExpose({\n exportExal,\n QxsDataChartConfig,\n myChart,\n getMyChart,\n})\nprovide(InjectionChartMerge, merge)\n</script>\n\n<template>\n <component\n :is=\"coms[showTypeName]\"\n ref=\"myChartRef\"\n :key=\"showTypeName\"\n :class=\"[ns.e('wrapper')]\"\n :sub-show-type=\"subShowType\"\n :chart-data=\"formatPublicData\"\n :chart-options=\"chartOptions\"\n :lazy-load=\"lazyLoad\"\n />\n</template>\n"],"names":["ns","useNamespace","myChartRef","ref","QxsDataChartConfig","analyze","config","types","coms","table","Table","bar","Bar","line","Line","pie","Pie","radar","Radar","scatter","Scatter","funnel","Funnel","area","Area","card","Card","ScatterSimple","defaultChartOptionCopy","computed","cloneDeep","defaultChartOption","__props","formatPublicData","desc","colDesc","groupByDesc","data","xValue","xGroupByDesc","typedGroupByDesc","map","groupByDescItem","xAxis","dataValue","filter","item","colDescKey","modelName","subShowType","groupByValues","getMyChart","showTypeName","childComponent","value","myChart","__expose","exportExal","length","console","log","arr","useDataToExcelJson","JsonToExcel","provide","InjectionChartMerge","defaultConfig","conf","lodashMerge","jsCodeSnippet","safeEvalConfig","error","_createBlock","_resolveDynamicComponent","key","class","_normalizeClass","_unref","e","chartOptions","lazyLoad"],"mappings":"gjDAwDA,MAAMA,EAAKC,EAAa,cAGlBC,EAAaC,EAAS,MAEtBC,EAAqB,CACzBC,UACAC,SACAC,SAEIC,EAEF,CACFC,MAASC,EACTC,IAAOC,EACPC,KAAQC,EACRC,IAAOC,EACPC,MAASC,EACTC,QAAWC,EACXC,OAAUC,EACVC,KAAQC,EACRC,KAAQC,EACR,iBAAkBC,GAGdC,EAAyBC,EAAS,IAC/BC,EAAUC,EAAmBC,kBAGhCC,EAAmBJ,EAA4B,KACnD,MAAQK,MAAMC,QAAEA,EAAU,eAAIC,EAAc,IAAO,CAAA,EAACC,KAAGA,EAAO,IAAOL,EAAAK,KAGrE,IAAIC,EAA4C,GAE5CC,EAA4D,KAChE,MAAMC,EAAmBJ,EACzBE,EAASE,GAAkBC,IAAKC,IAQ1BA,EAAgBC,QAClBJ,EAAeG,GAEVA,KACH,GAGN,MAAME,EAAYL,GAAiBA,EAAsDJ,QACrFE,EAAKQ,OAAOC,IACV,MAAMC,EAAcR,EAAsDJ,QAC1E,OAAOW,GAAQC,QAAoC,IAArBD,EAAKC,IAAkD,OAArBD,EAAKC,KAEvEV,EA0BJ,MAboB,CAClBF,QAASA,GAAW,GACpBa,UAAQhB,EAAAgB,UACRC,YAAUjB,EAAAiB,YACVV,aAAcA,GAAgB,CAC5BJ,QAAS,GACTC,YAAa,GACbc,cAAe,GACfP,OAAO,GAETP,YAAaE,EACbD,KAAMO,KAiCV,SAASO,IAEP,GAAqB,UAAjBnB,EAAAoB,aACF,OAAO,KAIT,MAAMC,EAAiBnD,EAAWoD,MAClC,OAAKD,GAKiC,mBAA3BA,EAAeE,QACjBF,EAAeE,UALf,IASX,QAKAC,EAAa,CACXC,WAnDF,WACE,GAA6B,IAAzBzB,OAASK,KAAKqB,OAGhB,YADAC,QAAQC,IAAI,QAGd,MAAMC,EAAMC,EAAmB9B,EAAAK,MAC/B0B,EAAY/B,EAAAgB,UAAWa,EACzB,EA4CEzD,qBACAmD,QALc1B,EAAS,IAAMsB,KAM7BA,eAEFa,EAAQC,EA/CR,SAAe3D,EAAuB4D,GAEpC,IAAIC,EADaC,EAAY,CAAA,EAAIxC,EAAuB0B,MAAOhD,EAAQ4D,IAChD,CAAA,EAEvB,GAAIlC,EAAAqC,cACF,IAEEF,EAAOG,EAAetC,gBAAemC,EACvC,OACOI,GACLZ,QAAQY,MAAM,UAAWA,EAC3B,CAGF,OAAOJ,CACT,eAoCEK,EASEC,EARKjE,EAAK4C,EAAAA,eAAY,SAClB,aAAJjD,IAAID,EACHwE,IAAKtB,EAAAA,aACLuB,MAAKC,EAAA,CAAGC,EAAA7E,GAAG8E,EAAC,aACZ,gBAAe7B,EAAAA,YACf,aAAY4B,EAAA5C,GACZ,gBAAe8C,EAAAA,aACf,YAAWC,EAAAA"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import*as e from"echarts";import{onMounted as t,onUnmounted as
|
1
|
+
import*as e from"echarts";import{onMounted as t,nextTick as i,onUnmounted as n}from"vue";import{useMouseInElement as o,watchDebounced as s,useElementSize as r}from"@vueuse/core";import a from"../components/empty.svg.mjs";var c=Object.defineProperty,l=(e,t,i)=>((e,t,i)=>t in e?c(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i)(e,"symbol"!=typeof t?t+"":t,i);const u=new class{constructor(){l(this,"observer",null),l(this,"callbacks",new Map)}createObserver(){return"undefined"==typeof IntersectionObserver?null:new IntersectionObserver(e=>{for(const t of e)if(t.isIntersecting){const e=this.callbacks.get(t.target);e&&(e(),this.unobserve(t.target))}},{threshold:0,rootMargin:"200px"})}observe(e,t){this.observer||(this.observer=this.createObserver()),this.observer&&(this.callbacks.set(e,t),this.observer.observe(e))}unobserve(e){this.observer&&(this.observer.unobserve(e),this.callbacks.delete(e))}disconnect(){this.observer&&(this.observer.disconnect(),this.callbacks.clear(),this.observer=null)}};function h(r){let{chartDOM:c,chartData:l,chartOptions:h,initBefore:d,initAfter:v,lazyLoad:p=!0}=r,b=null,g=!1,w=null,m=[];const y=window.devicePixelRatio||1;function D(){if(b){try{b.isDisposed()||b.dispose()}catch(e){console.warn("Error disposing chart:",e)}b=null}}function x(){if(!b||b.isDisposed()){if(!c.value)return console.warn("[ECharts] DOM element not found"),null;const{clientWidth:t,clientHeight:i}=c.value;if(0===t||0===i)return console.warn("[ECharts] Container has zero size. Width:",t,"Height:",i,". Skipping initialization."),null;b=e.init(c.value,null,{devicePixelRatio:y,renderer:"svg"})}return b}function O(){c.value&&u.unobserve(c.value)}function k(){if(m.length>0)return;const{isOutside:e}=o(c),t=s(e,e=>{"boolean"==typeof e&&b&&!b.isDisposed()&&function(e){if(b&&!b.isDisposed())try{b.setOption({toolbox:{show:e}})}catch(e){console.warn("Error toggling toolbox:",e)}}(!e)},{debounce:200}),i=s(()=>h.value,async()=>{await async function(){for(var e=arguments.length,t=new Array(e),i=0;i<e;i++)t[i]=arguments[i];try{b&&!b.isDisposed()||await E(),b?.showLoading(),l.value?.data?.length?(!0===g&&(t[1]||(t[1]={}),t[1].notMerge=!0),g=!1):t=await M(),b?.setOption(...t)}catch(e){b&&!b.isDisposed()&&D(),x(),t=await M("配置项错误"),b?.setOption(...t)}finally{b?.hideLoading()}}(h.value)},{debounce:500,deep:!0,immediate:!0});m.push(t,i)}async function z(){await i();const{clientWidth:e,clientHeight:t}=c.value||{clientWidth:0,clientHeight:0};if(e>0&&t>0){x()&&(v&&v(b),b&&!b.isDisposed()&&f(b,c),k()),O()}else!function(){if(!c.value||"undefined"==typeof ResizeObserver)return;w=new ResizeObserver(e=>{for(const t of e){const{width:e,height:i}=t.contentRect;if(e>0&&i>0){x()&&(v&&v(b),b&&!b.isDisposed()&&f(b,c),k()),w?.disconnect(),w=null,O();break}}}),w.observe(c.value)}()}async function E(){return c.value?(await i(),p?(c.value&&u.observe(c.value,()=>{z()}),b):(await z(),b)):b}function M(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"暂无数据";return new Promise(t=>{const i=new Image;i.src=a,i.onload=()=>{const n=i.width/i.height,o={title:[{text:l.value?.modelName,...h.value.title},{subtext:e,top:"center",left:"center",text:"{a|}",itemGap:-20,subtextStyle:{fontSize:14},textStyle:{align:"center",rich:{a:{height:100/n,width:100,backgroundColor:{image:a}}}}}]};g=!0,t([o,{notMerge:!0,replaceMerge:["xAxis","yAxis","series"],lazyUpdate:!1}])}})}return t(async()=>{d&&await d(),await i(),await E(),b&&!b.isDisposed()&&(v&&v(b),f(b,c),k())}),n(()=>{if(m.forEach(e=>e()),m=[],w&&(w.disconnect(),w=null),O(),b&&!b.isDisposed())try{b.getZr()?.off("mousemove"),b.getZr()?.off("mouseout"),b.getZr()?.off("click"),b.off("click"),D()}catch(e){console.warn("Error during chart cleanup:",e)}}),{myChart:()=>b}}function f(e,t){const{width:i,height:n}=r(t);s([i,n],()=>{if(e&&!e.isDisposed())try{e.resize()}catch(e){console.warn("Error during chart resize:",e)}})}function d(e){const{desc:{colDesc:t=[],groupByDesc:i=[]}={},data:n=[]}=e,o=[...i.map(e=>e.colDesc),...t].filter(e=>e),s=n.map(e=>o.map(t=>e[t]||""));return[o,...s]}export{h as useCharts,d as useDataToExcelJson,f as useResize};
|
2
2
|
//# sourceMappingURL=useCharts.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useCharts.mjs","sources":["../../../../../../../packages/components/src/data-chart/src/utils/useCharts.ts"],"sourcesContent":["import type { ECharts, SetOptionOpts } from 'echarts'\nimport type { Ref } from 'vue'\nimport type { EChartData, EChartsOption, IFormatPublicData } from './types'\nimport * as echarts from 'echarts'\nimport { onMounted, onUnmounted } from 'vue'\nimport { useMouseInElement, useElementSize, watchDebounced } from '@vueuse/core'\n\n// 使用别名路径导入 SVG\nimport emptyImg from '../components/empty.svg'\n\nexport function useCharts({ chartDOM, chartData, chartOptions, initBefore, initAfter }: {\n chartDOM: Ref<HTMLElement | null>\n chartData: Ref<IFormatPublicData>\n chartOptions: Ref<EChartsOption>\n initBefore?: () => Promise<void>\n initAfter?: (e: ECharts | null) => void\n}) {\n // 每个组件实例的独立状态\n let myChart: ECharts | null = null\n let isEmpty = false\n\n // 获取设备像素比\n const dpr = window.devicePixelRatio || 1\n\n function disposeChart() {\n if (myChart && !myChart.isDisposed()) {\n try {\n myChart.dispose()\n }\n catch (error) {\n console.warn('Error disposing chart:', error)\n }\n myChart = null\n }\n }\n\n function initChart() {\n if (!(myChart && !myChart.isDisposed())) {\n // 如果实例已被销毁,重新创建\n myChart = echarts.init(chartDOM.value, null, {\n devicePixelRatio: dpr,\n renderer: 'svg',\n })\n }\n return myChart\n }\n\n async function renderChart(...opt: [EChartsOption, SetOptionOpts?]) {\n try {\n myChart?.showLoading()\n if (chartData.value?.data?.length) {\n if (isEmpty === true) {\n if (!opt[1]) {\n opt[1] = {}\n }\n opt[1].notMerge = true\n }\n isEmpty = false\n }\n else {\n // 数据为空时保持原有配置\n opt = await setEmpty()\n }\n myChart?.setOption(...opt)\n }\n catch (error) {\n if (myChart && !myChart.isDisposed()) {\n disposeChart()\n }\n // 如果实例已被销毁,重新创建\n initChart()\n opt = await setEmpty('配置项错误')\n myChart?.setOption(...opt)\n } finally {\n myChart?.hideLoading()\n }\n }\n\n function setEmpty(subtext = '暂无数据'): Promise<[EChartsOption, SetOptionOpts]> {\n return new Promise((resolve) => {\n const img = new Image()\n img.src = emptyImg\n\n img.onload = () => {\n const aspectRatio = img.width / img.height\n\n const obj: EChartsOption = {\n title: [{\n text: chartData.value?.modelName,\n ...chartOptions.value.title,\n }, {\n subtext,\n top: 'center',\n left: 'center',\n text: '{a|}',\n itemGap: -20,\n subtextStyle: {\n fontSize: 14,\n },\n textStyle: {\n align: 'center',\n rich: {\n a: {\n height: 100 / aspectRatio,\n width: 100,\n backgroundColor: {\n image: emptyImg,\n },\n },\n },\n },\n }],\n }\n isEmpty = true\n resolve([obj, {\n notMerge: true,\n replaceMerge: ['xAxis', 'yAxis', 'series'],\n lazyUpdate: false,\n }])\n }\n })\n }\n\n function toggleToolbox(show: boolean) {\n // 修改条件判断,移除 isDisposed 检查\n if (myChart && !myChart.isDisposed()) {\n try {\n myChart.setOption({\n toolbox: {\n show,\n },\n })\n }\n catch (error) {\n console.warn('Error toggling toolbox:', error)\n }\n }\n }\n\n const { isOutside: mouseInChart } = useMouseInElement(chartDOM)\n watchDebounced(mouseInChart, (newVal) => {\n // 修改条件判断\n if (typeof newVal !== 'boolean' || (!myChart || myChart.isDisposed())) {\n return\n }\n toggleToolbox(!newVal)\n }, { debounce: 200 })\n\n watchDebounced(\n () => chartOptions.value,\n async () => {\n // 修改条件判断\n if (myChart && !myChart.isDisposed()) {\n await renderChart(chartOptions.value)\n }\n },\n { debounce: 500, deep: true, immediate: true },\n )\n\n onMounted(async () => {\n if (initBefore) {\n await initBefore()\n }\n initChart()\n if (initAfter) {\n await initAfter(myChart)\n }\n // 修改条件判断\n if (myChart && !myChart.isDisposed()) {\n useResize(myChart, chartDOM)\n }\n })\n\n onUnmounted(() => {\n if (myChart && !myChart.isDisposed()) {\n try {\n // 清理所有事件监听器\n myChart.getZr()?.off('mousemove')\n myChart.getZr()?.off('mouseout')\n myChart.getZr()?.off('click')\n myChart.off('click')\n disposeChart()\n }\n catch (error) {\n console.warn('Error during chart cleanup:', error)\n }\n }\n })\n\n return {\n myChart: () => myChart,\n }\n}\n\nexport function useResize(myChart: ECharts, chartDOM: Ref<HTMLElement | null>) {\n const { width, height } = useElementSize(chartDOM)\n watchDebounced([width, height], () => {\n if (myChart && !myChart.isDisposed()) {\n try {\n myChart.resize()\n }\n catch (error) {\n console.warn('Error during chart resize:', error)\n }\n }\n })\n}\n\nexport function useDataToExcelJson(dataSource: EChartData) {\n const { desc: { colDesc = [], groupByDesc = [] } = {}, data = [] } = dataSource\n const header = [...groupByDesc.map(item => item.colDesc), ...colDesc].filter(v => v) as string[]\n const json = data.map((item) => {\n return header.map((headerItem) => {\n return item[headerItem as keyof typeof item] || ''\n })\n })\n return [header, ...json]\n}\n"],"names":["useCharts","chartDOM","chartData","chartOptions","initBefore","initAfter","_ref","myChart","isEmpty","dpr","window","devicePixelRatio","disposeChart","isDisposed","dispose","error","console","warn","initChart","echarts","init","value","renderer","setEmpty","subtext","Promise","resolve","img","Image","src","emptyImg","onload","aspectRatio","width","height","obj","title","text","modelName","top","left","itemGap","subtextStyle","fontSize","textStyle","align","rich","a","backgroundColor","image","notMerge","replaceMerge","lazyUpdate","isOutside","mouseInChart","useMouseInElement","watchDebounced","newVal","show","setOption","toolbox","toggleToolbox","debounce","async","_len","arguments","length","opt","Array","_key","showLoading","data","hideLoading","renderChart","deep","immediate","onMounted","useResize","onUnmounted","getZr","off","useElementSize","resize","useDataToExcelJson","dataSource","desc","colDesc","groupByDesc","header","map","item","filter","v","json","headerItem"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"useCharts.mjs","sources":["../../../../../../../packages/components/src/data-chart/src/utils/useCharts.ts"],"sourcesContent":["import type { ECharts, SetOptionOpts } from 'echarts'\nimport type { Ref } from 'vue'\nimport type { EChartData, EChartsOption, IFormatPublicData } from './types'\nimport * as echarts from 'echarts'\nimport { onMounted, onUnmounted, nextTick } from 'vue'\nimport { useMouseInElement, useElementSize, watchDebounced } from '@vueuse/core'\n\n// 使用别名路径导入 SVG\nimport emptyImg from '../components/empty.svg'\n\n// 全局 IntersectionObserver 管理器\nclass IntersectionObserverManager {\n private observer: IntersectionObserver | null = null\n private callbacks = new Map<Element, () => void>()\n\n private createObserver() {\n if (typeof IntersectionObserver === 'undefined') {\n return null\n }\n\n return new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n const callback = this.callbacks.get(entry.target)\n if (callback) {\n callback()\n // 执行回调后移除监听,避免重复初始化\n this.unobserve(entry.target)\n }\n }\n }\n },\n {\n threshold: 0,\n rootMargin: '200px'\n }\n )\n }\n\n observe(element: Element, callback: () => void) {\n if (!this.observer) {\n this.observer = this.createObserver()\n }\n\n if (this.observer) {\n this.callbacks.set(element, callback)\n this.observer.observe(element)\n }\n }\n\n unobserve(element: Element) {\n if (this.observer) {\n this.observer.unobserve(element)\n this.callbacks.delete(element)\n }\n }\n\n disconnect() {\n if (this.observer) {\n this.observer.disconnect()\n this.callbacks.clear()\n this.observer = null\n }\n }\n}\n\n// 全局单例实例\nconst globalIntersectionObserver = new IntersectionObserverManager()\n\nexport function useCharts({ chartDOM, chartData, chartOptions, initBefore, initAfter, lazyLoad = true }: {\n chartDOM: Ref<HTMLElement | null>\n chartData: Ref<IFormatPublicData>\n chartOptions: Ref<EChartsOption>\n initBefore?: () => Promise<void>\n initAfter?: (e: ECharts | null) => void\n lazyLoad?: boolean\n}) {\n // 每个组件实例的独立状态\n let myChart: ECharts | null = null\n let isEmpty = false\n let resizeObserver: ResizeObserver | null = null\n let watchStopHandles: Array<() => void> = [] // 存储 watch 停止函数\n\n // 获取设备像素比\n const dpr = window.devicePixelRatio || 1\n\n function disposeChart() {\n if (myChart) {\n try {\n if (!myChart.isDisposed()) {\n myChart.dispose()\n }\n }\n catch (error) {\n console.warn('Error disposing chart:', error)\n }\n myChart = null\n }\n }\n\n function initChart() {\n if (!(myChart && !myChart.isDisposed())) {\n // 检查 DOM 元素是否存在\n if (!chartDOM.value) {\n console.warn('[ECharts] DOM element not found')\n return null\n }\n\n // 检查容器尺寸\n const { clientWidth, clientHeight } = chartDOM.value\n if (clientWidth === 0 || clientHeight === 0) {\n // 如果容器没有尺寸,返回 null 而不是强制初始化\n console.warn('[ECharts] Container has zero size. Width:', clientWidth, 'Height:', clientHeight, '. Skipping initialization.')\n return null\n }\n\n // 创建 ECharts 实例\n myChart = echarts.init(chartDOM.value, null, {\n devicePixelRatio: dpr,\n renderer: 'svg',\n })\n }\n return myChart\n }\n\n // 清理所有观察器\n function cleanupObservers() {\n // 从全局观察器中移除当前元素\n if (chartDOM.value) {\n globalIntersectionObserver.unobserve(chartDOM.value)\n }\n }\n\n // 初始化 watchDebounced 监听器\n function setupWatchers() {\n if (watchStopHandles.length > 0) {\n return // 已经设置过了,避免重复设置\n }\n\n // 鼠标悬停监听\n const { isOutside: mouseInChart } = useMouseInElement(chartDOM)\n const stopMouseWatch = watchDebounced(mouseInChart, (newVal) => {\n if (typeof newVal !== 'boolean' || (!myChart || myChart.isDisposed())) {\n return\n }\n toggleToolbox(!newVal)\n }, { debounce: 200 })\n\n // 图表选项监听\n const stopOptionsWatch = watchDebounced(\n () => chartOptions.value,\n async () => {\n await renderChart(chartOptions.value)\n },\n { debounce: 500, deep: true, immediate: true },\n )\n\n watchStopHandles.push(stopMouseWatch, stopOptionsWatch)\n }\n\n // 开始初始化流程\n async function startInitialization() {\n // 等待 DOM 渲染完成\n await nextTick()\n\n // 检查容器是否已经有尺寸\n const { clientWidth, clientHeight } = chartDOM.value || { clientWidth: 0, clientHeight: 0 }\n if (clientWidth > 0 && clientHeight > 0) {\n // 直接初始化\n const chart = initChart()\n if (chart) {\n if (initAfter) {\n initAfter(myChart)\n }\n if (myChart && !myChart.isDisposed()) {\n useResize(myChart, chartDOM)\n }\n // 图表初始化成功后,设置监听器\n setupWatchers()\n }\n // 初始化成功后清理观察器\n cleanupObservers()\n } else {\n // 如果没有尺寸,使用 ResizeObserver 等待\n setupResizeObserver()\n }\n }\n\n // 使用全局 IntersectionObserver 监听元素是否进入可视区域\n function setupIntersectionObserver() {\n if (!chartDOM.value) {\n return\n }\n\n // 使用全局观察器,避免重复创建\n globalIntersectionObserver.observe(chartDOM.value, () => {\n startInitialization()\n })\n }\n\n\n\n // 使用 ResizeObserver 监听容器尺寸变化\n function setupResizeObserver() {\n if (!chartDOM.value || typeof ResizeObserver === 'undefined') {\n return\n }\n\n resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const { width, height } = entry.contentRect\n if (width > 0 && height > 0) {\n // 容器有尺寸了,可以安全初始化\n const chart = initChart()\n if (chart) {\n if (initAfter) {\n initAfter(myChart)\n }\n // 设置 resize 监听\n if (myChart && !myChart.isDisposed()) {\n useResize(myChart, chartDOM)\n }\n // 图表初始化成功后,设置监听器\n setupWatchers()\n }\n // 初始化后停止观察并清理其他观察器\n resizeObserver?.disconnect()\n resizeObserver = null\n cleanupObservers()\n break\n }\n }\n })\n\n resizeObserver.observe(chartDOM.value)\n }\n\n // 安全的初始化函数\n async function safeInitChart() {\n if (!chartDOM.value) {\n return myChart\n }\n\n // 等待 DOM 渲染完成\n await nextTick()\n\n // 如果启用了懒加载\n if (lazyLoad) {\n // 直接设置 IntersectionObserver,让它检测元素是否进入可视区域\n setupIntersectionObserver()\n return myChart\n }\n\n // 非懒加载模式,直接开始初始化流程\n await startInitialization()\n\n return myChart\n }\n\n async function renderChart(...opt: [EChartsOption, SetOptionOpts?]) {\n try {\n // 确保图表已初始化\n if (!myChart || myChart.isDisposed()) {\n await safeInitChart()\n }\n\n myChart?.showLoading()\n if (chartData.value?.data?.length) {\n if (isEmpty === true) {\n if (!opt[1]) {\n opt[1] = {}\n }\n opt[1].notMerge = true\n }\n isEmpty = false\n }\n else {\n // 数据为空时保持原有配置\n opt = await setEmpty()\n }\n myChart?.setOption(...opt)\n }\n catch (error) {\n if (myChart && !myChart.isDisposed()) {\n disposeChart()\n }\n // 如果实例已被销毁,重新创建\n initChart()\n opt = await setEmpty('配置项错误')\n myChart?.setOption(...opt)\n } finally {\n myChart?.hideLoading()\n }\n }\n\n function setEmpty(subtext = '暂无数据'): Promise<[EChartsOption, SetOptionOpts]> {\n return new Promise((resolve) => {\n const img = new Image()\n img.src = emptyImg\n\n img.onload = () => {\n const aspectRatio = img.width / img.height\n\n const obj: EChartsOption = {\n title: [{\n text: chartData.value?.modelName,\n ...chartOptions.value.title,\n }, {\n subtext,\n top: 'center',\n left: 'center',\n text: '{a|}',\n itemGap: -20,\n subtextStyle: {\n fontSize: 14,\n },\n textStyle: {\n align: 'center',\n rich: {\n a: {\n height: 100 / aspectRatio,\n width: 100,\n backgroundColor: {\n image: emptyImg,\n },\n },\n },\n },\n }],\n }\n isEmpty = true\n resolve([obj, {\n notMerge: true,\n replaceMerge: ['xAxis', 'yAxis', 'series'],\n lazyUpdate: false,\n }])\n }\n })\n }\n\n function toggleToolbox(show: boolean) {\n // 修改条件判断,移除 isDisposed 检查\n if (myChart && !myChart.isDisposed()) {\n try {\n myChart.setOption({\n toolbox: {\n show,\n },\n })\n }\n catch (error) {\n console.warn('Error toggling toolbox:', error)\n }\n }\n }\n\n // 移除这里的 watchDebounced 调用,改为在图表初始化后调用\n\n onMounted(async () => {\n if (initBefore) {\n await initBefore()\n }\n\n // 等待 DOM 渲染完成\n await nextTick()\n\n // 使用安全的初始化函数\n await safeInitChart()\n\n // 如果图表已经初始化(容器有尺寸),调用 initAfter 和设置 resize\n if (myChart && !myChart.isDisposed()) {\n if (initAfter) {\n initAfter(myChart)\n }\n useResize(myChart, chartDOM)\n // 图表初始化成功后,设置监听器\n setupWatchers()\n }\n })\n\n onUnmounted(() => {\n // 停止所有 watch 监听器\n watchStopHandles.forEach(stop => stop())\n watchStopHandles = []\n\n // 清理 ResizeObserver\n if (resizeObserver) {\n resizeObserver.disconnect()\n resizeObserver = null\n }\n\n // 清理全局 IntersectionObserver 中的当前元素\n cleanupObservers()\n\n if (myChart && !myChart.isDisposed()) {\n try {\n // 清理所有事件监听器\n myChart.getZr()?.off('mousemove')\n myChart.getZr()?.off('mouseout')\n myChart.getZr()?.off('click')\n myChart.off('click')\n disposeChart()\n }\n catch (error) {\n console.warn('Error during chart cleanup:', error)\n }\n }\n })\n\n return {\n myChart: () => myChart,\n }\n}\n\nexport function useResize(myChart: ECharts, chartDOM: Ref<HTMLElement | null>) {\n const { width, height } = useElementSize(chartDOM)\n watchDebounced([width, height], () => {\n if (myChart && !myChart.isDisposed()) {\n try {\n myChart.resize()\n }\n catch (error) {\n console.warn('Error during chart resize:', error)\n }\n }\n })\n}\n\nexport function useDataToExcelJson(dataSource: EChartData) {\n const { desc: { colDesc = [], groupByDesc = [] } = {}, data = [] } = dataSource\n const header = [...groupByDesc.map(item => item.colDesc), ...colDesc].filter(v => v) as string[]\n const json = data.map((item) => {\n return header.map((headerItem) => {\n return item[headerItem as keyof typeof item] || ''\n })\n })\n return [header, ...json]\n}\n"],"names":["globalIntersectionObserver","constructor","__publicField","this","Map","createObserver","IntersectionObserver","entries","entry","isIntersecting","callback","callbacks","get","target","unobserve","threshold","rootMargin","observe","element","observer","set","delete","disconnect","clear","useCharts","_ref","chartDOM","chartData","chartOptions","initBefore","initAfter","lazyLoad","myChart","isEmpty","resizeObserver","watchStopHandles","dpr","window","devicePixelRatio","disposeChart","isDisposed","dispose","error","console","warn","initChart","value","clientWidth","clientHeight","echarts","init","renderer","cleanupObservers","setupWatchers","length","isOutside","mouseInChart","useMouseInElement","stopMouseWatch","watchDebounced","newVal","show","setOption","toolbox","toggleToolbox","debounce","stopOptionsWatch","async","_len","arguments","opt","Array","_key","safeInitChart","showLoading","data","notMerge","setEmpty","hideLoading","renderChart","deep","immediate","push","startInitialization","nextTick","useResize","ResizeObserver","width","height","contentRect","setupResizeObserver","subtext","Promise","resolve","img","Image","src","emptyImg","onload","aspectRatio","obj","title","text","modelName","top","left","itemGap","subtextStyle","fontSize","textStyle","align","rich","a","backgroundColor","image","replaceMerge","lazyUpdate","onMounted","onUnmounted","forEach","stop","getZr","off","useElementSize","resize","useDataToExcelJson","dataSource","desc","colDesc","groupByDesc","header","map","item","filter","v","json","headerItem"],"mappings":"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"}
|
package/lib/package.json.cjs
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";exports.version="0.0.
|
1
|
+
"use strict";exports.version="0.0.65";
|
2
2
|
//# sourceMappingURL=package.json.cjs.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),a=require("echarts"),t=require("../utils/config.cjs"),r=require("../utils/injectionKeys.cjs"),o=require("../utils/useCharts.cjs");function n(e){var a=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}}),a.default=e,Object.freeze(a)}var c=n(a);const s={class:"data-chart-area-wrap"};var i=e.defineComponent({name:"DataChartArea",__name:"area",props:{chartOptions:{type:null,required:!0},chartData:{type:Object,required:!1,default:()=>({colDesc:[],xGroupByDesc:{colDesc:"",groupByDesc:"",groupByValues:[],xAxis:!1},groupByDesc:[],data:[],modelName:""})},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(a,{expose:n}){const i=e.inject(r.InjectionChartMerge,e=>e,!0);let l="中国";const u=e.ref({features:[],type:"FeatureCollection"}),m=e.ref(null),d=e.computed(()=>{try{const{xGroupByDesc:e,groupByDesc:t,colDesc:r,modelName:o,data:n}=a.chartData,c=[];r.forEach(e=>{n.forEach(a=>{c.push(Number(a[e]))})});const s={title:{text:o},tooltip:{formatter(e){let a=`${e.name}<br/>`;return s.series?.forEach(t=>{t.data?.forEach(r=>{r.name===e.name&&(a+=`${t.name}:${r.value}</br>`)}),a.includes(t.name)||(a+=`${t.name}:-</br>`)}),a}},visualMap:{min:Math.min(...c,0),max:Math.max(...c,0),text:["高","低"],realtime:!1,calculable:!0,inRange:{color:["#E8F4FD","#B8D4F7","#7BA4F0","#4A7BE8","#3562e1"]}},series:r?.map(a=>{const r=[],o=t.find(e=>e.colDesc===("中国"===l?"医院所在省":"医院所在市")),c={};n.map(t=>{const r=t[("中国"===l?e?.colDesc||"":o?.colDesc)||""],n=u.value.features?.find(({properties:{name:e}})=>e?.includes(r));return{name:n?.properties?.name||"",value:Number(t[a])}}).forEach(e=>{c[e.name]?c[e.name]=c[e.name]+e.value:c[e.name]=e.value});for(const e in c)r.push({name:e,value:c[e]});return{name:a,type:"map",map:l,data:r}})};return i(s,a.chartOptions)}catch(e){return console.error("Error computing area chart options:",e),{title:{text:"地图加载失败"},series:[]}}});async function p(e="中国"){try{const a=await t.getGeoJsonData({adcode:e});return a&&a.features&&0!==a.features.length?(u.value=a,l=e,void c.registerMap(e,a)):void console.error("Invalid GeoJSON data for:",e)}catch(a){if(console.error("Failed to register map for:",e,a),"中国"!==e)return console.log("Falling back to China map"),p("中国")}}const{myChart:h}=o.useCharts({chartDOM:m,chartOptions:d,chartData:e.computed(()=>a.chartData),initAfter:async function(e){try{await p(),e&&!e.isDisposed()&&(e.getZr()?.on("click",a=>{e?.showLoading(),a.target||"中国"===l||p("中国"),e.hideLoading()}),e.on("click",t=>{e?.showLoading();const r=a.chartData.groupByDesc?.some(e=>"医院所在市"===e.colDesc);"中国"===l&&r&&t.name&&p(t.name).then(()=>{e&&!e.isDisposed()&&e.setOption(d.value)}),e?.hideLoading()}))}catch(a){if(console.error("Failed to initialize map:",a),e&&!e.isDisposed())try{await p("中国")}catch(e){console.error("Failed to retry map registration:",e)}}},lazyLoad:a.lazyLoad});return n({myChart:h}),(a,t)=>(e.openBlock(),e.createElementBlock("div",s,[e.createCommentVNode(' <el-select\n v-if="isShowSelect"\n v-model="adcode"\n class="city-select"\n size="small"\n @change="selectChina"\n >\n <el-option\n v-for="item in selectList"\n :key="item.value"\n :label="item.label"\n :value="item.value"\n />\n </el-select> '),e.createElementVNode("div",{ref_key:"dataChartArea",ref:m,class:"data-chart-area"},null,512)]))}});exports.default=i;
|
2
2
|
//# sourceMappingURL=area.vue2.cjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"area.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/area.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ECharts } from 'echarts/types/dist/echarts'\nimport type { EChartsOption, GeoJson, IFormatPublicData } from '../utils/types'\nimport * as echarts from 'echarts'\nimport { getGeoJsonData } from '../utils/config'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartArea',\n})\n\nconst {\n chartOptions,\n chartData = {\n colDesc: [],\n xGroupByDesc: {\n colDesc: '',\n groupByDesc: '',\n groupByValues: [],\n xAxis: false,\n },\n groupByDesc: [],\n data: [],\n modelName: '',\n },\n} = defineProps<{\n chartOptions: EChartsOption\n chartData?: IFormatPublicData\n}>()\n\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\nlet adcode = '中国'\nconst currentGeoJson = ref<GeoJson>({\n features: [],\n type: 'FeatureCollection',\n})\nconst myChart = ref<ECharts | null>(null)\nconst dataChartArea = ref(null)\n\nconst areaChartOptions = computed<EChartsOption>(() => {\n try {\n const { xGroupByDesc, groupByDesc, colDesc, modelName, data } = chartData\n const allNums: number[] = []\n colDesc.forEach((item) => {\n data.forEach((dataItem) => {\n allNums.push(Number(dataItem[item]))\n })\n })\n const config = {\n title: {\n text: modelName,\n },\n tooltip: {\n formatter(params: { name: string }) {\n let res = `${params.name}<br/>`\n config.series?.forEach((colDescItem) => {\n colDescItem.data?.forEach((item) => {\n if (item.name === params.name) {\n res += `${colDescItem.name}:${item.value}</br>`\n }\n })\n if (!res.includes(colDescItem.name)) {\n res += `${colDescItem.name}:-</br>`\n }\n })\n return res\n },\n },\n visualMap: {\n min: Math.min(...allNums, 0),\n max: Math.max(...allNums, 0),\n text: ['高', '低'],\n realtime: false,\n calculable: true,\n inRange: {\n color: ['#E8F4FD', '#B8D4F7', '#7BA4F0', '#4A7BE8', '#3562e1']\n },\n },\n series: colDesc?.map((colDescItem) => {\n const seriesData = []\n const row = groupByDesc.find(item => item.colDesc === (adcode === '中国' ? '医院所在省' : '医院所在市'))\n // 先用省份数据,如果没有再用市级数据\n const arr: {\n [key: string]: number\n } = {}\n data.map((item) => {\n const sourceName = item[(adcode === '中国' ? (xGroupByDesc?.colDesc || '') : row?.colDesc) || '']\n const find = currentGeoJson.value.features?.find(({ properties: { name } }: { properties: { name?: string } }) => name?.includes(sourceName as string))\n return {\n name: find?.properties?.name || '',\n value: Number(item[colDescItem]),\n }\n }).forEach((item) => {\n if (!arr[item.name]) {\n arr[item.name] = item.value\n }\n else {\n arr[item.name] = arr[item.name] + item.value\n }\n })\n for (const key in arr) {\n seriesData.push({\n name: key,\n value: arr[key],\n })\n }\n return {\n name: colDescItem,\n type: 'map',\n map: adcode,\n data: seriesData,\n }\n }),\n }\n\n return merge(config, chartOptions)\n }\n catch (error) {\n console.error('Error computing area chart options:', error)\n return {\n title: { text: '地图加载失败' },\n series: [],\n }\n }\n})\n\nasync function initAfter(mc: ECharts | null) {\n myChart.value = mc\n try {\n await registerMap()\n // 添加判断,确保图表实例存在且未被销毁\n if (mc && !mc.isDisposed()) {\n // charts 监听事件\n mc.getZr()?.on('click', (params: { target: HTMLElement }) => {\n mc?.showLoading()\n if (!params.target && adcode !== '中国') {\n registerMap('中国')\n }\n mc.hideLoading()\n })\n mc.on('click', (params: { name: string }) => {\n mc?.showLoading()\n const flag = chartData.groupByDesc?.some(item => item.colDesc === '医院所在市')\n if (adcode === '中国' && flag && params.name) {\n registerMap(params.name).then(() => {\n if (mc && !mc.isDisposed()) {\n mc.setOption(areaChartOptions.value)\n }\n })\n }\n mc?.hideLoading()\n })\n }\n }\n catch (error) {\n console.error('Failed to initialize map:', error)\n // 如果初始化失败,尝试重新注册地图\n if (mc && !mc.isDisposed()) {\n try {\n await registerMap('中国')\n }\n catch (retryError) {\n console.error('Failed to retry map registration:', retryError)\n }\n }\n }\n}\n\n// function selectChina() {\n// registerMap(adcode)\n// }\nasync function registerMap(keyword = '中国') {\n try {\n const geoJson = await getGeoJsonData({ adcode: keyword })\n if (!geoJson || !geoJson.features || geoJson.features.length === 0) {\n console.error('Invalid GeoJSON data for:', keyword)\n return\n }\n currentGeoJson.value = geoJson\n adcode = keyword\n\n echarts.registerMap(keyword, geoJson as any)\n return\n }\n catch (error) {\n console.error('Failed to register map for:', keyword, error)\n // 如果注册失败,尝试使用默认的中国地图数据\n if (keyword !== '中国') {\n console.log('Falling back to China map')\n return registerMap('中国')\n }\n }\n}\nuseCharts({\n chartDOM: dataChartArea,\n chartOptions: areaChartOptions,\n chartData: computed(() => chartData),\n initAfter\n})\n</script>\n\n<template>\n <div class=\"data-chart-area-wrap\">\n <!-- <el-select\n v-if=\"isShowSelect\"\n v-model=\"adcode\"\n class=\"city-select\"\n size=\"small\"\n @change=\"selectChina\"\n >\n <el-option\n v-for=\"item in selectList\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\"\n />\n </el-select> -->\n <div\n ref=\"dataChartArea\"\n class=\"data-chart-area\"\n />\n </div>\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-area-wrap {\n position: relative;\n\n .city-select {\n position: absolute;\n top: 10px;\n right: 100px;\n z-index: 1;\n width: 120px;\n }\n\n .data-chart-area {\n height: 100%;\n }\n}\n</style>\n"],"names":["merge","inject","InjectionChartMerge","v","adcode","currentGeoJson","ref","features","type","myChart","dataChartArea","areaChartOptions","computed","xGroupByDesc","groupByDesc","colDesc","modelName","data","__props","chartData","allNums","forEach","item","dataItem","push","Number","config","title","text","tooltip","formatter","params","res","name","series","colDescItem","value","includes","visualMap","min","Math","max","realtime","calculable","inRange","color","map","seriesData","row","find","arr","sourceName","properties","key","chartOptions","error","console","async","registerMap","keyword","geoJson","getGeoJsonData","length","echarts","log","useCharts","chartDOM","initAfter","mc","isDisposed","getZr","on","showLoading","target","hideLoading","flag","some","then","setOption","retryError","_openBlock","_createElementBlock","_hoisted_1","_createCommentVNode","_createElementVNode","class"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"area.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/area.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ECharts } from 'echarts/types/dist/echarts'\nimport type { EChartsOption, GeoJson, IFormatPublicData } from '../utils/types'\nimport * as echarts from 'echarts'\nimport { getGeoJsonData } from '../utils/config'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartArea',\n})\n\nconst {\n chartOptions,\n chartData = {\n colDesc: [],\n xGroupByDesc: {\n colDesc: '',\n groupByDesc: '',\n groupByValues: [],\n xAxis: false,\n },\n groupByDesc: [],\n data: [],\n modelName: '',\n },\n lazyLoad = true,\n} = defineProps<{\n chartOptions: EChartsOption\n chartData?: IFormatPublicData\n lazyLoad?: boolean\n}>()\n\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\nlet adcode = '中国'\nconst currentGeoJson = ref<GeoJson>({\n features: [],\n type: 'FeatureCollection',\n})\nconst dataChartArea = ref(null)\n\nconst areaChartOptions = computed<EChartsOption>(() => {\n try {\n const { xGroupByDesc, groupByDesc, colDesc, modelName, data } = chartData\n const allNums: number[] = []\n colDesc.forEach((item) => {\n data.forEach((dataItem) => {\n allNums.push(Number(dataItem[item]))\n })\n })\n const config = {\n title: {\n text: modelName,\n },\n tooltip: {\n formatter(params: { name: string }) {\n let res = `${params.name}<br/>`\n config.series?.forEach((colDescItem) => {\n colDescItem.data?.forEach((item) => {\n if (item.name === params.name) {\n res += `${colDescItem.name}:${item.value}</br>`\n }\n })\n if (!res.includes(colDescItem.name)) {\n res += `${colDescItem.name}:-</br>`\n }\n })\n return res\n },\n },\n visualMap: {\n min: Math.min(...allNums, 0),\n max: Math.max(...allNums, 0),\n text: ['高', '低'],\n realtime: false,\n calculable: true,\n inRange: {\n color: ['#E8F4FD', '#B8D4F7', '#7BA4F0', '#4A7BE8', '#3562e1']\n },\n },\n series: colDesc?.map((colDescItem) => {\n const seriesData = []\n const row = groupByDesc.find(item => item.colDesc === (adcode === '中国' ? '医院所在省' : '医院所在市'))\n // 先用省份数据,如果没有再用市级数据\n const arr: {\n [key: string]: number\n } = {}\n data.map((item) => {\n const sourceName = item[(adcode === '中国' ? (xGroupByDesc?.colDesc || '') : row?.colDesc) || '']\n const find = currentGeoJson.value.features?.find(({ properties: { name } }: { properties: { name?: string } }) => name?.includes(sourceName as string))\n return {\n name: find?.properties?.name || '',\n value: Number(item[colDescItem]),\n }\n }).forEach((item) => {\n if (!arr[item.name]) {\n arr[item.name] = item.value\n }\n else {\n arr[item.name] = arr[item.name] + item.value\n }\n })\n for (const key in arr) {\n seriesData.push({\n name: key,\n value: arr[key],\n })\n }\n return {\n name: colDescItem,\n type: 'map',\n map: adcode,\n data: seriesData,\n }\n }),\n }\n\n return merge(config, chartOptions)\n }\n catch (error) {\n console.error('Error computing area chart options:', error)\n return {\n title: { text: '地图加载失败' },\n series: [],\n }\n }\n})\n\nasync function initAfter(mc: ECharts | null) {\n try {\n await registerMap()\n // 添加判断,确保图表实例存在且未被销毁\n if (mc && !mc.isDisposed()) {\n // charts 监听事件\n mc.getZr()?.on('click', (params: { target: HTMLElement }) => {\n mc?.showLoading()\n if (!params.target && adcode !== '中国') {\n registerMap('中国')\n }\n mc.hideLoading()\n })\n mc.on('click', (params: { name: string }) => {\n mc?.showLoading()\n const flag = chartData.groupByDesc?.some(item => item.colDesc === '医院所在市')\n if (adcode === '中国' && flag && params.name) {\n registerMap(params.name).then(() => {\n if (mc && !mc.isDisposed()) {\n mc.setOption(areaChartOptions.value)\n }\n })\n }\n mc?.hideLoading()\n })\n }\n }\n catch (error) {\n console.error('Failed to initialize map:', error)\n // 如果初始化失败,尝试重新注册地图\n if (mc && !mc.isDisposed()) {\n try {\n await registerMap('中国')\n }\n catch (retryError) {\n console.error('Failed to retry map registration:', retryError)\n }\n }\n }\n}\n\n// function selectChina() {\n// registerMap(adcode)\n// }\nasync function registerMap(keyword = '中国') {\n try {\n const geoJson = await getGeoJsonData({ adcode: keyword })\n if (!geoJson || !geoJson.features || geoJson.features.length === 0) {\n console.error('Invalid GeoJSON data for:', keyword)\n return\n }\n currentGeoJson.value = geoJson\n adcode = keyword\n\n echarts.registerMap(keyword, geoJson as any)\n return\n }\n catch (error) {\n console.error('Failed to register map for:', keyword, error)\n // 如果注册失败,尝试使用默认的中国地图数据\n if (keyword !== '中国') {\n console.log('Falling back to China map')\n return registerMap('中国')\n }\n }\n}\n\nconst { myChart } = useCharts({\n chartDOM: dataChartArea,\n chartOptions: areaChartOptions,\n chartData: computed(() => chartData),\n initAfter,\n lazyLoad\n})\n\n// 暴露 myChart 方法供父组件访问\ndefineExpose({\n myChart,\n})\n</script>\n\n<template>\n <div class=\"data-chart-area-wrap\">\n <!-- <el-select\n v-if=\"isShowSelect\"\n v-model=\"adcode\"\n class=\"city-select\"\n size=\"small\"\n @change=\"selectChina\"\n >\n <el-option\n v-for=\"item in selectList\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\"\n />\n </el-select> -->\n <div\n ref=\"dataChartArea\"\n class=\"data-chart-area\"\n />\n </div>\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-area-wrap {\n position: relative;\n\n .city-select {\n position: absolute;\n top: 10px;\n right: 100px;\n z-index: 1;\n width: 120px;\n }\n\n .data-chart-area {\n width: 100%;\n height: 100%;\n min-height: 300px;\n }\n}\n</style>\n"],"names":["merge","inject","InjectionChartMerge","v","adcode","currentGeoJson","ref","features","type","dataChartArea","areaChartOptions","computed","xGroupByDesc","groupByDesc","colDesc","modelName","data","__props","chartData","allNums","forEach","item","dataItem","push","Number","config","title","text","tooltip","formatter","params","res","name","series","colDescItem","value","includes","visualMap","min","Math","max","realtime","calculable","inRange","color","map","seriesData","row","find","arr","sourceName","properties","key","chartOptions","error","console","async","registerMap","keyword","geoJson","getGeoJsonData","length","echarts","log","myChart","useCharts","chartDOM","initAfter","mc","isDisposed","getZr","on","showLoading","target","hideLoading","flag","some","then","setOption","retryError","lazyLoad","__expose","_openBlock","_createElementBlock","_hoisted_1","_createCommentVNode","_createElementVNode","class"],"mappings":"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"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e="/* unplugin-vue-components disabled */\n.data-chart-area-wrap[data-v-51660d7b] {\n position: relative;\n}\n.data-chart-area-wrap .city-select[data-v-51660d7b] {\n position: absolute;\n top: 10px;\n right: 100px;\n z-index: 1;\n width: 120px;\n}\n.data-chart-area-wrap .data-chart-area[data-v-51660d7b] {\n height: 100%;\n}";require("../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.cjs").default(e),exports.default=e;
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e="/* unplugin-vue-components disabled */\n.data-chart-area-wrap[data-v-51660d7b] {\n position: relative;\n}\n.data-chart-area-wrap .city-select[data-v-51660d7b] {\n position: absolute;\n top: 10px;\n right: 100px;\n z-index: 1;\n width: 120px;\n}\n.data-chart-area-wrap .data-chart-area[data-v-51660d7b] {\n width: 100%;\n height: 100%;\n min-height: 300px;\n}";require("../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.cjs").default(e),exports.default=e;
|
2
2
|
//# sourceMappingURL=area.vue3.cjs.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./bar.vue2.cjs");require("./bar.vue3.cjs");var r=require("../../../../_virtual/_plugin-vue_export-helper.cjs").default(e.default,[["__scopeId","data-v-c325b6e7"]]);exports.default=r;
|
2
2
|
//# sourceMappingURL=bar.vue.cjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"bar.vue.cjs","sources":[
|
1
|
+
{"version":3,"file":"bar.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),a=require("lodash-es"),t=require("../utils/injectionKeys.cjs"),r=require("../utils/useCharts.cjs"),s=e.defineComponent({name:"DataChartBar",__name:"bar",props:{chartData:{type:Object,required:!0},subShowType:{type:String,required:!0,default:"bar-simple"},chartOptions:{type:null,required:!0},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(s,{expose:l}){const c=e.inject(t.InjectionChartMerge,e=>e,!0),o=e.ref(null),i=e.computed(()=>{const{colDesc:e,xGroupByDesc:t,groupByDesc:r,data:l=[],modelName:o}=s.chartData,i=Array.from(new Set(l.map(e=>e[t.colDesc||""]))).filter(e=>null!=e)||[],n={...r.find(e=>!e.xAxis)||{groupByDesc:null,groupByValues:[],colDesc:"",xAxis:!1},groupByValues:a.uniq(l.map(e=>r.find(e=>!e.xAxis)?.colDesc?String(e[r.find(e=>!e.xAxis)?.colDesc||""]):""))},u=t?{...t,groupByValues:a.uniq(l.map(e=>t.colDesc?String(e[t.colDesc]):""))}:t,p={title:{text:o},xAxis:{name:"",type:"category",axisLabel:{interval:0,formatter:e=>e.length>5?`${e.substring(0,5)}...`:e},data:i},yAxis:{type:"value"},legend:{data:[]},dataZoom:[{type:"inside",disabled:i.length<15}]};if(1===r.length)p.series=e.map(e=>({name:e,data:l.map(a=>a[e]),type:"bar",emphasis:{focus:"series"},label:{show:!0,position:"inside"}})),p.legend.data=e;else if(2===r.length){const a=e.map(e=>n.groupByValues?.map(a=>{const t={name:`${a||"/"}-${e}`,type:"bar",stack:e,emphasis:{focus:"series"},data:[],label:{show:!0,position:"inside"}};return t.data=(u?.groupByValues||[]).map(e=>{let r=null;return l.forEach(s=>{n.colDesc&&s[n.colDesc]===a&&u?.colDesc&&s[u.colDesc]===e&&t.stack&&(r=s[t.stack]??null)}),r||""}).filter(e=>""!==e),t})||[]).flat();p.series=a,delete p.legend}function d(e,a,t,r){Array.isArray(e)?e.forEach(e=>{e&&(e.type=a,"category"===a&&(e.data=t||[],e.name=r||""))}):e&&(e.type=a,"category"===a&&(e.data=t||[],e.name=r||""))}switch(s.subShowType){case"bar-simple":case"default":d(p.xAxis,"category",i,t?.colDesc||""),d(p.yAxis,"value");break;case"bar-y-category":d(p.xAxis,"value"),d(p.yAxis,"category",i,t?.colDesc||"")}return c(p,s.chartOptions)}),{myChart:n}=r.useCharts({chartDOM:o,chartOptions:i,chartData:e.computed(()=>s.chartData),lazyLoad:s.lazyLoad});return l({myChart:n}),(a,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartBar",ref:o,class:"data-chart-bar"},null,512))}});exports.default=s;
|
2
2
|
//# sourceMappingURL=bar.vue2.cjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"bar.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
1
|
+
{"version":3,"file":"bar.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/bar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { LegendComponentOption, XAXisComponentOption, YAXisComponentOption } from 'echarts'\nimport type {\n EChartsOption,\n IFormatPublicData,\n SeriesOption,\n} from '../utils/types'\nimport { uniq } from 'lodash-es'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\n// 定义组件名称\ndefineOptions({\n name: 'DataChartBar',\n})\n\n// 定义组件属性\nconst {\n chartOptions,\n chartData,\n subShowType = 'bar-simple',\n lazyLoad = true,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n lazyLoad?: boolean\n}>()\n\n// 注入合并函数,并明确类型\nconst merge = inject(InjectionChartMerge, (v: any) => v, true) as (config: EChartsOption, chartOptions: EChartsOption) => EChartsOption\nconst dataChartBar = ref<HTMLElement | null>(null)\n\n// 计算图表选项\nconst barChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, groupByDesc, data = [], modelName } = chartData\n\n const axisData = Array.from(new Set(data.map(item => item[xGroupByDesc.colDesc || '']))).filter(item => item !== undefined && item !== null) || []\n\n // 创建新的对象而不是修改原对象\n const yGroupByDesc = {\n ...groupByDesc.find(item => !item.xAxis) || {\n groupByDesc: null,\n groupByValues: [],\n colDesc: '',\n xAxis: false,\n },\n groupByValues: uniq(data.map(item => groupByDesc.find(item => !item.xAxis)?.colDesc ? String(item[groupByDesc.find(item => !item.xAxis)?.colDesc || '']) : '')),\n }\n\n // 创建新的 xGroupByDesc 对象\n const newXGroupByDesc = xGroupByDesc\n ? {\n ...xGroupByDesc,\n groupByValues: uniq(data.map(item => xGroupByDesc.colDesc ? String(item[xGroupByDesc.colDesc]) : '')),\n }\n : xGroupByDesc\n\n const config: EChartsOption = {\n title: {\n text: modelName,\n },\n xAxis: {\n name: '',\n type: 'category',\n axisLabel: {\n interval: 0, // 强制显示所有标签\n formatter(value: string) {\n const screenshotLength = 5\n return value.length > screenshotLength ? `${value.substring(0, screenshotLength)}...` : value // 截取前5个字符并添加省略号\n },\n },\n data: axisData,\n },\n yAxis: {\n type: 'value',\n },\n legend: {\n data: [],\n },\n dataZoom: [{\n type: 'inside',\n disabled: axisData.length < 15,\n }],\n }\n\n // 堆叠图\n if (groupByDesc.length === 1) {\n config.series = colDesc.map((yItem) => {\n return {\n name: yItem,\n data: data.map(item => item[yItem]),\n type: 'bar',\n emphasis: {\n focus: 'series',\n },\n label: {\n show: true,\n position: 'inside',\n },\n }\n });\n (config.legend as LegendComponentOption).data = colDesc\n }\n else if (groupByDesc.length === 2) {\n const arr = colDesc.map((colDescItem) => {\n return yGroupByDesc.groupByValues?.map((yGroupByDescItem) => {\n const obj: SeriesOption = {\n name: `${yGroupByDescItem || '/'}-${colDescItem}`,\n type: 'bar',\n stack: colDescItem,\n emphasis: {\n focus: 'series',\n },\n data: [],\n label: {\n show: true,\n position: 'inside',\n },\n }\n obj.data = (newXGroupByDesc?.groupByValues || []).map((xGroupByDescItem) => {\n let targetVal: number | string | null = null\n data.forEach((item) => {\n if (yGroupByDesc.colDesc && item[yGroupByDesc.colDesc] === yGroupByDescItem && newXGroupByDesc?.colDesc && item[newXGroupByDesc.colDesc] === xGroupByDescItem) {\n if (obj.stack) {\n targetVal = item[obj.stack] ?? null\n }\n }\n })\n return targetVal || ''\n }).filter(v => v !== '')\n return obj\n }) || []\n }).flat()\n\n config.series = arr\n delete config.legend\n }\n\n // 1. 定义轴类型\n type CategoryAxisOption = XAXisComponentOption & {\n type: 'category'\n data: (string | number)[]\n }\n\n // 2. 创建配置轴的辅助函数\n function configureAxis(\n axis: XAXisComponentOption | XAXisComponentOption[] | YAXisComponentOption | YAXisComponentOption[] | undefined,\n type: 'category' | 'value',\n data?: (string | number)[],\n name?: string,\n ) {\n if (Array.isArray(axis)) {\n axis.forEach((item) => {\n if (item) {\n item.type = type\n if (type === 'category') {\n (item as CategoryAxisOption).data = data || []\n item.name = name || ''\n }\n }\n })\n }\n else if (axis) {\n axis.type = type\n if (type === 'category') {\n (axis as CategoryAxisOption).data = data || []\n axis.name = name || ''\n }\n }\n }\n\n // 3. 使用配置函数\n switch (subShowType) {\n case 'bar-simple':\n case 'default':\n configureAxis(config.xAxis, 'category', axisData, xGroupByDesc?.colDesc || '')\n configureAxis(config.yAxis, 'value')\n break\n\n case 'bar-y-category':\n configureAxis(config.xAxis, 'value')\n configureAxis(config.yAxis, 'category', axisData, xGroupByDesc?.colDesc || '')\n break\n }\n\n return merge(config, chartOptions)\n})\n\nconst { myChart } = useCharts({\n chartDOM: dataChartBar,\n chartOptions: barChartOptions,\n chartData: computed(() => chartData),\n lazyLoad\n})\n\n// 暴露 myChart 方法供父组件访问\ndefineExpose({\n myChart,\n})\n</script>\n\n<template>\n <div\n ref=\"dataChartBar\"\n class=\"data-chart-bar\"\n />\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-bar {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["merge","inject","InjectionChartMerge","v","dataChartBar","ref","barChartOptions","computed","colDesc","xGroupByDesc","groupByDesc","data","modelName","__props","chartData","axisData","Array","from","Set","map","item","filter","yGroupByDesc","find","xAxis","groupByValues","uniq","String","newXGroupByDesc","config","title","text","name","type","axisLabel","interval","formatter","value","length","substring","yAxis","legend","dataZoom","disabled","series","yItem","emphasis","focus","label","show","position","arr","colDescItem","yGroupByDescItem","obj","stack","xGroupByDescItem","targetVal","forEach","flat","configureAxis","axis","isArray","subShowType","chartOptions","myChart","useCharts","chartDOM","lazyLoad","__expose","_createElementBlock","class"],"mappings":"icA8BA,MAAMA,EAAQC,EAAAA,OAAOC,EAAAA,oBAAsBC,GAAWA,GAAG,GACnDC,EAAeC,EAAAA,IAAwB,MAGvCC,EAAkBC,EAAAA,SAAwB,KAC9C,MAAMC,QAAEA,eAASC,EAAAC,YAAcA,EAAAC,KAAaA,EAAO,GAACC,UAAGA,GAAcC,EAAAC,UAE/DC,EAAWC,MAAMC,KAAK,IAAIC,IAAIP,EAAKQ,IAAIC,GAAQA,EAAKX,EAAaD,SAAW,OAAOa,OAAOD,GAAQA,UAAwC,GAG1IE,EAAe,IAChBZ,EAAYa,SAAcH,EAAKI,QAAU,CAC1Cd,YAAa,KACbe,cAAe,GACfjB,QAAS,GACTgB,OAAO,GAETC,cAAeC,EAAAA,KAAKf,EAAKQ,IAAIC,GAAQV,EAAYa,KAAKH,IAASA,EAAKI,QAAQhB,QAAUmB,OAAOP,EAAKV,EAAYa,KAAKH,IAASA,EAAKI,QAAQhB,SAAW,KAAO,MAIvJoB,EAAkBnB,EACpB,IACKA,EACHgB,cAAeC,EAAAA,KAAKf,EAAKQ,OAAYV,EAAaD,QAAUmB,OAAOP,EAAKX,EAAaD,UAAY,MAEnGC,EAEEoB,EAAwB,CAC5BC,MAAO,CACLC,KAAMnB,GAERY,MAAO,CACLQ,KAAM,GACNC,KAAM,WACNC,UAAW,CACTC,SAAU,EACVC,UAAUC,GAEDA,EAAMC,OADY,EACgB,GAAGD,EAAME,UAAU,EADnC,QAC+DF,GAG5F1B,KAAMI,GAERyB,MAAO,CACLP,KAAM,SAERQ,OAAQ,CACN9B,KAAM,IAER+B,SAAU,CAAC,CACTT,KAAM,SACNU,SAAU5B,EAASuB,OAAS,MAKhC,GAA2B,IAAvB5B,EAAY4B,OACdT,EAAOe,OAASpC,EAAQW,IAAK0B,IACpB,CACLb,KAAMa,EACNlC,KAAMA,EAAKQ,IAAIC,GAAQA,EAAKyB,IAC5BZ,KAAM,MACNa,SAAU,CACRC,MAAO,UAETC,MAAO,CACLC,MAAM,EACNC,SAAU,aAIfrB,EAAOY,OAAiC9B,KAAOH,OAClD,GACgC,IAAvBE,EAAY4B,OAAc,CACjC,MAAMa,EAAM3C,EAAQW,IAAKiC,GAChB9B,EAAaG,eAAeN,IAAKkC,IACtC,MAAMC,EAAoB,CACxBtB,KAAM,GAAGqB,GAAoB,OAAOD,IACpCnB,KAAM,MACNsB,MAAOH,EACPN,SAAU,CACRC,MAAO,UAETpC,KAAM,GACNqC,MAAO,CACLC,MAAM,EACNC,SAAU,WAcd,OAXAI,EAAI3C,MAAQiB,GAAiBH,eAAiB,IAAIN,IAAKqC,IACrD,IAAIC,EAAoC,KAQxC,OAPA9C,EAAK+C,QAAStC,IACRE,EAAad,SAAWY,EAAKE,EAAad,WAAa6C,GAAoBzB,GAAiBpB,SAAWY,EAAKQ,EAAgBpB,WAAagD,GACvIF,EAAIC,QACNE,EAAYrC,EAAKkC,EAAIC,QAAU,QAI9BE,GAAa,KACnBpC,OAAOlB,GAAW,KAANA,GACRmD,KACH,IACLK,OAEH9B,EAAOe,OAASO,SACTtB,EAAOY,MAChB,CASA,SAASmB,EACPC,EACA5B,EACAtB,EACAqB,GAEIhB,MAAM8C,QAAQD,GAChBA,EAAKH,QAAStC,IACRA,IACFA,EAAKa,KAAOA,EACC,aAATA,IACDb,EAA4BT,KAAOA,GAAQ,GAC5CS,EAAKY,KAAOA,GAAQ,OAKnB6B,IACPA,EAAK5B,KAAOA,EACC,aAATA,IACD4B,EAA4BlD,KAAOA,GAAQ,GAC5CkD,EAAK7B,KAAOA,GAAQ,IAG1B,CAGA,OAAQnB,EAAAkD,aACN,IAAK,aACL,IAAK,UACHH,EAAc/B,EAAOL,MAAO,WAAYT,EAAUN,GAAcD,SAAW,IAC3EoD,EAAc/B,EAAOW,MAAO,SAC5B,MAEF,IAAK,iBACHoB,EAAc/B,EAAOL,MAAO,SAC5BoC,EAAc/B,EAAOW,MAAO,WAAYzB,EAAUN,GAAcD,SAAW,IAI/E,OAAOR,EAAM6B,EAAQhB,EAAAmD,iBAGjBC,QAAEA,GAAYC,YAAU,CAC5BC,SAAU/D,EACV4D,aAAc1D,EACdQ,UAAWP,EAAAA,SAAS,IAAMM,EAAAC,WAC1BsD,SAAOvD,EAAAuD,kBAITC,EAAa,CACXJ,kCAKAK,EAAAA,mBAGE,MAAA,SAFI,eAAJjE,IAAID,EACJmE,MAAM"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e="/* unplugin-vue-components disabled */\n.data-chart-bar[data-v-c325b6e7] {\n width: 100%;\n height: 100%;\n}";require("../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.cjs").default(e),exports.default=e;
|
2
|
+
//# sourceMappingURL=bar.vue3.cjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"bar.vue3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./funnel.vue2.cjs");require("./funnel.vue3.cjs");var r=require("../../../../_virtual/_plugin-vue_export-helper.cjs").default(e.default,[["__scopeId","data-v-c580cbe3"]]);exports.default=r;
|
2
2
|
//# sourceMappingURL=funnel.vue.cjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"funnel.vue.cjs","sources":[
|
1
|
+
{"version":3,"file":"funnel.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("../utils/injectionKeys.cjs"),a=require("../utils/useCharts.cjs"),r=e.defineComponent({name:"DataChartFunnel",__name:"funnel",props:{chartData:{type:Object,required:!0},chartOptions:{type:null,required:!0},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(r,{expose:n}){const l=e.ref(),o=e.inject(t.InjectionChartMerge,e=>e,!0),s=e.computed(()=>{const{colDesc:e,xGroupByDesc:t,modelName:a,data:n}=r.chartData,l={title:{text:a},legend:{},series:e.map(e=>({name:e,type:"funnel",left:"10%",width:"80%",label:{formatter:"{c}"},labelLine:{show:!1},itemStyle:{opacity:.7},emphasis:{label:{position:"inside",formatter:`{b}${e}: {c}`}},data:n.map(a=>({name:a[t?.colDesc||""],value:a[e]||""}))}))};return 1!==e.length&&(l.legend.data=e),o(l,r.chartOptions)}),{myChart:c}=a.useCharts({chartDOM:l,chartOptions:s,chartData:e.computed(()=>r.chartData),lazyLoad:r.lazyLoad});return n({myChart:c}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartFunnel",ref:l,class:"data-chart-funnel"},null,512))}});exports.default=r;
|
2
2
|
//# sourceMappingURL=funnel.vue2.cjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"funnel.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
1
|
+
{"version":3,"file":"funnel.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/funnel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { LegendOption } from 'echarts/types/dist/shared'\nimport type { EChartsOption, IFormatPublicData } from '../utils/types'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartFunnel',\n})\nconst {\n chartOptions,\n chartData,\n lazyLoad = true,\n} = defineProps<{\n chartData: IFormatPublicData\n chartOptions: EChartsOption\n lazyLoad?: boolean\n}>()\nconst dataChartFunnel = ref()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\nconst funnelChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, modelName, data } = chartData\n\n const config = {\n title: {\n text: modelName,\n },\n legend: {},\n series: colDesc.map((item) => {\n return {\n name: item,\n type: 'funnel',\n left: '10%',\n width: '80%',\n label: {\n formatter: '{c}',\n },\n labelLine: {\n show: false,\n },\n itemStyle: {\n opacity: 0.7,\n },\n emphasis: {\n label: {\n position: 'inside',\n formatter: `{b}${item}: {c}`,\n },\n },\n data: data.map(yItem => ({\n name: yItem[xGroupByDesc?.colDesc || ''],\n value: yItem[item] || '',\n })),\n }\n }),\n }\n if (colDesc.length !== 1) {\n (config.legend as LegendOption).data = colDesc\n }\n return merge(config, chartOptions)\n})\n\nconst { myChart } = useCharts({\n chartDOM: dataChartFunnel,\n chartOptions: funnelChartOptions,\n chartData: computed(() => chartData),\n lazyLoad\n})\n\n// 暴露 myChart 方法供父组件访问\ndefineExpose({\n myChart,\n})\n</script>\n\n<template>\n <div\n ref=\"dataChartFunnel\"\n class=\"data-chart-funnel\"\n />\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-funnel {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["dataChartFunnel","ref","merge","inject","InjectionChartMerge","v","funnelChartOptions","computed","colDesc","xGroupByDesc","modelName","data","__props","chartData","config","title","text","legend","series","map","item","name","type","left","width","label","formatter","labelLine","show","itemStyle","opacity","emphasis","position","yItem","value","length","chartOptions","myChart","useCharts","chartDOM","lazyLoad","__expose","_createElementBlock","class"],"mappings":"qXAkBA,MAAMA,EAAkBC,EAAAA,MAClBC,EAAQC,EAAAA,OAAOC,EAAAA,oBAAsBC,GAAWA,GAAG,GACnDC,EAAqBC,EAAAA,SAAwB,KACjD,MAAMC,QAAEA,EAAAC,aAASA,EAAAC,UAAcA,EAAAC,KAAWA,GAASC,EAAAC,UAE7CC,EAAS,CACbC,MAAO,CACLC,KAAMN,GAERO,OAAQ,CAAA,EACRC,OAAQV,EAAQW,IAAKC,IACZ,CACLC,KAAMD,EACNE,KAAM,SACNC,KAAM,MACNC,MAAO,MACPC,MAAO,CACLC,UAAW,OAEbC,UAAW,CACTC,MAAM,GAERC,UAAW,CACTC,QAAS,IAEXC,SAAU,CACRN,MAAO,CACLO,SAAU,SACVN,UAAW,MAAMN,WAGrBT,KAAMA,EAAKQ,IAAIc,IAAA,CACbZ,KAAMY,EAAMxB,GAAcD,SAAW,IACrC0B,MAAOD,EAAMb,IAAS,UAQ9B,OAHuB,IAAnBZ,EAAQ2B,SACTrB,EAAOG,OAAwBN,KAAOH,GAElCN,EAAMY,EAAQF,EAAAwB,iBAGjBC,QAAEA,GAAYC,YAAU,CAC5BC,SAAUvC,EACVoC,aAAc9B,EACdO,UAAWN,EAAAA,SAAS,IAAMK,EAAAC,WAC1B2B,SAAO5B,EAAA4B,kBAITC,EAAa,CACXJ,kCAKAK,EAAAA,mBAGE,MAAA,SAFI,kBAAJzC,IAAID,EACJ2C,MAAM"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e="/* unplugin-vue-components disabled */\n.data-chart-funnel[data-v-c580cbe3] {\n width: 100%;\n height: 100%;\n}";require("../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.cjs").default(e),exports.default=e;
|
2
|
+
//# sourceMappingURL=funnel.vue3.cjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"funnel.vue3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("../utils/injectionKeys.cjs"),a=require("../utils/useCharts.cjs"),r=e.defineComponent({name:"DataChartLine",__name:"line",props:{chartData:{type:Object,required:!0},subShowType:{type:String,required:!0,default:"line-simple"},chartOptions:{type:null,required:!0}},setup(r){const s=e.ref(),
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("../utils/injectionKeys.cjs"),a=require("../utils/useCharts.cjs"),r=e.defineComponent({name:"DataChartLine",__name:"line",props:{chartData:{type:Object,required:!0},subShowType:{type:String,required:!0,default:"line-simple"},chartOptions:{type:null,required:!0},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(r,{expose:n}){const s=e.ref(),l=e.inject(t.InjectionChartMerge,e=>e,!0),c=15,o="Total",i=!0;const u=e.computed(()=>{const{colDesc:e,xGroupByDesc:t,groupByDesc:a,data:n,modelName:s}=r.chartData;n&&0!==n.length||console.warn("[LineChart] 数据为空,图表将显示空状态"),e&&0!==e.length||console.warn("[LineChart] colDesc 为空,无法生成图表系列"),t?.colDesc||console.warn("[LineChart] xGroupByDesc.colDesc 为空,无法生成 X 轴数据");const u=Array.from(new Set(n?.map(e=>e[t?.colDesc||""]))).filter(e=>null!=e)||[],d=a?.find(e=>!e.xAxis),p={title:{text:s},legend:{data:[]},xAxis:{name:t?.colDesc||"",data:u},dataZoom:[{type:"inside",disabled:u.length<c}]};if(1===a?.length)p.series=e.map(e=>({name:e,type:"line",smooth:i,data:u.map(a=>{const r=n.find(e=>e[t?.colDesc||""]===a);return r?r[e]??null:null})})),p.legend.data=e;else if(2===a?.length){const a=[...new Set(n.map(e=>String(e[d?.colDesc||""])))];p.legend.data=a,p.series=a.map(a=>function(e,t,a,r,n,s){const l=[];return t.forEach(t=>{const c=a.find(a=>a[r?.colDesc]===t&&a[n?.colDesc]===e);c&&void 0!==c[s[0]]&&null!==c[s[0]]?l.push(c[s[0]]):l.push(null)}),{name:e,type:"line",smooth:i,stack:o,areaStyle:{},data:l}}(a,u,n,t,d,e))}return p.series=p.series?.map(e=>{const t={...e};switch(r.subShowType){case"line-simple":default:delete t.areaStyle;break;case"area-basic":t.areaStyle={}}return t}),l(p,r.chartOptions)}),{myChart:d}=a.useCharts({chartDOM:s,chartOptions:u,chartData:e.computed(()=>r.chartData),lazyLoad:r.lazyLoad});return n({myChart:d}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartLine",ref:s,class:"data-chart-line"},null,512))}});exports.default=r;
|
2
2
|
//# sourceMappingURL=line.vue2.cjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"line.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/line.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { LegendComponentOption } from 'echarts'\nimport type { EChartsOption, IFormatPublicData } from '../utils/types'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartLine',\n})\nconst {\n chartData,\n subShowType = 'line-simple',\n chartOptions,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n}>()\nconst dataChartLine = ref()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\n// 抽取类型定义\ninterface SeriesItem {\n name: string\n type: 'line'\n stack?: string\n smooth?: boolean\n areaStyle?: Record<string, any>\n data: Array<string | number>\n}\n\n// 将配置提取为常量\nconst CHART_CONSTANTS = {\n MIN_ZOOM_LENGTH: 15,\n STACK_NAME: 'Total',\n SMOOTH: true,\n} as const\n\n// 提取处理图表系列数据的函数\nfunction processSeriesData(legendDataItem: string,\n xAxisData: (string | number)[],\n data: any[],\n xGroupByDesc: any,\n yGroupByDesc: any,\n colDesc: string[]): SeriesItem {\n const seriesData: (string | number)[] = []\n\n xAxisData.forEach((xAxisItem) => {\n const targetData = data\n .find(dataItem =>\n dataItem[xGroupByDesc?.colDesc] === xAxisItem\n && dataItem[yGroupByDesc?.colDesc] === legendDataItem,\n )\n\n if (targetData) {\n seriesData.push(targetData[colDesc[0]])\n }\n else {\n seriesData.push(
|
1
|
+
{"version":3,"file":"line.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/line.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { LegendComponentOption } from 'echarts'\nimport type { EChartsOption, IFormatPublicData } from '../utils/types'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartLine',\n})\nconst {\n chartData,\n subShowType = 'line-simple',\n chartOptions,\n lazyLoad = true,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n lazyLoad?: boolean\n}>()\nconst dataChartLine = ref()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\n// 抽取类型定义\ninterface SeriesItem {\n name: string\n type: 'line'\n stack?: string\n smooth?: boolean\n areaStyle?: Record<string, any>\n data: Array<string | number | null>\n}\n\n// 将配置提取为常量\nconst CHART_CONSTANTS = {\n MIN_ZOOM_LENGTH: 15,\n STACK_NAME: 'Total',\n SMOOTH: true,\n} as const\n\n// 提取处理图表系列数据的函数\nfunction processSeriesData(legendDataItem: string,\n xAxisData: (string | number)[],\n data: any[],\n xGroupByDesc: any,\n yGroupByDesc: any,\n colDesc: string[]): SeriesItem {\n const seriesData: (string | number | null)[] = []\n\n xAxisData.forEach((xAxisItem) => {\n const targetData = data\n .find(dataItem =>\n dataItem[xGroupByDesc?.colDesc] === xAxisItem\n && dataItem[yGroupByDesc?.colDesc] === legendDataItem,\n )\n\n if (targetData && targetData[colDesc[0]] !== undefined && targetData[colDesc[0]] !== null) {\n seriesData.push(targetData[colDesc[0]])\n }\n else {\n seriesData.push(null) // 使用 null 而不是 0,让 ECharts 自动处理空值\n }\n })\n\n return {\n name: legendDataItem,\n type: 'line',\n smooth: CHART_CONSTANTS.SMOOTH,\n stack: CHART_CONSTANTS.STACK_NAME,\n areaStyle: {},\n data: seriesData,\n }\n}\n\nconst lineChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, groupByDesc, data, modelName } = chartData\n\n // 数据验证\n if (!data || data.length === 0) {\n console.warn('[LineChart] 数据为空,图表将显示空状态')\n }\n\n if (!colDesc || colDesc.length === 0) {\n console.warn('[LineChart] colDesc 为空,无法生成图表系列')\n }\n\n if (!xGroupByDesc?.colDesc) {\n console.warn('[LineChart] xGroupByDesc.colDesc 为空,无法生成 X 轴数据')\n }\n\n const xAxisData = Array.from(new Set(data?.map(item => item[xGroupByDesc?.colDesc || '']))).filter(item => item !== undefined && item !== null) || []\n const yGroupByDesc = groupByDesc?.find(item => !item.xAxis)\n\n const config: EChartsOption & { series?: SeriesItem[] } = {\n title: { text: modelName },\n legend: { data: [] },\n xAxis: {\n name: xGroupByDesc?.colDesc || '',\n data: xAxisData,\n },\n dataZoom: [{\n type: 'inside',\n disabled: xAxisData.length < CHART_CONSTANTS.MIN_ZOOM_LENGTH,\n }],\n }\n\n // 处理系列数据\n if (groupByDesc?.length === 1) {\n config.series = colDesc.map(yItem => ({\n name: yItem,\n type: 'line',\n smooth: CHART_CONSTANTS.SMOOTH,\n data: xAxisData.map(xValue => {\n const dataItem = data.find(item => item[xGroupByDesc?.colDesc || ''] === xValue)\n return dataItem ? (dataItem[yItem] ?? null) : null\n }),\n }));\n (config.legend as LegendComponentOption).data = colDesc\n }\n else if (groupByDesc?.length === 2) {\n const legendData = [...new Set(data.map(item => String(item[yGroupByDesc?.colDesc || ''])))]\n ;(config.legend as LegendComponentOption).data = legendData\n\n config.series = legendData.map(legendDataItem =>\n processSeriesData(legendDataItem, xAxisData, data, xGroupByDesc, yGroupByDesc, colDesc),\n )\n }\n\n // 处理图表展示类型\n config.series = config.series?.map((item) => {\n const seriesItem = { ...item }\n\n switch (subShowType) {\n case 'line-simple':\n delete seriesItem.areaStyle\n break\n case 'area-basic':\n seriesItem.areaStyle = {}\n break\n default:\n delete seriesItem.areaStyle\n }\n\n return seriesItem\n })\n\n return merge(config, chartOptions)\n})\n\nconst { myChart } = useCharts({\n chartDOM: dataChartLine,\n chartOptions: lineChartOptions,\n chartData: computed(() => chartData),\n lazyLoad\n})\n\n// 暴露 myChart 方法供父组件访问\ndefineExpose({\n myChart,\n})\n</script>\n\n<template>\n <div\n ref=\"dataChartLine\"\n class=\"data-chart-line\"\n />\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-line {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["dataChartLine","ref","merge","inject","InjectionChartMerge","v","CHART_CONSTANTS","lineChartOptions","computed","colDesc","xGroupByDesc","groupByDesc","data","modelName","__props","chartData","length","console","warn","xAxisData","Array","from","Set","map","item","filter","yGroupByDesc","find","xAxis","config","title","text","legend","name","dataZoom","type","disabled","series","yItem","smooth","xValue","dataItem","legendData","String","legendDataItem","seriesData","forEach","xAxisItem","targetData","push","stack","areaStyle","processSeriesData","seriesItem","subShowType","chartOptions","myChart","useCharts","chartDOM","lazyLoad","__expose","_createElementBlock","class"],"mappings":"6aAoBA,MAAMA,EAAgBC,EAAAA,MAChBC,EAAQC,EAAAA,OAAOC,EAAAA,oBAAsBC,GAAWA,GAAG,GAanDC,EACa,GADbA,EAEQ,QAFRA,GAGI,EAqCV,MAAMC,EAAmBC,EAAAA,SAAwB,KAC/C,MAAMC,QAAEA,EAAAC,aAASA,EAAAC,YAAcA,OAAaC,EAAAC,UAAMA,GAAcC,EAAAC,UAG3DH,GAAwB,IAAhBA,EAAKI,QAChBC,QAAQC,KAAK,6BAGVT,GAA8B,IAAnBA,EAAQO,QACtBC,QAAQC,KAAK,mCAGVR,GAAcD,SACjBQ,QAAQC,KAAK,kDAGf,MAAMC,EAAYC,MAAMC,KAAK,IAAIC,IAAIV,GAAMW,IAAIC,GAAQA,EAAKd,GAAcD,SAAW,OAAOgB,OAAOD,GAAQA,UAAwC,GAC7IE,EAAef,GAAagB,KAAKH,IAASA,EAAKI,OAE/CC,EAAoD,CACxDC,MAAO,CAAEC,KAAMlB,GACfmB,OAAQ,CAAEpB,KAAM,IAChBgB,MAAO,CACLK,KAAMvB,GAAcD,SAAW,GAC/BG,KAAMO,GAERe,SAAU,CAAC,CACTC,KAAM,SACNC,SAAUjB,EAAUH,OAASV,KAKjC,GAA4B,IAAxBK,GAAaK,OACfa,EAAOQ,OAAS5B,EAAQc,IAAIe,IAAA,CAC1BL,KAAMK,EACNH,KAAM,OACNI,OAAQjC,EACRM,KAAMO,EAAUI,IAAIiB,IAClB,MAAMC,EAAW7B,EAAKe,KAAKH,GAAQA,EAAKd,GAAcD,SAAW,MAAQ+B,GACzE,OAAOC,EAAYA,EAASH,IAAU,KAAQ,UAGjDT,EAAOG,OAAiCpB,KAAOH,OAClD,GACiC,IAAxBE,GAAaK,OAAc,CAClC,MAAM0B,EAAa,IAAI,IAAIpB,IAAIV,EAAKW,IAAIC,GAAQmB,OAAOnB,EAAKE,GAAcjB,SAAW,QACnFoB,EAAOG,OAAiCpB,KAAO8B,EAEjDb,EAAOQ,OAASK,EAAWnB,OAlF/B,SAA2BqB,EACzBzB,EACAP,EACAF,EACAgB,EACAjB,GACA,MAAMoC,EAAyC,GAiB/C,OAfA1B,EAAU2B,QAASC,IACjB,MAAMC,EAAapC,EAChBe,KAAKc,GACJA,EAAS/B,GAAcD,WAAasC,GACjCN,EAASf,GAAcjB,WAAamC,GAGvCI,QAAyC,IAA3BA,EAAWvC,EAAQ,KAAgD,OAA3BuC,EAAWvC,EAAQ,IAC3EoC,EAAWI,KAAKD,EAAWvC,EAAQ,KAGnCoC,EAAWI,KAAK,QAIb,CACLhB,KAAMW,EACNT,KAAM,OACNI,OAAQjC,EACR4C,MAAO5C,EACP6C,UAAW,CAAA,EACXvC,KAAMiC,EAEV,CAoDMO,CAAkBR,EAAgBzB,EAAWP,EAAMF,EAAcgB,EAAcjB,GAEnF,CAoBA,OAjBAoB,EAAOQ,OAASR,EAAOQ,QAAQd,IAAKC,IAClC,MAAM6B,EAAa,IAAK7B,GAExB,OAAQV,EAAAwC,aACN,IAAK,cAML,eACSD,EAAWF,gBAJpB,IAAK,aACHE,EAAWF,UAAY,CAAA,EAM3B,OAAOE,IAGFnD,EAAM2B,EAAQf,EAAAyC,iBAGjBC,QAAEA,GAAYC,YAAU,CAC5BC,SAAU1D,EACVuD,aAAchD,EACdQ,UAAWP,EAAAA,SAAS,IAAMM,EAAAC,WAC1B4C,SAAO7C,EAAA6C,kBAITC,EAAa,CACXJ,kCAKAK,EAAAA,mBAGE,MAAA,SAFI,gBAAJ5D,IAAID,EACJ8D,MAAM"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./pie.vue2.cjs");require("./pie.vue3.cjs");var r=require("../../../../_virtual/_plugin-vue_export-helper.cjs").default(e.default,[["__scopeId","data-v-b5a98608"]]);exports.default=r;
|
2
2
|
//# sourceMappingURL=pie.vue.cjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"pie.vue.cjs","sources":[
|
1
|
+
{"version":3,"file":"pie.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("lodash-es"),r=require("../utils/injectionKeys.cjs"),a=require("../utils/useCharts.cjs"),o=e.defineComponent({name:"DataChartPie",__name:"pie",props:{chartData:{type:Object,required:!0},subShowType:{type:String,required:!0,default:"pie-simple"},chartOptions:{type:null,required:!0},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(o,{expose:i}){const c=e.inject(r.InjectionChartMerge,e=>e,!0),l=e.ref(null),s=e.computed(()=>{const{colDesc:e,xGroupByDesc:r,data:a,modelName:i}=o.chartData,l=e.length,s={title:{text:i},series:e.map((e,i)=>{const c={name:e,type:"pie",center:["50%","50%"],data:[],emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(0, 0, 0, 0.5)"}},label:{formatter:"{b}:{c}({d}%)",rich:{b:{color:"#4C5058",fontSize:14,fontWeight:"bold",lineHeight:33}}}};let s=5;const n=a.filter(t=>void 0!==t[e]),u=t.orderBy(n,[e],["desc"]),h=u.reduce((t,r)=>{const a=Number(r[e])||0;return Number.isNaN(a)?t:t+a},0);if(n.length>s)for(;s<9;){const t=u.slice(0,s);if(t.reduce((t,r)=>t+Number(r[e]),0)/h>.9||8===s){const a=u.slice(s,u.length-1);c.data=n.map(a=>{let o={};return t.forEach(t=>{JSON.stringify(t)===JSON.stringify(a)&&(o={name:r?.colDesc?a[r.colDesc]:"",value:a[e]})}),o}).filter(e=>e&&Object.keys(e).length>0),c.data.push({name:"其它",value:a.reduce((t,r)=>t+Number(r[e]),0)});break}s++}else c.data=n.map(t=>({name:r?.colDesc&&t[r.colDesc]||"",value:Number(t[e]||0)}));if(1===l?c.center=["50%","60%"]:2===l?0===i?(c.right="40%",c.left="",c.center=["40%","60%"]):(c.right="",c.left="40%",c.center=["60%","60%"]):3===l?0===i?(c.right="40%",c.bottom="50%",c.top="",c.left="",c.center=["40%","78%"]):1===i?(c.right="",c.bottom="50%",c.top="",c.left="40%",c.center=["60%","78%"]):(c.right="40%",c.bottom="",c.top="50%",c.left="",c.center=["40%","60%"]):4===l&&(0===i?(c.right="40%",c.bottom="50%",c.top="",c.left="",c.center=["40%","78%"]):1===i?(c.right="",c.bottom="50%",c.top="",c.left="40%",c.center=["60%","78%"]):2===i?(c.right="40%",c.bottom="",c.top="50%",c.left="",c.center=["40%","60%"]):(c.right="",c.bottom="",c.top="50%",c.left="40%",c.center=["60%","60%"])),"pie-borderRadius"===o.subShowType)c.radius=["50%","70%"];else c.radius="50%";return c})};return c(s,o.chartOptions)}),{myChart:n}=a.useCharts({chartDOM:l,chartOptions:s,chartData:e.computed(()=>o.chartData),lazyLoad:o.lazyLoad});return i({myChart:n}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartPie",ref:l,class:"data-chart-pie"},null,512))}});exports.default=o;
|
2
2
|
//# sourceMappingURL=pie.vue2.cjs.map
|