From 7255a8d835e3011dc3f96c35590bd36fe45c5718 Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Sun, 23 Jul 2023 13:21:29 +0800 Subject: [PATCH] =?UTF-8?q?add:=20v4.1.3=E7=BB=86=E8=8A=82=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/components/RayChart/index.tsx | 11 +- .../theme/macarons/macarons-dark.json | 372 ++++++++++++++++++ .../theme/{ => macarons}/macarons.json | 0 src/components/RayChart/type.ts | 2 +- src/views/echart/index.tsx | 23 +- .../router-demo/router-demo-home/index.tsx | 3 +- vite.config.ts | 6 +- 8 files changed, 397 insertions(+), 21 deletions(-) create mode 100644 src/components/RayChart/theme/macarons/macarons-dark.json rename src/components/RayChart/theme/{ => macarons}/macarons.json (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2db53423..c54868d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ request({ - 将原 `AppComponent` 组件包移动至 `app-components` 包中，并且按照其功能拆分为 `sys` `provider` - 现在将异步注册 `vue-router` - `RayChart` 组件新增 `macarons` 主题。现在支持便捷的自定义主题，在[主题编辑器](https://echarts.apache.org/zh/theme-builder.html)编辑主题后，下载主题（json）放置于对应主题包中即可被自动注册 +- 兼容 `yarn` `npm` 包管理器的 `manualChunks` 配置 ## 4.1.2 diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index 82053265..cc26a56d 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RayChart/index.tsx @@ -295,9 +295,9 @@ const RayChart = defineComponent({ /** 注册 chart */ echartInstance = echarts.init(element, theme, { /** 如果款度为 0, 则以 200px 填充 */ - width: width === 0 ? 200 : undefined, + width: width === 0 ? 200 : void 0, /** 如果高度为 0, 则以 200px 填充 */ - height: height === 0 ? 200 : undefined, + height: height === 0 ? 200 : void 0, }) echartInstanceRef.value = echartInstance @@ -313,6 +313,7 @@ const RayChart = defineComponent({ if (error) { call(error) } + console.error('RayChart render error: ', e) } } @@ -325,7 +326,7 @@ const RayChart = defineComponent({ */ const renderThemeChart = (bool?: boolean) => { if (props.autoChangeTheme) { - bool ? renderChart('dark') : renderChart() + bool ? renderChart('macarons-dark') : renderChart() return void 0 } @@ -383,7 +384,7 @@ const RayChart = defineComponent({ * 自动跟随模板主题或者指定主题皆可 */ if (props.autoChangeTheme || props.theme) { - themeValue.value ? renderChart('dark') : renderChart() + themeValue.value ? renderChart('macarons-dark') : renderChart() } else { renderChart() } @@ -425,7 +426,7 @@ const RayChart = defineComponent({ if (props.autoChangeTheme) { renderThemeChart(themeValue.value) } else { - props.theme ? renderChart('dark') : renderChart() + props.theme ? renderChart('macarons-dark') : renderChart() } /** 注册事件 */ diff --git a/src/components/RayChart/theme/macarons/macarons-dark.json b/src/components/RayChart/theme/macarons/macarons-dark.json new file mode 100644 index 00000000..fecbc04a --- /dev/null +++ b/src/components/RayChart/theme/macarons/macarons-dark.json @@ -0,0 +1,372 @@ +{ + "color": [ + "#fc97af", + "#87f7cf", + "#f7f494", + "#72ccff", + "#f7c5a0", + "#d4a4eb", + "#d2f5a6", + "#76f2f2" + ], + "backgroundColor": "rgba(41,52,65,1)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#ffffff" + }, + "subtextStyle": { + "color": "#dddddd" + } + }, + "line": { + "itemStyle": { + "borderWidth": "4" + }, + "lineStyle": { + "width": "3" + }, + "symbolSize": "0", + "symbol": "circle", + "smooth": true + }, + "radar": { + "itemStyle": { + "borderWidth": "4" + }, + "lineStyle": { + "width": "3" + }, + "symbolSize": "0", + "symbol": "circle", + "smooth": true + }, + "bar": { + "itemStyle": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + }, + "pie": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "scatter": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "boxplot": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "parallel": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "sankey": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "funnel": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "gauge": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "candlestick": { + "itemStyle": { + "color": "#fc97af", + "color0": "transparent", + "borderColor": "#fc97af", + "borderColor0": "#87f7cf", + "borderWidth": "2" + } + }, + "graph": { + "itemStyle": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "lineStyle": { + "width": "1", + "color": "#ffffff" + }, + "symbolSize": "0", + "symbol": "circle", + "smooth": true, + "color": [ + "#fc97af", + "#87f7cf", + "#f7f494", + "#72ccff", + "#f7c5a0", + "#d4a4eb", + "#d2f5a6", + "#76f2f2" + ], + "label": { + "color": "#293441" + } + }, + "map": { + "itemStyle": { + "areaColor": "#f3f3f3", + "borderColor": "#999999", + "borderWidth": 0.5 + }, + "label": { + "color": "#893448" + }, + "emphasis": { + "itemStyle": { + "areaColor": "rgba(255,178,72,1)", + "borderColor": "#eb8146", + "borderWidth": 1 + }, + "label": { + "color": "rgb(137,52,72)" + } + } + }, + "geo": { + "itemStyle": { + "areaColor": "#f3f3f3", + "borderColor": "#999999", + "borderWidth": 0.5 + }, + "label": { + "color": "#893448" + }, + "emphasis": { + "itemStyle": { + "areaColor": "rgba(255,178,72,1)", + "borderColor": "#eb8146", + "borderWidth": 1 + }, + "label": { + "color": "rgb(137,52,72)" + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#aaaaaa" + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": ["#e6e6e6"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#aaaaaa" + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": ["#e6e6e6"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#aaaaaa" + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": ["#e6e6e6"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "color": "#aaaaaa" + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": ["#e6e6e6"] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] + } + } + }, + "toolbox": { + "iconStyle": { + "borderColor": "#999999" + }, + "emphasis": { + "iconStyle": { + "borderColor": "#666666" + } + } + }, + "legend": { + "textStyle": { + "color": "#999999" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#cccccc", + "width": 1 + }, + "crossStyle": { + "color": "#cccccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#87f7cf", + "width": 1 + }, + "itemStyle": { + "color": "#87f7cf", + "borderWidth": 1 + }, + "controlStyle": { + "color": "#87f7cf", + "borderColor": "#87f7cf", + "borderWidth": 0.5 + }, + "checkpointStyle": { + "color": "#fc97af", + "borderColor": "#fc97af" + }, + "label": { + "color": "#87f7cf" + }, + "emphasis": { + "itemStyle": { + "color": "#f7f494" + }, + "controlStyle": { + "color": "#87f7cf", + "borderColor": "#87f7cf", + "borderWidth": 0.5 + }, + "label": { + "color": "#87f7cf" + } + } + }, + "visualMap": { + "color": ["#fc97af", "#87f7cf"] + }, + "dataZoom": { + "backgroundColor": "rgba(255,255,255,0)", + "dataBackgroundColor": "rgba(114,204,255,1)", + "fillerColor": "rgba(114,204,255,0.2)", + "handleColor": "#72ccff", + "handleSize": "100%", + "textStyle": { + "color": "#333333" + } + }, + "markPoint": { + "label": { + "color": "#293441" + }, + "emphasis": { + "label": { + "color": "#293441" + } + } + } +} diff --git a/src/components/RayChart/theme/macarons.json b/src/components/RayChart/theme/macarons/macarons.json similarity index 100% rename from src/components/RayChart/theme/macarons.json rename to src/components/RayChart/theme/macarons/macarons.json diff --git a/src/components/RayChart/type.ts b/src/components/RayChart/type.ts index 5526b40e..d2810740 100644 --- a/src/components/RayChart/type.ts +++ b/src/components/RayChart/type.ts @@ -40,4 +40,4 @@ export type AutoResize = height: number } -export type ChartTheme = 'dark' | string | object | 'macarons' +export type ChartTheme = 'macarons-dark' | string | object | 'macarons' diff --git a/src/views/echart/index.tsx b/src/views/echart/index.tsx index c5d33303..0853d308 100644 --- a/src/views/echart/index.tsx +++ b/src/views/echart/index.tsx @@ -1,6 +1,6 @@ import './index.scss' -import { NCard, NSwitch, NSpace, NP, NH6, NH2, NH3 } from 'naive-ui' +import { NCard, NSwitch, NSpace, NP, NH2 } from 'naive-ui' import RayChart from '@/components/RayChart/index' import type { EChartsInstance } from '@/types/modules/component' @@ -216,11 +216,18 @@ const Echart = defineComponent({ 该组件会默认以 200*200 宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use - 方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用 + 方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用。 + 该组件可以让你只需要关注 options 的配置，无需关心 chart + 图的资源管理。并且该组件可以自动监听 options + 的变化，所以天生支持响应式，可以让你放心的加载异步数据。 - 基础使用 + 能跟随主题切换的可视化图
- +
渲染成功后运行回调函数
@@ -230,14 +237,6 @@ const Echart = defineComponent({ success={this.handleChartRenderSuccess.bind(this)} />
- 能跟随主题切换的可视化图 -
- -
不跟随主题切换的暗色主题可视化图
diff --git a/src/views/router-demo/router-demo-home/index.tsx b/src/views/router-demo/router-demo-home/index.tsx index ac1cc952..b72bf663 100644 --- a/src/views/router-demo/router-demo-home/index.tsx +++ b/src/views/router-demo/router-demo-home/index.tsx @@ -10,6 +10,7 @@ */ import { NSpace, NDataTable, NButton } from 'naive-ui' +import RayTable from '@/components/RayTable/index' import type { DataTableColumns } from 'naive-ui' @@ -83,7 +84,7 @@ const RouterDemoHome = defineComponent({ render() { return ( - + ) }, diff --git a/vite.config.ts b/vite.config.ts index 23ee75da..1c6ee46a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -165,11 +165,13 @@ export default defineConfig(async ({ mode }) => { output: { manualChunks: (id) => { if (id.includes('node_modules')) { + const index = id.includes('pnpm') ? 1 : 0 + return id .toString() .split('node_modules/')[1] - .split('/')[1] - .toString() + .split('/') + [index].toString() } }, },