echarts百分比实现225度圆弧

最新推荐文章于 2024-05-31 14:42:22 发布

TEA.YE

最新推荐文章于 2024-05-31 14:42:22 发布

阅读量387

点赞数 1

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.csdn.net/qq_57540936/article/details/120070352

版权

本文介绍了如何利用Echarts库来实现一个225度角展示百分比的圆弧效果，主要关注Echarts配置与JavaScript编程技巧。

摘要由CSDN通过智能技术生成

echarts实现圆弧225度百分比

Document

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  
  let current = 50.00;// 当前用量
  let all = 100;// 总量

  // 指定图表的配置项和数据
  var placeHolderStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      color: "rgba(0,0,0,0)",
      borderWidth: 0
    },
    emphasis: {
      color: "rgba(0,0,0,0)",
      borderWidth: 0
    }
  };


  var dataStyle = {
    normal: {
      formatter: '{c}%',
      position: 'center',
      show: true,
      textStyle: {
        fontSize: '25'