echarts实现百分比进度图表展示（两种风格）

类型一：完整圆环型

效果图

代码示例

function PercentPie(option){this.backgroundColor = option.backgroundColor||'#ffffff';this.color           = option.color||['#4ea2eb','#e1e2e1'];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,bottom:'5%',left: 'center',textStyle:{color: '#777777',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18}},series: [{name: null,type: 'pie',radius: ['45%', '60%'],center: ['50%', '45%'],avoidLabelOverlap: false,hoverAnimation:false,label: {normal: {show: false,formatter:'{c}%'}},data: [{value: _that.value,name: null,label:{normal:{show:true,position: 'center',textStyle: {fontSize: _that.fontSize,fontWeight: 'bold',}}}},{value: _that.value>=100?0:100-_that.value,name: null}]}]};echarts.init(_that.domEle).setOption(option);};var option = {value:'30%'.replace('%',''),//百分比,必填name:'成功率',title:'成功率',backgroundColor:null,color:['#ff4e4a','#f5f5f5'],fontSize:20,domEle:document.getElementById("domId")//必填
},percentPie = new PercentPie(option);
percentPie.init();

类型二：半圆型

效果图

代码示例

var color = ['rgba(0, 221, 255)','rgba(77, 119, 255)','rgba(241, 185, 19)','rgba(224, 110, 62)','rgb(255, 115, 111)','rgb(255, 46, 41)'];var option = {series: [{type: 'pie',radius: ['120%', '150%'],center: ['50%', '90%'],label: {show: false,},startAngle: 180,hoverOffset: 0, // 鼠标经过不变大data: [{value: '89.82%'.replace('%', '') * 0.01 * 200,itemStyle: { // 颜色渐变color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: color[0]}, {offset: 1,color: color[1]}]}}}, {value: 200 - ('89.82%'.replace('%', '') * 0.01 * 200),itemStyle: {color: '#12274d'}}, // 颜色#12274d{value: 200,itemStyle: {color: 'transparent'}} // 透明隐藏第三块区域]}]};
var myechart = echarts.init($('#domId'));
myechart.setOption(option);

echarts实现百分比进度图表展示（两种风格）相关推荐

vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
IDEA亮暗两种风格转换
如题,两种工具有亮暗两种风格,设置步骤如下步骤: 1.打开IntelliJ IDEA,点击[File] 2.点击[Settings],或者快捷键[Ctrl+Alt+s] 3.点击[Appearanc ...
介绍两种风格的URL
两种风格的"动态资源"--统一资源定位符(Uniform Resource Lactor,URL) 当前互联网上主要有两种主要风格的URL: 第一种直接在URL中知名文件(比如xx ...
【参赛作品37】openGauss/MogDB数据库函数创建的两种风格
作者:彭冲 PostgreSQL风格 create or replace function months_between() returns number as $function$ beginret ...
echarts饼图百分比的直接展示
引用echart的版本不一样,写法也存在差异 <div id="wraper" style="width: 1100px;height: 500px;backgro ...
python书写风格_以下两种风格 Python 写法，请问大家倾向哪种：）
看到不同的同事代码,表达同一个意思,主要 if 部分以下哪种写法比较好些:) 第一种写法 def xxxx(ph, sin_id): """ ""&q ...
两种风格的快速排序 Quick Sort
啊哈算法中的quick_sort.cpp // // Created by jal on 18-9-2. // #include <bits/stdc++.h>using namespac ...
mac 新建窗口时出现两种风格问题（oh-my-zsh配置后）
问题描述我们打开一个shell窗口后,再次点击新建窗口,发现第二个窗口的风格发生了变化.如下: 创建第一个窗口再次新建窗口结果出现默认风格的: 解决方法修改完成以后,再次创建第二个窗口的时候不 ...
014day(h5的发展史，h5的兼容，h5的语法，h5的语义化，h5的常用标记，百分比下字体居中的两种方法，video视频文件，audio音频文件，
一.h5的发展史 1.HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队. HTML 5 的 ...

echarts实现百分比进度图表展示（两种风格）

类型一：完整圆环型

效果图

代码示例

类型二：半圆型

效果图

代码示例

echarts实现百分比进度图表展示（两种风格）相关推荐

最新文章

热门文章