用echarts 仪表盘修改开发的环形图

最新推荐文章于 2023-07-19 15:01:48 发布

心灵的制造商

最新推荐文章于 2023-07-19 15:01:48 发布

阅读量426

点赞数

分类专栏： javascript 前端文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/djcbpl/article/details/125654975

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

用echarts 仪表盘修改开发的环形图
效果图
在这里插入图片描述

核心代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '50%'],
      startAngle: 90,
      endAngle: -270,
      min: 0,
      max: 100,
      splitNumber: 0,
      itemStyle: {
        color: '#5cc949'
      },
      progress: {
        show: true,
        width: 10
      },
      pointer: {
        show: false
      },
      axisLine: {
        // 设置背景色和宽度
        lineStyle: {
          width: 10,
          color: [[1, '#e3e3e3']]
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        offsetCenter: [0, '0'],
        fontSize: 60,
        formatter: '{value} %',
        color: 'auto'
      },
      data: [
        {
          valueStarting: 20
        }
      ]
    }
  ]
};
setInterval(function () {
  const random = +(Math.random() * 60).toFixed(2);
  myChart.setOption({
    series: [
      {
        data: [
          {
            value: random
          }
        ]
      }
    ]
  });
}, 2000);

option && myChart.setOption(option);