vue2.x + echarts 5.x 实现环形利用率（有缺陷不能实现小数和分配不均的情况，在此只做记录）

web_Hsir

于 2024-05-07 14:29:23 发布

阅读量187

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44185995/article/details/138531102

版权

<template>
  <div ref="main" class="rate-chart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
   
  methods: {
   
    setOption(totalParts, completedRate, colors = ['#ffc02c', '#ddd']) {
   
      completedRate = Math.max(0, Math.min(1, completedRate / 100))
      let completedParts = completedRate * totalParts
      let remainingParts = totalParts - completedParts
      let eachCompletedPartValue = 100 / totalParts
      let eachRemainingPartValue = (100 - completedParts * eachCompletedPartValue) / remainingParts
      let colorArray = []
      let dataArray = []
      for (let i = 0; i < completedParts; i++) {
   
        colorArray.push(colors[0])
        dataArray.push({
   
          value: eachCompletedPartValue