水球图组件封装(vue项目中可用)

水球图组件封装

// 一、下载Echarts图表库和相关依赖文件（以下两种安装方式，可以随意选择） // npm npm i echarts@4 npm i echarts-liquidfill@2

<template>
  <div ref="liquidEchart" class="liquidData" />
</template>

<script>
// import echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  name: '',
  props: {
    one: {
      type: Number,
      default: 0
      // required: true
    }
  },
  data() {
    return {
      chartsLiquid: '' // 初始化图表
    }
  },
  mounted() {
    this.initLiquidEchart()
  },
  methods: {
    initLiquidEchart() {
      setTimeout(() => {
        this.chartsLiquid = this.$echarts.init(this.$refs['liquidEchart'])
        // 把配置和数据放这里
        this.chartsLiquid.setOption({
          series: [{
            type: 'liquidFill',
            radius: '90%',
            data: [this.one / 100],
            color: 'rgba(67,209,100,1)',
            label: {
              normal: {
                color: '#000',
                insideColor: 'transparent',
                textStyle: {
                  fontSize: 16,
                  fontWeight: 'bold',
                  fontFamily: 'Microsoft YaHei'
                }
              }
            },
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderColor: 'rgba(67,209,100,1)',
                borderWidth: 2
              }
            },
            backgroundStyle: {
              color: 'rgba(67,209,100,.3)'
            }
          }]

        })
      }, 50)
    }
  }
}

</script>

<style scoped>
.liquidData {
  width: 140px;
  height: 140px;
}
</style>