feat: 引入vue-echarts

刘嘉威

2022-10-21 11d963b13ac809e99fb733822d9f09d0b4a4d302

feat: 引入vue-echarts

 package-lock.json

@@ -56,9 +56,9 @@
      "dev": true
    },
    "@types/node": {
      "version": "18.11.2",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.2.tgz",
      "integrity": "sha512-BWN3M23gLO2jVG8g/XHIRFWiiV4/GckeFIqbU/C4V3xpoBBWSMk4OZomouN0wCkfQFPqgZikyLr7DOYDysIkkw==",
      "version": "18.8.0",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.0.tgz",
      "integrity": "sha512-u+h43R6U8xXDt2vzUaVP3VwjjLyOJk6uEciZS8OSyziUQGOwmk+l+4drxcsDboHXwyTaqS1INebghmWMRxq3LA==",
      "dev": true
    },
    "@vitejs/plugin-vue": {
@@ -1574,6 +1574,11 @@
        "functions-have-names": "^1.2.2"
      }
    },
    "resize-detector": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
    },
    "resolve": {
      "version": "1.22.1",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -1970,6 +1975,15 @@
      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A=="
    },
    "vue-echarts": {
      "version": "6.2.3",
      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.2.3.tgz",
      "integrity": "sha512-xHzUvgsgk/asJTcNa8iVVwoovZU3iEUHvmBa3bzbiP3Y6OMxM1YXsoWOKVmVVaUusGs4ob4pSwjwNy2FemAz9w==",
      "requires": {
        "resize-detector": "^0.3.0",
        "vue-demi": "^0.13.2"
      }
    },
    "vue-router": {
      "version": "4.1.5",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",

 package.json

@@ -16,11 +16,12 @@
    "mockjs": "^1.1.0",
    "pinia": "^2.0.21",
    "vue": "^3.2.41",
    "vue-echarts": "^6.2.3",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@types/mockjs": "^1.0.7",
    "@types/node": "^18.11.2",
    "@types/node": "^18.8.0",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vue/tsconfig": "^0.1.3",
    "autoprefixer": "^10.4.12",

 src/main.ts

@@ -7,11 +7,13 @@
import '@/assets/css/main.scss'
import '@/assets/css/tailwind.css'

import {registerEcharts} from "@/plugins/echarts"
//不使用mock 请注释掉
import { mockXHR } from "@/mock/index";
mockXHR()

const app = createApp(App)
registerEcharts(app)
app.use(createPinia())
app.use(router)


 src/plugins/echarts.ts

New file
@@ -0,0 +1,28 @@
// vue-echarts

import ECharts from 'vue-echarts'

import { use } from "echarts/core"

import {

    CanvasRenderer

  } from 'echarts/renderers'

  import {

    BarChart,PieChart

  } from 'echarts/charts'

  import {

    GridComponent,

    TitleComponent,

    TooltipComponent,

    LegendComponent,

  } from 'echarts/components'



  use([

    CanvasRenderer,

    BarChart,PieChart,

    GridComponent,

    LegendComponent,

    TooltipComponent,

    TitleComponent,

  ])



  export const registerEcharts= (app:any)=>{

    app.component('v-chart', ECharts)

  }