【知识分享】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_${Math.random().toString(36).substr(2, 9)}`

    }

  },

  mounted() {

    var demoData = {

      name: this.name,

      value: this.dashboardValue,

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

    }

    this.init(demoData)

  },

  methods: {

    init(demoData) {

      let chart = echarts.init(document.getElementById(this.chartId))

      this.options = {

        series: [

          // 外侧光线

          {

            name: demoData.name,

            type: 'gauge',

            center: demoData.pos,

            radius: '100%',

            startAngle: 225,

            endAngle: -45,

            min: 0,

            max: 5,

            axisLine: {

              show: true,

              lineStyle: {

                width: 2,

                color: [

                  [

                    demoData.value / 5, //改

                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [

                      {

                        offset: 0,

                        color: 'rgba(255,255,255,0)'

                      },

                      {

                        offset: 1,

                        color: '#0CD7F0'

                      }

                    ])

                  ],

                  [1, 'rgba(255,255,255,0)']

                ]

              }

            },

            axisTick: {

              show: 0

            },

            splitLine: {

              show: 0

            },

            axisLabel: {

              show: 0

            },

            pointer: {

              show: 0

            },

            detail: {

              show: 0

            },

            data: [

              {

                value: demoData.value

              }

            ]

          },

          // 内圆

          {

            name: demoData.name,

            type: 'gauge',

            center: demoData.pos,

            radius: '84%',

            min: 0,

            max: this.ticks,

            splitNumber: 5,

            center: ['50%', '50%'],

            axisLine: {

              // 坐标轴线

              lineStyle: {

                color: [

                  [

                    this.lowerAlarmLimit / this.ticks, //外层光圈 0.2

                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [

                      {

                        offset: 0,

                        color: '#AE3F3F' // 渐变起始颜色

                      },

                      {

                        offset: 1,

                        color: '#FF6666' // 渐变结束颜色

                      }

                    ])

                  ],

                  [

                    this.upperAlarmLimit / this.ticks, //0.4

                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [

                      {

                        offset: 0,

                        color: 'rgba(42, 147, 215,0.6)' // 渐变起始颜色

                      },

                      {

                        offset: 1,

                        color: '#0CD7F0' // 渐变结束颜色

                      }

                    ])

                  ],

                  [

                    1,

                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [

                      {

                        offset: 0,

                        color: '#AE3F3F' // 渐变起始颜色

                      },

                      {

                        offset: 1,

                        color: '#FF6666' // 渐变结束颜色

                      }

                    ])

                  ]

                ],

                width: 8,

                shadowBlur: 10

              }

            },

            axisLabel: {

              fontSize: '10', // 坐标轴小标记

              fontWeight: 'bolder',

              color: 'rgb(113, 123, 131)',

              shadowBlur: 10,

              offsetCenter: [0, '80%'] // x, y，单位px

            },

            axisTick: {

              distance: 3,

              splitNumber: 4,

              // 坐标轴小标记

              length: 2 // 属性length控制线长

            },

            splitLine: {

              distance: -6,

              // 分隔线

              length: 8, // 属性length控制线长

              lineStyle: {

                // 属性lineStyle（详见lineStyle）控制线条样式

                width: 1

                // color: "#fff",

                // shadowColor: "#fff", //默认透明

                // shadowBlur: 10,

              }

            },

            pointer: {

              itemStyle: {

                color: 'auto' // 设置为 auto，颜色会随着仪表盘渐变色自动调整

              },

              width: 3, //指针的宽度

              length: '60%', //指针长度，按照半圆半径的百分比      // 分隔线

              shadowColor: '#fff', //默认透明

              shadowBlur: 5

            },

            title: {

              offsetCenter: [0, '90%'], // x, y，单位px

              textStyle: {

                // 其余属性默认使用全局文本样式，详见TEXTSTYLE

                fontWeight: 'bolder',

                fontSize: 14,

                fontStyle: 'italic',

                color: this.color,

                shadowBlur: 5

              }

            },

            detail: {

              // backgroundColor: 'rgba(30,144,255,0.8)',

              // borderWidth: 1,

              borderColor: '#fff',

              // shadowColor: "#fff", //默认透明

              shadowBlur: 5,

              offsetCenter: [0, '50%'], // x, y，单位px

              textStyle: {

                // 其余属性默认使用全局文本样式，详见TEXTSTYLE

                fontWeight: 'bolder',

                color: this.color,

                fontSize: 24

              }

            },

            data: [

              {

                value: demoData.value,

                name: demoData.name

              }

            ]

          }

        ]

      }

      chart.setOption(this.options)

    }

  }

}

</script>

2.组件使用

 <DashBoard

    :dashboardValue="10"

    :upperAlarmLimit="7"

    :lowerAlarmLimit="30"

    :ticks="40"

    :name="Mpa"

    :color="'#9eaaba'"

  />

注意：具体时候时候可以将动态从数据库查询到的数据结果替换到里面去