<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>

画完张这样

vue + echarts画圈圈的更多相关文章

  1. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  2. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  3. 使用echarts画一个类似组织结构图的图表

    昨天,写了一篇关于圆环进度条的博客(请移步:Vue/React圆环进度条),已经烦不胜烦,今天又遇到了需要展示类似公司的组织结构图的功能需求,要冒了!!! 这种需求,自己用div+css也是可以实现的 ...

  4. java动态画圈圈。运用多线程,绘图

    总结:只是意外的收获吧.之前一篇是老师教的,一个点,从底层开始升起,到鼠标按下的地方开始画圈圈, 现在改变了一下,因为点上升的一个循环和画圈的循环是分开的 现在让点点自己跑,并且边跑边画圈.而且在fo ...

  5. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  6. vue echarts 给双饼图添加点击事件

    在用 echarts 画旭双饼图( https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest )的时候,经常会伴随着点击事件 如果想要在 ...

  7. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  8. vue中使用echarts画饼状图

    echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...

  9. vue用echarts 画3d地球 且画线

    页面效果如下: 项目结构如下: 引入的包 "dependencies": { "core-js": "^3.3.2", "regi ...

随机推荐

  1. MySQL 5.7 免安装版配置

      MySQL5.7免安装版配置 Mysql是一个比较流行且很好用的一款数据库软件,如下记录了我学习总结的mysql免安装版的配置经验. 一. 软件下载 5.7 32位https://dev.mysq ...

  2. 2017 年 PHP 程序员未来路在何方?

    PHP 从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js . GO . Python 不断地在挑战 PHP 的地位.这些技术的推 ...

  3. sonar 的使用

    1.依赖: <dependency> <groupId>org.codehaus.mojo</groupId> <artifactId>sonar-ma ...

  4. 「小程序JAVA实战」小程序的横向视频和页面拦截(59)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudehengxiangshipinheyemianlanjie58/ ...

  5. 5 MySQL--表--数据类型

    存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考: http://www.runoob.com/mysql/mysql-data-type ...

  6. window10上安装python+CUDA+CuDNN+TensorFlow

    软件 版本 Window10 X64 python 3.6.4(64位) CUDA CUDA Toolkit 9.0 (Sept 2017) CuDNN cuDNN v7.0.5 (Dec 5, 20 ...

  7. asp.net webapi 参数绑定总结

    首先必须得更正下自己一直以来对于get请求和post请求理解的一个误区:get请求只能通过url传参,post请求只能通过body传参. 其实上面的理解是错误的,翻阅了不少资料及具体实践,正确理解应该 ...

  8. 迷你MVVM框架 avalonjs 0.98发布

    在本版本中,avalon侧重于对组件开发的支持,可用控件达到12个,末来将大力投入对GRID,TREE等重型UI的开发中. 添加ms-widget绑定,废弃ms-ui绑定 为ms-include添加跨 ...

  9. EF CodeFirst生成数据库到Sqlserver中

    EF CodeFirst简单实例这篇文章介绍了如何用EF去快速生成数据库.但是这个并没有生成到sqlserver中,总觉得不爽.下面就来讲一下,如何将数据库生成到sqlserver中. 按照EF Co ...

  10. linux 同步IO: sync、fsync与fdatasync

    [linux 同步IO: sync.fsync与fdatasync] 传统的UNIX实现在内核中设有缓冲区高速缓存或页面高速缓存,大多数磁盘I/O都通过缓冲进行.当将数据写入文件时,内核通常先将该数据 ...