1牍帚、vite生成項目
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
2晶衷、element-plus
開發(fā)項目嗽元，首先要挑選一個 UI 組件庫。目前市面上支持 Vue 3 的組件庫并不多掠兄，Element UI 不負眾望已經完成支持了像云。Element Plus 是餓了么 Element UI 團隊推出的適配了 Vue 3 的全新版本，新增了很多實用組件蚂夕，體驗非常好迅诬。
(1)、安裝
npm install element-plus -S
(2)双抽、引入
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
（3）百框、使用小技巧
修改卡片內邊距（elment-card）
<el-card shadow="hover" :body-style="{padding:'20px'}">
<total-sales />
</el-card>
3、配置vue3的路由
（1）牍汹、安裝
npm install vue-router@next --save
（2）、配置路由
新建頁面
//view/welcom.vue
<template>
welcom
</template>
新建index.js
//router/index.js
import {createRouter, createWebHashHistory} from 'vue-router';
// 1. 定義路由組件柬泽， 注意慎菲，這里一定要使用 文件的全名（包含文件后綴名）
import welcome from "../view/welcome.vue";
const routes = [
{ path: "/", redirect: '/welcome' },
{ path: "/welcome", component: welcome }
]
// Vue-router新版本中，需要使用createRouter來創(chuàng)建路由
export default createRouter({
// 指定路由的模式,此處使用的是hash模式
history: createWebHashHistory(),
routes // short for `routes: routes`
})
main.js
import { createApp } from 'vue'
import router from './router/index'
import App from './App.vue'
createApp(App).use(router).mount('#app')
App.vue
<template>
<router-view></router-view>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<style>
html,body,#app {
padding:0;
margin:0;
width:100%;
height:100%;
background-color: #eee;
}
</style>
4锨并、vite組件傳參
（1）露该、props(defineProps)
注冊屬性
<script setup>
import { defineProps } from 'vue'
let props = defineProps({
title:String,
value:String
})
</script>
使用
<div class="title">{{props.title}}</div>
5、插槽
新語法v-slot
<template v-slot>
<div class="compare">6</div>
</template>
<template v-slot:footer>
<span>昨日銷售額</span>
<span class="money">￥ 30,000,000</span>
</template>
具名插槽就使用v-slot綁定第煮，默認插槽就空寫一個v-slot
6解幼、echarts安裝
（1）抑党、安裝
npm install --save echarts
（2）、使用
//引入
import * as echarts from 'echarts'
...
//初始化
var myChart = echarts.init(document.getElementById('main'))
//設置參數
myChart.setOption({
xAxis:{},
yAxis:{},
series:[]
})
//...
7撵摆、組件封裝層級
為了更好的維護與開發(fā)底靠，展示一個組件封裝層級
組件封裝效果圖
組件層級
TopView為盛放這四個組件的容器組件：
<template>
<div class="top_view" >
<el-row :gutter="20">
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'20px'}">
<total-sales />
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<total-orders />
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<total-users />
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<today-users />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup>
import totalSales from '../TotalSales/index.vue'
import todayUsers from '../TodayUsers/index.vue'
import totalUsers from '../TotalUsers/index.vue'
import totalOrders from '../TotalOrders/index.vue'
</script>
totalSales,todayUsers,totalUsers,totalOrders為圖中的四個組件，但這四個組件有想類似的結構特铝，將結構抽離出來封裝為commandCard組件：
<template>
<div class="common-card">
<div class="title">{{props.title}}</div>
<div class="value">{{props.value}}</div>
<div class="chart">
<slot></slot>
</div>
<div class="line"></div>
<div class="total">
<slot name="footer">
</slot>
</div>
</div>
</template>
<script setup>
import { defineProps } from 'vue'
let props = defineProps({
title:String,
value:String
})
</script>
<style scope>
.title{
font-size:12px;
color:#999;
}
.value{
font-size:25px;
color:#000;
margin-top:5px;
letter-spacing:1px;
}
.chart {
height:50px;
}
.line{
margin:10px 0;
border-top:1px solid #eee;
}
.totle{
color:#eee;
font-size:12px;
}
</style>
再以totalSales組件為例展示commandCard的用法
<template>
<common-card title="累計銷售額" value="￥ 32,039,165">
<template v-slot>
<div class="compare-wrapper">
<div class="compare">
<span>日同比</span><span class="emphasis">7.33%</span><span class="increase"></span>
</div>
<div class="compare">
<span>月同比</span><span class="emphasis">38.79%</span><span class="decrease"></span>
</div>
</div>
</template>
<template v-slot:footer>
<span>昨日銷售額</span>
<span class="emphasis">￥ 30,000,000</span>
</template>
</common-card>
</template>
<script setup>
import commonCard from '../CommonCard/index.vue'
</script>
<style scope>
.compare-wrapper{
height:100%;
display:flex;
flex-direction: column;
align-items: center;
}
.compare{
width:100%;
font-size:12px;
margin-top:3px;
display:flex;
}
.increase{
display:inline-block;
width:0;
height:0;
border-width:3px;
border-color:transparent transparent red transparent;
border-style:solid;
margin:3px 0 0 5px;
}
.decrease{
display:inline-block;
width:0;
height:0;
border-width:3px;
border-color: green transparent transparent transparent;
border-style:solid;
margin:7px 0 0 5px;
}
</style>
<style>
.emphasis{
margin-left:5px;
color:#333;
letter-spacing: 1px;
font-weight: 700;
}
.increase{
display:inline-block;
width:0;
height:0;
border-width:3px;
border-color:transparent transparent red transparent;
border-style:solid;
margin:3px 0 0 5px;
}
.decrease{
display:inline-block;
width:0;
height:0;
border-width:3px;
border-color: green transparent transparent transparent;
border-style:solid;
margin:7px 0 0 5px;
}
</style>
8暑中、餅圖指示線問題
版本前提
"dependencies": {
"echarts": "^5.1.2",
"element-plus": "^1.0.2-beta.69",
"v-charts": "^1.19.0",
"vue": "^3.0.5",
"vue-echarts": "^6.0.0",
"vue-router": "^4.0.10"
}
問題描述：
餅圖設置label后，指示線消失
指示線消失
代碼：
series:[{
type:'pie',
data:mockData,
radius: [0, 100],
center: ["50%", "50%"],
itemStyle: {
normal: {
labelLine: {
normal: {
show:true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 50,
length2: 100,
}
},
label:{
show:true,
position:'outter',
formatter:function(params){
return params.data.legendname
}
}
}
}
}]
問題解決
將position字段去掉后鲫剿，指示線重新顯示
指示線復現
代碼：
series:[{
type:'pie',
data:mockData,
radius: [0, 100],
center: ["50%", "50%"],
itemStyle: {
normal: {
labelLine: {
normal: {
show:true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 50,
length2: 100,
}
},
label:{
show:true,
formatter:function(params){
return params.data.legendname
}
}
}
}
}]
