vue2创建项目工程初始化

包管理工具: pnpm

路由 : vue-router

api请求库: axios

vue.config.js配置

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './', // 设置为相对路径
  configureWebpack: { // 配置别名
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  }
})

src/router/index.js 路由规则

import Vue from 'vue'
import Router from 'vue-router'
import HomePage from '@/views/HomePage.vue'
import DevicePage from '@/views/DevicePage.vue'
import MarketingPage from '@/views/MarketingPage.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            name: 'home',
            component: HomePage
        },
        {
            path: '/device',
            name: 'Device',
            component: DevicePage
        },
        {
            path: '/marketing',
            name: 'Marketing',
            component: MarketingPage
        }
    ]
})

加载echarts的时候,需要用

<template>
    <div class="circular-ring">
        <div class="title">{{ title }}</div>
        <div ref="chart" class="chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'CircularRing',
    props: {
        title: {
            type: String,
            default: ''
        },
        // 用于自定义颜色、数据等
        color: {
            type: String,
            default: '#5470C6'
        }
    },
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chart = echarts.init(this.$refs.chart)
            const option = {
                series: [
                    {
                        type: 'pie',
                        radius: ['70%', '90%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false
                        },
                        data: [
                            { value: 60, name: '已用' },
                            { value: 40, name: '剩余', itemStyle: { color: '#e0e0e0' } }
                        ],
                        itemStyle: {
                            color: this.color
                        }
                    }
                ]
            }
            chart.setOption(option)
        }
    }
}
</script>

<style scoped>
.circular-ring {
    text-align: center;
}

.title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

.chart {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
</style>