echart半圆,特殊半圆

一、半圆,如图:

htlm

<div class="charts-content"><echart :option="deviceChart" id="chartsbar"></echart><div class="center"><div>150</div><div>20</div></div><div class="chart-tips row"><div class="left col">已到</div><div class="right col text-right">未到</div></div>
</div>

css

.charts-content{width: 200px;height: 200px!important;margin: auto;position: relative;.center{position: absolute;bottom: 100px;right: 0;left: 0;text-align: center;width: calc(100% - 10px);border-bottom: 2px solid #4c5559;margin: auto;}
}
#chartsbar{width: 100%;height: 100%!important;margin: auto;// background: #eee;
}
#chartsbar ::v-deep *{cursor: default!important;
}
.chart-tips{position: absolute;bottom: 70px;width: 100%;
}

            this.deviceChart = {title: {},grid: {},series: [{name: "一般",type: "pie",//起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。startAngle: 0,hoverAnimation: false,tooltip: {},radius: ["70%", "100%"],labelLine: {normal: {show: false}},itemStyle: { borderColor: '#fff',borderWidth: 10// 配置},data: [{value: 200,//值要为最后两项的总和itemStyle: {normal: {color: "transparent"}}},{value: 150,  itemStyle: {color:"red"},},{value: 50, itemStyle: {normal: {color: "#0C5071"}}}]}]}

二、已过时长占比总时长的展示,如图:

html

<div class="charts-content1"><echart :option="smallCharts" id="timeChartSmall"></echart><echart :option="bigCharts" id="timeChartBig" class="big-click"></echart>
</div>

css

.charts-content1{width: 200px;height: 200px!important;margin: auto;position: relative;
}
#timeChartSmall,#timeChartBig{width: 100%;height: 100%;margin: auto;
}
.big-click{position: absolute;width: calc(100% + 15px) !important;height: calc(100% + 15px) !important;top: -1px;left: -1px;
}

            this.smallCharts = {series: [{type: "pie",radius: ["97%", "100%"],startAngle: 180,animation: true,hoverAnimation:false,//取消鼠标滑过放大效果label: {show: false},data: [{value: 100,itemStyle: {color: "#E99245"}},{value: 100,itemStyle: {color: "transparent"}}]}]};this.bigCharts =  {series: [{type: "pie",radius: ["93%", "100%"],startAngle: 180,animation: true,hoverAnimation:false,//取消鼠标滑过放大效果label: {show: false},data: [{value: 50,itemStyle: {color: "#00ACAB"}},{value: 100,itemStyle: {color: "transparent"}}]}]};

echart半圆,特殊半圆相关推荐

css怎么移动半圆,css3半圆
Document div { margin-bottom: 30px; margin-left: 30px; } /* 上半圆 */ .semi-circle { width: 100px; heig ...
css3 border-radius制作半圆---上下左右半圆
左右半圆 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
html如何把上边角做成椭圆,使用css3的border-radius和border制作半圆、三角、椭圆等各种图形...
自从有了css3,我们可以制作各种各样的图形了,制作圆角也可以不使用图片了,我们可以使用border-radius可以制作圆角,椭圆等图形.下面我们来看一下如何制作这些的(以下例子请在现代高级浏览器浏 ...
css画圆、半圆、椭圆、圆环
css画圆在css中利用border-radius可以画出我们想要的圆 border-radius属性可以设置盒子四边的圆弧.从上左,上右,下右,下左顺时针依次设置四个属性也可以单独设置一个方向 ...
EChart案例-半圆轮盘百分比图
先看效果图: 参数配置option: option = {title: {text: '98%',textStyle: {color: '#f97060',fontSize: 24},subtext: ...
一起来学习android自定义控件3——边缘凹凸的View
前言最近做项目的时候遇到一个卡劵的效果,由于自己觉得用图片来做的话可以会出现适配效果不好,再加上自己自定义view方面的知识比较薄弱,所以想试试用自定义View来实现.先看设计图效果实现分析上面 ...
android自定义布局实现优惠券效果
最近需要实现一个凹凸效果的拟物化优惠券效果,我一看,本来想用.9图片做背景实现的,虽说图片做背景实现省事儿方便,但是能用代码实现最好不过了,最终我还是选择了用代码来实现,于是有了下文. 最终效果图 d ...
应用数学软件测试题,高等数学第六章定积分应用综合测试题
<高等数学第六章定积分应用综合测试题>由会员分享,可在线阅读,更多相关<高等数学第六章定积分应用综合测试题(9页珍藏版)>请在人人文库网上搜索. 1.第六章定积分应用测试题A ...
Android实现边缘凹凸的View
转载最近做项目的时候遇到一个卡劵的效果,由于自己觉得用图片来做的话可以会出现适配效果不好,再加上自己自定义view方面的知识比较薄弱,所以想试试用自定义View来实现.但是由于自己知识点薄弱,一开始 ...
android 中间凹背景_Android实现边缘凹凸的View
转载最近做项目的时候遇到一个卡劵的效果,由于自己觉得用图片来做的话可以会出现适配效果不好,再加上自己自定义view方面的知识比较薄弱,所以想试试用自定义View来实现.但是由于自己知识点薄弱,一开始 ...

echart半圆,特殊半圆

echart半圆,特殊半圆相关推荐

最新文章

热门文章