feat: replace vue-charts with nuxt-echarts

README.md

@@ -51,7 +51,7 @@
 
 - 🔔 Notification store
 
-- 📉 Data visualization with [vue-echarts](https://github.com/ecomfe/vue-echarts)
+- 📉 Data visualization with [nuxt-echarts](https://github.com/kingyue737/nuxt-echarts)
 
 - 🎨 Theme color customization and dark mode
 

app.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { THEME_KEY } from 'vue-echarts'
-
 const theme = useTheme()
 provide(
   THEME_KEY,

components/Chart/ChartBar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { ECOption } from '~/plugins/echarts'
 const option: ECOption = {
   backgroundColor: 'transparent',
   tooltip: {

components/Chart/ChartLine.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { ECOption } from '~/plugins/echarts'
-
 const data = [
   ['2022-06-05', 116],
   ['2022-06-06', 129],

components/Chart/ChartPie.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { ECOption } from '~/plugins/echarts'
 const option: ECOption = {
   backgroundColor: 'transparent',
   tooltip: {

components/Chart/ChartRadar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { ECOption } from '~/plugins/echarts'
 const option: ECOption = {
   backgroundColor: 'transparent',
   radar: {

nuxt.config.ts

@@ -15,14 +15,12 @@ Object.keys(mdicons).forEach((key) => {
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  build: {
-    transpile: ['vue-echarts', 'resize-detector'],
-  },
   modules: [
     '@pinia/nuxt',
     '@vueuse/nuxt',
     'vuetify-nuxt-module',
     'nuxt-auth-utils',
+    'nuxt-echarts',
     '@nuxt/eslint',
     '@nuxt/test-utils/module',
   ],
@@ -41,6 +39,20 @@ export default defineNuxtConfig({
       },
     },
   },
+  echarts: {
+    charts: ['LineChart', 'BarChart', 'PieChart', 'RadarChart'],
+    renderer: 'svg',
+    components: [
+      'DataZoomComponent',
+      'LegendComponent',
+      'TooltipComponent',
+      'ToolboxComponent',
+      'GridComponent',
+      'TitleComponent',
+      'DatasetComponent',
+      'VisualMapComponent',
+    ],
+  },
   vite: {
     plugins: [
       regexpPlugin({

package.json

@@ -21,6 +21,7 @@
     "eslint": "^9.5.0",
     "happy-dom": "^14.12.3",
     "nuxt": "^3.12.2",
+    "nuxt-echarts": "^0.0.9",
     "playwright-core": "^1.45.0",
     "prettier": "^3.3.2",
     "rollup-plugin-regexp": "^5.0.1",
@@ -32,8 +33,7 @@
     "@pinia/nuxt": "^0.5.1",
     "@vueuse/nuxt": "^10.11.0",
     "echarts": "^5.5.0",
-    "nuxt-auth-utils": "^0.1.0",
-    "vue-echarts": "^6.7.3"
+    "nuxt-auth-utils": "^0.1.0"
   },
   "pnpm": {
     "peerDependencyRules": {