Echarts封装环形百分比组件，基于vue进行封装

最新推荐文章于 2023-09-02 18:39:36 发布

zyxczyf123

最新推荐文章于 2023-09-02 18:39:36 发布

阅读量1.3k

点赞数

文章标签：前端 html5 html vue.js es6

本文链接：https://blog.youkuaiyun.com/zyxczyf123/article/details/118250021

版权

首先引入Echarts图，在项目中安装或者直接在线引入

封装代码如下：

<template>
  <div id="main" style="width: 600px; height: 400px">
    <span>fdfd</span>
  </div>
</template>
<script>
export default {
  props: {
    number: {
      type: [Number, String],
      default: 0,
    },
  },
  watch: {
    number() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
         graphic: [{　　　　　　　　　　　　　　　　//环形图中间添加文字
                    type: 'text',　　　　　　　　　　　　//通过不同top值可以设置上下显示
                    left: 'center',　　　　　　　　　　
                    top: '48%'