【知识分享】Echarts仪表盘封装成组件

封装思路：

1.定义个组件，在里面对仪表盘的代码进行封装

2.将想要动态传入的参数进行抽取

3.在其他页面传入相关的参数，直接展示出图标

具体代码：

1.封装的组件的页面代码

<template>

  <div class="index_card" :style="{ height: chartHeight, width: chartWidth }">

    <Echart :options="options" :id="chartId" class="echarts_bottom"></Echart>

  </div>

</template>

<script lang="ts">

import * as echarts from 'echarts'

export default {

  props: {

    dashboardValue: {

      type: String,

      default: ''

    },

    upperAlarmLimit: {

      type: String,

      default: ''

    },

    chartHeight: {

      type: String,

      default: '180px' // 默认高度为 400px

    },

    chartWidth: {

      type: String,

      default: '193px' // 默认高度为 400px

    },

    lowerAlarmLimit: {

      type: String,

      default: ''

    },

    name: {

      type: String,

      default: '单位'

    },

    ticks: {

      type: Number,

      default: 10

    },

    color: {

      type: String,

      default: '#fff'

    }

  },

  watch: {

    dashboardValue(newCount, oldCount) {

      var demoData = {

        name: this.name,

        value: this.dashboardValue,

        pos: ['50%', '50%']

      }

      this.init(demoData)

    }

  },

  data() {

    return {

      options: {},

      chartId: `chart_${