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>
画完张这样

vue + echarts画圈圈的更多相关文章
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
- 使用echarts画一个类似组织结构图的图表
昨天,写了一篇关于圆环进度条的博客(请移步:Vue/React圆环进度条),已经烦不胜烦,今天又遇到了需要展示类似公司的组织结构图的功能需求,要冒了!!! 这种需求,自己用div+css也是可以实现的 ...
- java动态画圈圈。运用多线程,绘图
总结:只是意外的收获吧.之前一篇是老师教的,一个点,从底层开始升起,到鼠标按下的地方开始画圈圈, 现在改变了一下,因为点上升的一个循环和画圈的循环是分开的 现在让点点自己跑,并且边跑边画圈.而且在fo ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- vue echarts 给双饼图添加点击事件
在用 echarts 画旭双饼图( https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest )的时候,经常会伴随着点击事件 如果想要在 ...
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
- vue中使用echarts画饼状图
echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...
- vue用echarts 画3d地球 且画线
页面效果如下: 项目结构如下: 引入的包 "dependencies": { "core-js": "^3.3.2", "regi ...
随机推荐
- Windows 上用IntelliJ Idea调试百度大数据分析框架Apache Doris FE
A. 环境准备 1. 安装jdk1.8+, Intelij IDEA 2. linux上编译好fe前端代码,主要目的是获取自动生成的代码,加入到前段工程里面去用于在idea中编译fe工程.具体编译请参 ...
- 8 ways to improve ASP.NET Web API performance
ASP.NET Web API is a great piece of technology. Writing Web API is so easy that many developers don’ ...
- 给iOS开发新手送点福利,简述UIControl事件的用法
UIControl事件 1.UIControlEventTouchDown 单点触摸按下事件:用户点触屏幕,或者又有新手指落下的时候. 2.UIControlEventTouchDownRepeat ...
- SpringBoot入门(2)
一.上一篇 上一篇最后说到,可以把启动类放到非上级目录“@Componentscan这个注解后面指定扫描的包名(value=“com.zbb”)”,这里的value是一个数组,我们可以写多个目录,进行 ...
- 合并SCVMM虚拟机的差异磁盘,并删除那些难以删除的Checkpoints(Shapshots)
使用Microsoft Data Protection Manager(DPM)有时会造成虚拟机的动态和固定磁盘变成差异磁盘,这个应该与DPM进行差异备份有关,未知原因造成DPM差异备份后无法复原原来 ...
- Grapher - Change how graphs look
[Change how graphs look] Pan and zoom the graph 工具条如下: Change the type of graph 开场的Graph Template在Me ...
- java关于密码的加密解密
密码的加密方法有多种,常见的为Aes.Md5 Aes加密,可逆. 其中,Md5加密是采用了散列算法,也就是哈希算法,可以进行多次散列加密.Md5加密是不可逆的,无法解密. MD5是不可逆的单向加密方式 ...
- pyqt5 sip 段错误问题
在我装labelImg工具时,装了pyqt5,而后发现缺少sip模块,又pip安装上后,启动labelImg,报段错误. 经查资料,很容易发现,是pyqt5与sip版本不匹配造成的,具体缘由,可参看: ...
- jQuery的event事件
1.冒泡和默认行为 <div class="aa"> <div class="bb"> <div class="cc&q ...
- java替换特殊字符串
开始想到String.replaceFirst(regex, replacement)和String.replaceAll(regex, replacement); 但特殊字符没替换成功. 用法:St ...