echarts中半圆的环形进度图形

效果如图：

一、html代码如下：

<div id="pieDiagram1" style="width:330px;height:160px;"></div>

一、js代码如下：

var pieDiagram1 = echarts.init(document.getElementById('pieDiagram1'));var tittleVal = '75%'var option = {title: {text: tittleVal,textStyle: {color: '#fff',fontSize: 24,fontWeight: 'bold'},left: 'center',top:54,bottom: '69%',itemGap: 60,},tooltip: {show: false,},color: ['#01dadc'],legend: {orient: 'vertical',x: 690,y:120,data:['月指标完成率'],},series: [{name: '月指标完成率',type: 'pie',startAngle: 0,hoverAnimation: false,radius: ["60%", "87%"],center: ['50%', '50%'],label: {normal: {show: false,position: 'center'},emphasis: {show: true,textStyle: {fontSize: '10',fontWeight: 'bold'}}},labelLine: {normal: {show: false}},data: [{value: 300,itemStyle: {normal: {color: "rgba(19,128,233,0)"}}},{value: 240,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#138fff'}, {offset: 1, color: '#12e6f2'}, ])}}},{value: 60,itemStyle: {normal: {color: "rgba(1,218,220,0.1)"}}},]},]}pieDiagram1.setOption(option, true);

echarts中半圆的环形进度图形相关推荐

js svg语音波动动画_SVG实现环形进度条的原理
之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制.具体效果如下 ...
echarts中graphic_echarts 绘制网格教你使用graphic
echarts 绘制网格教你使用graphic 主子镇楼不经常使用的echarts的同学对于echarts 的认识基本停留在饼图,柱形图,条形图,折线图等一系列常规图形上,对于网格基本是一脸懵,小 ...
echarts中为坐标轴添加箭头
1.实现的最终效果: 2.实现思路: (1).刚开始翻看echarts官方网站上面的教程.发现有个属性可以添加箭头: 代码如下: 实现效果:(跟最终的样式有所出入) (2).后来在网上翻看资料,发现s ...
echarts 环形进度图
#echarts 环形进度图 #效果图 #上代码 data = [{name: '发票管理',value: 360,},{name: '纳税申报',value: 252,},{name: '综合服务' ...
echarts实现环形进度条
效果图实现代码可直接复制运行: <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"><p>抱歉, ...
echarts 三环圆环_echarts实现环形进度图
//环形进度图 TgsChartsUtil.drawCircleLoadingChart = function(cfg){ var myChart = TgsChartsUtil.getChart(c ...
echarts实现环形进度图
//环形进度图 TgsChartsUtil.drawCircleLoadingChart = function(cfg){var myChart = TgsChartsUtil.getChart(cf ...
android 环形时间显示_Android_Android实现自定义圆形进度条，今天无意中发现一个圆形进度 - phpStudy...
Android实现自定义圆形进度条今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制 ...

echarts中半圆的环形进度图形

echarts中半圆的环形进度图形

效果如图：

一、html代码如下：

一、js代码如下：

echarts中半圆的环形进度图形相关推荐

最新文章

热门文章