首先附上学习链接:
关于vue 的学习:
/v2/guide/
关于弹性布局:
/w3cnote/flex-grammar.html
关于echarts使用:
/echarts/echarts-tutorial.html
Vue-Cli创建项目:
/zh/guide/creating-a-project.html
建立在几个的基础上, 我们封装一个图表组件,如图:
思路:
首先右边的环状图封装为一个组件CircleChart, 外面的卡片样式封装为一个组件CardItem(包裹其他卡片), 然后组合 CircleChart和CardItem两个组件添加标题和文字信息,最终封装成 百分比 PercentItem组件;
1.创建项目:
命令行
vue create hello-world
后面的步骤按照 (Vue-Cli创建项目) 进行;
2.组件封装:
2.1.卡片组件CardItem:
负责卡片圆角的展示和点击悬停事件;
代码:
CardItem.vue:
<template><div class="card"><slot></slot></div></template><script>export default {props: ["title", "descrip"],};</script><style scoped>.card {width: 100%;height: fit-content;border-radius: 12px;text-align: left;display: inline-block; padding-top: 10px;padding-left: 20px;transition: 300ms;box-shadow: 0px 0px 3px 3px gainsboro;}.card:hover {background: darkgray; }</style>
1. 这里我们保留了一个插槽slot, 用来放置需要在卡片中放置的元素;
2. style 中设置 scoped,表明样式作用域为组件内,这样不会因为class或id冲突与其他组件样式混淆;
2.2.环形图组件CircleChart:
这里简单传入一个百分比,然后显示圆环一个比例percent
代码:
CircleChart.vue:
<template><div class="mychart" ref="chart"></div></template><script>export default {props: ["percent"],mounted() {//我们已经使用命令‘cnpm install echarts --save’ 安装了echarts,可以直接使用require("echarts")来使用var echarts = require("echarts");// 检查echarts实例是否已经创建过了,如果创建过就使用已经有的let myChart = echarts.getInstanceByDom(this.$refs.chart);if (myChart == null) {// 如果不存在，就进行初始化myChart = echarts.init(this.$refs.chart);}var option = {title: {text: this.percent,left: "center",top: "38%",textStyle: {color: "#000000",fontSize: 10,align: "center",},},color: ["#4169E1", "#F5F5F5"],tooltip: {trigger: "item",},legend: {top: "5%",left: "center",},series: [{name: "访问来源",type: "pie",radius: ["40%", "60%"],avoidLabelOverlap: false,label: {show: false,position: "center",},roundCap: true,labelLine: {show: false,},data: [{ value: this.percent }, { value: 1 - this.percent }],},],};myChart.setOption(option);console.log(this.title+"---"+this.percent);},};</script><style>.mychart {width: 80px;height: 80px;}</style>
1. 关于echarts的安装和引入,可以参考文档;
2. echars实例最好项目中使用一个,如果检测到多个echarts实例可能会报错;
3. echarts的设置必须在mounted生命周期方法之后,不然会找不到document元素;
4. echarts寻找节点时,最好使用ref属性,如果用id的话,复用组件会冲突;这里使用 ref="chart", 并用echarts.getInstanceByDom(this.$refs.chart) 来寻找;
5. echarts 的作用节点必须设置宽和高,不然无法显示;
2.3.百分比组件:
组合CardItem和CircleChart组件,显示最终的卡片样式
代码:
PercentItem.vue:
<template><CardItem><p id="title">{{ title }}</p><div class="mcontainer"><div id="divLeft"><p id="pPercentCount"><span id="spanPercentCount">{{ percentCount }}</span> 次</p><p id="pStartCount">用户启动 <span id="spanStartCount">{{ startCount }}</span> 次</p></div><div id="divRight"><CircleChart :percent="percent"></CircleChart></div></div></CardItem></template><script>import CardItem from "./CardItem.vue";import CircleChart from "./myecharts/CircleChart.vue";export default {components: {CardItem,CircleChart,},props: {title: {type: String,default: "崩溃",},percentCount: {type: String,default: "0",},startCount: {type: String,default: "0",},percent: {type: Float32Array,default: "0",},},};</script><style scoped>#title {font-size: 17px;font-weight: bold;padding: 0px;}.mcontainer {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}#spanPercentCount {color: red;}#spanStartCount {color: black;}p {margin: 0px;padding: 0px;}#pPercentCount {color: black;font-size: 20px;font-weight: bold;}#pStartCount {color: darkgray;font-size: 12px;font-weight: bold;margin-top: 8px;}#divLeft {text-align: left;}#divRight {width: 100px;height: 100%;margin-left: 15px;display: flex;justify-content: center;}</style>
1. <CircleChart :percent="percent"></CircleChart> 其中 :percent是v-bind:percent的缩写, 这样写之后表明后面的“”中的字符串不再是常量,而是变量;这个percent是PercentItem传给子组件CircleChart的;
3.使用组件:
DashBoard.vue:
<template><!-- 崩溃率&&卡顿率 --><div class="container"><div class="percentItem"><PercentItemtitle="崩溃率":percentCount="crashCount":startCount="crashStartCount":percent="crashPercent"></PercentItem></div><div class="percentItem"><PercentItemtitle="卡顿率":percentCount="anrCount":startCount="anrStartCount":percent="anrPercent"></PercentItem></div></div></template><script>import PercentItem from "../components/PercentItem.vue";export default {components: {PercentItem,},data: function () {return {crashPercent: 0.58,crashCount: 888,crashStartCount: 12345789,anrPercent: 0.65,anrCount: 565,anrStartCount: 456789156,};},};</script><style>.container {display: flex;flex-direction: row;}.percentItem {width: 250px;margin-left: 20px;margin-right: 20px;}</style>
这样复用组件展示页面就好了:
