使用Vue封装图表组件

首先附上学习链接:

关于vue 的学习:

https://cn.vuejs.org/v2/guide/

关于弹性布局:

https://www.runoob.com/w3cnote/flex-grammar.html

关于echarts使用:

https://www.runoob.com/echarts/echarts-tutorial.html

Vue-Cli创建项目:

https://cli.vuejs.org/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">
        <PercentItem
          title="崩溃率"
          :percentCount="crashCount"
          :startCount="crashStartCount"
          :percent="crashPercent"
        ></PercentItem>
      </div>
      <div class="percentItem">
        <PercentItem
          title="卡顿率"
          :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>

这样复用组件展示页面就好了: