diff --git a/.env b/.env index e381b3c..cfd4432 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ # 应用名称 -VITE_APP_TITLE="Vite 模板" +VITE_APP_TITLE="车辆监控中心" # 平台本地运行端口号 VITE_PORT=7000 diff --git a/.env.production b/.env.production index fdb1aeb..1bbd063 100644 --- a/.env.production +++ b/.env.production @@ -5,7 +5,7 @@ VITE_PORT=8800 VITE_PUBLIC_PATH=/ # 跨域代理地址 -VITE_APP_URL=http://localhost:8000 +VITE_APP_URL=http://localhost:8801 # 如果端口被占用会直接退出,而不是尝试下一个端口 VITE_STRICT_PORT=false diff --git a/build/server.ts b/build/server.ts index 5b795ee..a9b4b85 100644 --- a/build/server.ts +++ b/build/server.ts @@ -5,7 +5,6 @@ import { wrapperEnv } from './utils'; /* 开发服务配置 */ export const server = (mode) => { const { VITE_PORT, VITE_APP_URL, VITE_STRICT_PORT } = wrapperEnv(mode); - console.log(VITE_STRICT_PORT); const options: ServerOptions = { strictPort: VITE_STRICT_PORT, port: VITE_PORT, diff --git a/src/layout/components/AppMain/MainRight.vue b/src/layout/components/AppMain/MainRight.vue index 92242b0..3b353ff 100644 --- a/src/layout/components/AppMain/MainRight.vue +++ b/src/layout/components/AppMain/MainRight.vue @@ -5,7 +5,7 @@ import { renderEcharts } from '@/layout/components/AppMain/data'; const weekDataChart = ref(); -onMounted(async () => { +onMounted(() => { renderEcharts(weekDataChart); }); diff --git a/src/layout/components/AppMain/data.ts b/src/layout/components/AppMain/data.ts index 57e6d10..69db639 100644 --- a/src/layout/components/AppMain/data.ts +++ b/src/layout/components/AppMain/data.ts @@ -1,9 +1,10 @@ import 'echarts/lib/component/dataZoom'; import type { EChartsOption } from 'echarts'; -import * as echarts from 'echarts'; import { type Ref, ref } from 'vue'; +import echarts from '@/plugins/echarts'; + const option = ref({ backgroundColor: 'transparent', grid: { right: 10, left: 10, bottom: 20 }, @@ -94,11 +95,8 @@ const option = ref({ }); export const renderEcharts = (element: Ref) => { - // 基于准备好的dom,初始化echarts实例 const myChart = echarts.init(element.value, null, { renderer: 'svg', }); - - // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option.value); }; diff --git a/src/plugins/echarts.ts b/src/plugins/echarts.ts new file mode 100644 index 0000000..0cba96d --- /dev/null +++ b/src/plugins/echarts.ts @@ -0,0 +1,44 @@ +import { BarChart, LineChart, PieChart } from 'echarts/charts'; +import { + DataZoomComponent, + GraphicComponent, + GridComponent, + LegendComponent, + PolarComponent, + TitleComponent, + ToolboxComponent, + TooltipComponent, + VisualMapComponent, +} from 'echarts/components'; +import * as echarts from 'echarts/core'; +import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'; +import type { App } from 'vue'; + +const { use } = echarts; + +use([ + PieChart, + BarChart, + LineChart, + CanvasRenderer, + SVGRenderer, + GridComponent, + TitleComponent, + PolarComponent, + LegendComponent, + GraphicComponent, + ToolboxComponent, + TooltipComponent, + DataZoomComponent, + VisualMapComponent, +]); + +/** + * @description 按需引入echarts,具体看 https://echarts.apache.org/handbook/zh/basics/import/#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5 + * @see 温馨提示:必须将 `$echarts` 添加到全局 `globalProperties` ,具体看 https://pure-admin-utils.netlify.app/hooks/useECharts/useECharts#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90 + */ +export function useEcharts(app: App) { + app.config.globalProperties.$echarts = echarts; +} + +export default echarts; diff --git a/src/plugins/index.ts b/src/plugins/index.ts index 6b23b4a..a6146e4 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,6 +1,7 @@ import type { App } from 'vue'; import { setupDirective } from '@/directive'; +import { useEcharts } from '@/plugins/echarts'; import { setUpRouter } from '@/router'; import { setupStore } from '@/store'; @@ -12,5 +13,7 @@ export default { setupStore(app); // 设置指令 setupDirective(app); + // 按需引入echarts + useEcharts(app); }, };