当前位置: 首页 > news >正文

vue + echarts画圈圈

  
  <div class="chart-bar-left" id= "chartbar-left" style="margin-top:1%;">
      v-chart :options="optionPieleft" class="chart-pie-left"/>
    </div>
     
  <script>

      //添加引用
    import ECharts from "vue-echarts";
    import "echarts/lib/component/polar";
    // 引入提示框和标题组件
    import "echarts/lib/component/tooltip";
    import "echarts/lib/component/title";
    //引用legend组件
    import "echarts/lib/component/legend";
              //引入饼图
    import "echarts/lib/chart/pie";


 var placeHolderStyle = {
      ormal: {
        color: 'rgba(44,59,70,1)', // 未完成的圆环的颜色
        label: {
        show: false
        },
      labelLine: {
      show: false
          }
        },
      emphasis: {
           color: 'rgba(44,59,70,1)' // 未完成的圆环的颜色
        }
    };

  var linear_color_left = {
    type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
    colorStops: [{
    offset: 0,
    color: '#0986e8'
    }, {
    offset: 1,
    color: '#4cd8f4'
    }]
    };

export default {
        components: {
        "v-chart": ECharts
      },
    name: 'Dashboard',
data(){
return{
optionPie : {
    backgroundColor: '#FFFFFF',
    title: {
        text: "冷运行天数",
        textStyle: {
            color: '#050f58',
            fontSize: 12,
         
        },
        left: 'center',
      top:'98'
    },
    series: [{
            //最里圈圆环
              type: 'pie',
              radius: ['75%', '75%'],
              silent: true,
              itemStyle: {
                  normal: {
                      labelLine: {
                          show: false
                      }
                  }
              },
              data: [{
                  value: 1,
                  itemStyle: {
                      normal: {
                          color: '#050f58',
                          borderColor: '#162abb',
                          //borderWidth: 1,
                          //shadowBlur: 5,
                          shadowColor: 'rgba(21,41,185,.75)'
                      }
                  }
              }]
          },{
              type: 'pie',
              radius: ['89%', '91%'],
              silent: false,
              label: {
                  normal: {
                      show: false,
                  }
              },
              data: [{
                  value: 1,
                  itemStyle: {
                      normal: {
                          color: '#050f58',
                          barBorderRadius: 30,
                          // shadowBlur: 50,
                          shadowColor: 'rgba(21,41,185,.75)'
                      }
                  }
              }]
          }, {
              name: '占比',
              type: 'pie',
              radius: ['89%', '91%'],
              hoverAnimation: false,
              data: [{
                  value: 70, //已完成
                  show: false,
                  label: {
                      normal: {
                          formatter: '{d}',
                      
                          position: 'center',
                          show: true,
                          textStyle: {
                              fontSize: '45',
                              fontWeight: '200',
                              color: '#3dd4de',
                              margin:'00',
                          }
                      }
                  },
                 

                  itemStyle: {
                      normal: {
                          color: linear_color_left,
                          shadowColor: '#3dd4de',
                          shadowBlur: 2,
                          borderWidth: 2,
                          borderColor:linear_color_left
                      }
                  }
              }, {
                  value: 30,//剩余
                  show: false,
                  itemStyle: {
                      normal: {
                          barBorderRadius: 50,
                          color: 'rgba(10,9,86,0)', // 未完成的圆环的颜色
                          label: {
                              show: false
                          },
                          labelLine: {
                              show: false
                          }
                      },   
                  }
              }]

          }]
      },
  





      }
    }
  }  
</script>

画完张这样

 

转载于:https://www.cnblogs.com/provedl/p/10518206.html

相关文章:

  • 微软职位内部推荐-SENIOR SDE
  • 23种设计模式之抽象工厂
  • Prototype 原型模式
  • web应用与http协议
  • PDF格式文件如何编辑,怎样修改PDF背景颜色
  • js confirm函数
  • Bootstrap学习:Bootstrap 环境安装
  • Dubbo Mesh 在闲鱼生产环境中的落地实践
  • acl 之 xml 流解析器
  • Linaria 1.0正式发布:一个零运行时CSS-in-JS库
  • 从后端到前端的转变:如何选择框架?
  • Pascal's Triangle LeetCode
  • php常用字符串函数
  • ORACLE--分区表数据清理
  • 那些到了 30 岁的技术人,后来都去哪了?
  • “寒冬”下的金三银四跳槽季来了,帮你客观分析一下局面
  • Akka系列(七):Actor持久化之Akka persistence
  • C++类的相互关联
  • CentOS 7 防火墙操作
  • CSS实用技巧
  • Javascript设计模式学习之Observer(观察者)模式
  • jquery cookie
  • js递归,无限分级树形折叠菜单
  • js正则,这点儿就够用了
  • Laravel 实践之路: 数据库迁移与数据填充
  • Python_网络编程
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 回顾2016
  • 排序算法之--选择排序
  • 前端之React实战:创建跨平台的项目架构
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • #我与Java虚拟机的故事#连载08:书读百遍其义自见
  • (173)FPGA约束:单周期时序分析或默认时序分析
  • (2)STL算法之元素计数
  • (C++20) consteval立即函数
  • (Matlab)遗传算法优化的BP神经网络实现回归预测
  • (zt)基于Facebook和Flash平台的应用架构解析
  • (二)学习JVM —— 垃圾回收机制
  • (考研湖科大教书匠计算机网络)第一章概述-第五节1:计算机网络体系结构之分层思想和举例
  • (理论篇)httpmoudle和httphandler一览
  • (算法设计与分析)第一章算法概述-习题
  • .Net Core 中间件验签
  • .Net程序猿乐Android发展---(10)框架布局FrameLayout
  • .NET简谈设计模式之(单件模式)
  • .net中的Queue和Stack
  • .one4-V-XXXXXXXX勒索病毒数据怎么处理|数据解密恢复
  • @zabbix数据库历史与趋势数据占用优化(mysql存储查询)
  • [ 数据结构 - C++] AVL树原理及实现
  • [ARC066F]Contest with Drinks Hard
  • [AX]AX2012开发新特性-禁止表或者表字段
  • [C#]winform部署yolov9的onnx模型
  • [elastic 8.x]java客户端连接elasticsearch与操作索引与文档
  • [EMWIN]FRAMEWIN 与 WINDOW 的使用注意
  • [Git].gitignore失效的原因