最完整的Vue教程-从零开始编写可视化大屏( 二 ) _Vue

4.3 给3张圆环图赋值，我们可以直接在Percentage.vue中写，但是为了便于重复使用，我们再增加一个子组件：新建一个views文件夹，再在views文件夹下新建一个Man.vue的文件。(import Percentage from '../charts/Percentage')
<template><div class="home"><div class="content_card"><div class="left_card"><div class="left_middle_card"><div class="left_middle_chart_card"><div class="left_middle_left_chart_card"><div class="safe_title_spec">人员信息总览</div><div class="left_middle_left_chart_card_content"><div class="tip"><h3 class="titletip">公司人数</h3><div id="manchart" class="chart_card"><percentage ref="manpercentage" :containerId="'manchart'" :option="manoption"/></div></div><div class="tip"><h3 class="titletip">出勤率</h3><div id="man2chart" class="chart_card"><percentage ref="man2percentage" :containerId="'man2chart'" :option="man2option"/></div></div><div class="tip"><h3 class="titletip">出差人数</h3><div id="man3chart" class="chart_card"><percentage ref="man3percentage" :containerId="'man3chart'" :option="man3option"/></div></div></div></div></div></div></div></div></div></template><script>// @ is an alias to /srcimport Percentage from '../charts/Percentage'export default {name: 'staff',components: {Percentage,},data(){return {manoption:{color:'#45e2f5',series: [{data: [{ name: 'itemA', value: 94}],detail: {formatter: '35人'}}]},man2option:{color:'#b7e8e4',series: [{data: [{ name: 'itemA', value: 50}],detail: {formatter: '{value}%'}}]},man3option:{color:'#7a9ae7',series: [{data: [{ name: 'itemA', value: 17 }],detail: {formatter: '17人'}}]},}},mounted(){this.chartInit()},methods:{chartInit(){this.$refs.manpercentage.initChart(this.manoption)this.$refs.man2percentage.initChart(this.man2option)this.$refs.man3percentage.initChart(this.man3option)},}}</script><style lang="scss" scoped>.home{height: 100%;background-color: #111;padding: 1%;.content_card{width: 100%;height: 95%;display: flex;justify-content: flex-start;// margin-top: 2%;.safe_title_spec{height: 50%;background: url(data:image/png) no-repeat;background-size: contain;color: #fff;font-size: 1.5rem;display: flex;align-items: center;text-indent: 2rem;}div{width: 100%;//height: 100%;// border: 1px solid white;}>div.left_card{width: 60%;height: 100%;.left_middle_card{width: 100%;height:90%;.left_middle_chart_card{height: 80%;display: flex;.tip{.titletip{font-size: 1.5rem;color: #fff;}}.left_middle_left_chart_card{height: 100%;width: 50%;margin-top: 1%;.left_middle_left_chart_card_content{height: 100%;display: flex;.chart_card{height: 150px;width: 180px;}}}}}}}}</style>4.4 配置路由，点击router文件夹-进入index.js，将代码修改成如下：

文章插图

4.5 运行vue，有两种方式：
1）点击pycharm下方的terminal，执行运行命令npm run dev
2）在右上角设置npm运行配置，好处是设置后，以后我们就可以直接点击运行，如下图

文章插图

文章插图

运行结果：

文章插图

点击链接，会自动打开浏览器

文章插图

我们可以看到有个V的标志，我们可以去App.vue文件中，删掉以下的图片内容就可以了

文章插图

删掉这段代码后，不需要重新点击运行，刚打开的浏览器会自动更新结果

文章插图

这个呢要感谢在Man.vue中的以下这段代码，：
mounted(){this.chartInit()},//mounted(){}钩子函数，html加载完成后执行,执行顺序：子组件-父组件总结同学们有没有看晕啊，来回的各文件里一顿操作，其实挺简单的，OF总结下需要编写代码的文件结构。