echarts圆环百分比图示

一、效果图

二、代码
html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="pieDiagram" class="floatLeft" style="height:400px;width:400px;"></div><script src="js/jquery/jquery-1.11.0.min.js" type="text/javascript"></script><script src="js/echarts/echarts.min.js" type="text/javascript"></script><script src="js/PercentPie.js"></script><script type="text/javascript">var option1 = {value:20,//百分比,必填name:'及格率',//必填title:'学习成绩',backgroundColor:null,color:['#38a8da','#d4effa'],fontSize:16,domEle:document.getElementById("pieDiagram")//必填},percentPie1 = new PercentPie(option1);percentPie1.init();</script></body>
</html>

PercentPie.js

function PercentPie(option){this.backgroundColor = option.backgroundColor||'#fff';this.color           = option.color||['#38a8da','#d4effa'];this.fontSize        = option.fontSize||12;this.domEle          = option.domEle;this.value           = option.value;this.name            = option.name;this.title           = option.title;
}PercentPie.prototype.init = function(){var _that = this;var option = {backgroundColor:_that.backgroundColor,color:_that.color,title: {text: _that.title,top:'3%',left:'1%',textStyle:{color: '#333',fontStyle: 'normal',fontWeight: 'normal',fontFamily: 'sans-serif',fontSize: 16,}},series: [{name: '来源',type: 'pie',radius: ['60%', '75%'],avoidLabelOverlap: false,hoverAnimation:false,label: {normal: {show: false,position: 'center',textStyle: {fontSize: _that.fontSize,fontWeight: 'bold'},formatter:'{b}\n{c}%'}},data: [{value: _that.value,name: _that.name,label:{normal:{show:true}}},{value: 100-_that.value,name: ''}]}]};echarts.init(_that.domEle).setOption(option);
};

(function () {(function () {('pre.prettyprint code').each(function () { var lines = (this).text().split(′\n′).length;var(this).text().split('\n').length;var numbering = $('

').addClass('pre-numbering').hide(); (this).addClass(′has−numbering′).parent().append((this).addClass('has-numbering').parent().append(numbering); for (i = 1; i

echarts圆环百分比图示相关推荐

java如何画百分比圆环_canvas绘制旋转的圆环百分比进度条
作者:依然 | 时间:2015-05-29 | 阅读:122 canvas绘制旋转的圆环百分比进度条从上一篇的文章使用HTML5 Canvas arc()绘制圆形/圆环我们了解到了怎么使用ca ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
Vue实战--动态圆环百分比进度条
最近在开发小程序的时候,碰到一个实现圆环百分比进度条的需求,类似如下设计图: 小白的我感觉实现起来有难度,于是上百度看看别人是怎么做的,结果没找到一个满意的,要不是静态的实现,就是需要用到比较多的 ...
Echarts饼图百分比算法利用Java实现
问题:在开发中有这样的问题,就是需要在其他地方展示百分比,但是自己计算的百分比通过四舍五入后,与饼图里面的百分比不一致的问题,要想解决这个问题,那么必须要使用echarts源码中的计算方式.当存在四舍 ...
Android 自定义圆环,一步步做Android自定义圆环百分比控件
马上要校招了,有点儿慌,写个自定义控件压压惊效果图本来写了一大串近段时间的感慨,还是觉得废话少说比较不容易被喷,直接上效果图圆环百分比View.gif 就是这个样子,下面记录一下我的编写经历,撸 ...
去除ECharts圆环鼠标悬停时中间显示的文字
ECharts中鼠标悬浮到图形元素上时,一般会出现高亮的样式,主要是通过 emphasis 属性来自定义,series中有下述代码的时候,鼠标悬停到图形元素上时,会在图形的中间位置显示图形块对应的文字 ...
echarts实现百分比进度图表展示（两种风格）
类型一:完整圆环型效果图代码示例 function PercentPie(option){this.backgroundColor = option.backgroundColor||'#ffff ...
uniapp中封装echarts圆环图
①安装插件市场的echarts图表插件 https://ext.dcloud.net.cn/plugin?id=4899 ②安装后需安装echarts相关依赖: npm install echarts ...
vue 圆形百分比进度条_vue实用组件——圆环百分比进度条
有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激. 功能介绍: 1.若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画 2.若页面无刷新,且第一次传值大于第二 ...

echarts圆环百分比图示

echarts圆环百分比图示相关推荐

最新文章

热门文章