本文已参与「新人创作礼」活动，一起开启掘金创作之路
设计首页
如何显示首页
在设置路由的时候写过，访问根目录不显示我是index，其实解决的方法很简单，将/index设置为时根目录的子目录，/index指向/index/index.vue页面即可.忽略其他路由设置，在router/index.ts修改代码如下
{
path: '/',
redirect: '/index',
component: LayOut,
children: [
{
path: '/index',
component: () => import(/* webpackChunkName: "index" */ '@/views/index/index.vue')
}
]
},
此时访问根目录，就会在右侧显示:我是index
设计全局样式
现在查看首页，发现自动的样式不会占满屏幕，距离顶部是有一点距离的。我们直接在main.ts中设置样式即可，这样就能做到全局设置样式了.注意此处不可以设置为scope，否则在子组件不会生效。main.ts的样式代码如下
<style>
* {
margin: 0;
width: 100%;
}
</style>
集成echarts
在搜素网站中搜索vue集成echarts，一般会搜索出很多使用vue2集成echart的文章，并且使用的还是webpackage打包，具有一定的时效性。说一下一些遇到的坑和注意事项吧。
eharts官网地址
https://echarts.apache.org/zh/index.html
示例代码
这里以我的设计的首页代码为例（原谅我写css不是很美观）先贴出代码
<template>
<div class="top-count">
<el-row :span="24">
<el-col :span="8">
<el-card class="box-card">
<template #header>
<div class="card-header">¥ 126,560</div>
</template>
<div class="card-content">日销售额￥12,423</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card">
<template #header>
<div class="card-header">8,846</div>
</template>
<div class="card-content">日访问量1,234</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card">
<template #header>
<div class="card-header">6560</div>
</template>
<div class="card-content">转化率60%</div>
</el-card>
</el-col>
</el-row>
</div>
<div class="sell-count">
<el-row>
<el-col>
<el-card class="box-card">
<div class="card-content">
<div id="chart" style="width: 800px; height: 500px"></div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script lang="ts" setup>
// //引入基本模板
import { onMounted, ref } from 'vue'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
])
const fillChartData = () => {
let dom = document.getElementById('chart') as HTMLElement
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(dom)
// 绘制图表
myChart.setOption({
title: {
text: '访问量统计'
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct',
type: 'bar',
data: [10, 52, 200, 334, 390, 330, 220],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: 'black',
fontSize: 16
}
}
}
}
}
]
})
}
onMounted(() => {
fillChartData()
})
</script>
<style scoped lang="scss">
* {
background: #f0f2f5;
}
.top-count {
height: 170px;
.box-card {
text-align: center;
margin-top: 20px;
margin-left: 20px;
height: 130px;
width: 390px;
background: white;
.card-header {
background-color: white;
height: 40px;
}
.card-content {
height: 10px;
background-color: white;
}
}
}
.sell-count {
text-align: center;
background-color: white;
.box-card {
* {
background-color: white;
}
}
}
</style>
遇到的坑
- 引入到底是使用require or import
先说结论：都能使用，建议使用import。我在搜索出整合的文章时，大部分使用的都是require引入echarts，但是整合到我的项目时编译器会报错，项目启动的时候也提示require不存在。有的文章说vite里没有require这个概念需要下载type/nodes包。我这里直接使用官网的import引入了 - 关于加载时机的问题
我一开始直接未在任何生命周期中调用echarts的init方法，一直报错。查询相关文章才知道echarts必须在dom加载完之后才能找到dom。所以我这里将加载时机放在onMoment里，保证dom肯定加载 - 关于echarts找dom的问题
这里说一下，如果echarts init时没有找到对应的dom，会引起一系列不可预知的错误。我遇到的时左侧目录组件无法加载子级目录。我建议如果有需求要某个报表不展示的话，使用v-show来进行隐藏。 - 关于高度和宽度的的问题 eharts对应的dom元素如果不设置初始化高度和宽度，会无法加载，就算在css中设置div的样式也会失败，建议直接在div中设置样式
结语
欢迎关注我的掘金账号:juejin.cn/user/261290…
欢迎star我的git项目:gitee.com/liangminghu…
下期预告:集成axios访问分布式的后端接口。
