带字圆环的vue组件

<template>
  <div class="my-echarts">
    <div :class="dataList.length>0 ? 'my-echarts-div':''" :id="id" v-if="dataList.length" @focus="canvasFocus()"
         @blur="canvasBlur()"></div>
    <div v-else class="no-data-box">
      <c-no-data class="my-echarts-div" title="数据抓取中，暂无数据"></c-no-data>
    </div>
  </div>
</template>
<script>
import EChartss from 'echarts'
import CNoData from '@/components/frontZone/CNoData'
import {numToMyriad} from '@/utils/tools'

export default {
  components: {
    CNoData
  },
  data () {
    return {
      options: {}, // 设置
      id: `echart${Math.ceil(Math.random() * 1000)}`,
      colorObj: { // 表的颜色
        item: this.item,
        area: this.area
      }
    }
  },
  props: {
    dataList: { // 数据源 纵坐标 数组
      type: Array, // 数组类型，也可以是Object
      default: () => [0, 1, 2, 3, 4, 5, 67]
    },
    item: { //  表的颜色
      type: String,
      default: '#724CFE'
    },
    color: {
      type: Array,
      default: () => ['#cabffe', '#efefef']
    },
    text: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: 'name'
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        if (this.dataList.length > 0) {
          this.chart = EChartss.init(document.getElementById(this.id))
          this.setChart()
        }
      })
    },
    canvasFocus () {
      this.options.dataZoom[0].zoomOnMouseWheel = true
      this.chart.setOption(this.options)
    },
    canvasBlur () {
      this.options.dataZoom[0].zoomOnMouseWheel = false
      this.chart.setOption(this.options)
    },
    /*
            * 需要数据原和名字
            * */
    setChart () {
      let max = _.max(this.dataList)
      let min = _.min(this.dataList)
      let delta = max - min
      let colorObj = this.colorObj
      let nightRange = [[{xAxis: 0}, {xAxis: 0}]]
      let dataList
      dataList = this.rowList
      let data = this.dataList
      this.options = this.getCommonOptions({
        dataList, // 横坐标
        delta,
        isScale: delta > 10,
        seriesName: this.name,
        nightRange,
        colorObj,
        data
      })
      this.$nextTick(() => {
        this.chart.setOption(this.options)
      })
    },
    getCommonOptions (obj) {
      return {
        legend: { // 配置图例
          itemWidth: 5, // 图例大小  我这里用的是圆
          itemGap: 30, // 图例之间的间隔
          orient: 'horizontal', // 布局方式，默认水平布局，另可选vertical
          y: '80%', // 垂直放的位置，可以写top，center，bottom，也可以写px或者百分比。x轴方向同理，默认center
          icon: 'circle', // 图例的形状，选择类型有："circle"（圆形）、"rectangle"（长方形）、"triangle"（三角形）、"diamond"（菱形）、"emptyCircle"（空心圆）、
          show: false,
          selectedMode: true, // 选中哪个图例 false后图例不可点击
          textStyle: {
            fontSize: 14,
            fontFamily: 'Microsoft YaHei'

          }
        },
        color: ['#35dae6', '#7848f4'], // 环形图两部分的颜色
        graphic: [{// 环形图中间添加文字
          type: 'text', // 通过不同top值可以设置上下显示
          left: 'center',
          top: '40%',
          style: {
            text: '赚钱能力(流水)',
            textAlign: 'center',
            fill: '#000', // 文字的颜色
            width: 30,
            height: 40,
            fontSize: 18,
            color: '#4d4f5c',
            fontFamily: 'Microsoft YaHei'
          }
        }, {
          type: 'text',
          left: 'center',
          top: '55%',
          style: {
            text: numToMyriad(this.text),
            textAlign: 'center',
            fill: '#000',
            width: 30,
            height: 40,
            fontSize: 18
          }
        }],
        series: [// 配置数据啥的
          {
            name: '达标率',
            type: 'pie', // 设为饼图
            radius: ['68%', '90%'], // 设置内半径和外半径，形成环状
            minAngle: 5, // 设置最小角度
            startAngle: 90, // 设置起始角度
            clockWise: true, // 默认逆时针
            avoidLabelOverlap: false, // 避免标注重叠
            hoverAnimation: true, // 移入放大
            silent: true,
            center: ['50%', '50%'],
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.dataList
          }
        ]
      }
    }
  },
  watch: {
    dataList: {
      handler (newV, oldV) {
        this.dataList = newV
        this.init()
      },
      deep: true
    },
    rowList: {
      handler (newV, oldV) {
        this.rowList = newV
        this.init()
      },
      deep: true
    }
  }
}
</script>
<style lang="scss">
  .el-loading-mask {
    z-index: 9;
  }

  @media screen and (max-width: 1640px) {
    .no-data {
      padding: 80px 0 40px 0;
    }
  }
</style>
<style lang="scss" scoped>
  @import 'assets/styles/monitor-report.scss';

  .my-echarts-div {
    width: 250px;
    height: 250px;
  }

  .my-echarts {
    width: 250px;
    height: 250px;
    /*padding-bottom: 50px;*/
  }
</style>

带字圆环的vue组件

最后

以上就是明理裙子为你收集整理的带字圆环的vue组件的全部内容，希望文章能够帮你解决带字圆环的vue组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。