ecahrt 扇形(半扇形)
var data = [{
"name": "1",
"value": 54
}, {
"name": "2",
"value": 10
}, {
"name": "3",
"value": 10
},
{
"name": "4",
"value": 10
},
{
"name": "5",
"value": 120,
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
}] var data1 = [{
"name": "1",
"value": 0
},
{
"name": "2",
"value": 0
},
{
"name": "3",
"value": 0
},
{
"name": "4",
"value": 0
},
{
"name": "5",
"value": 0
},
{
"name": "6",
"value": 54, }] option = { color: ['#A0CE3A', '#31C5C0', '#1E9BD1','#149BD1', 'transparent',"#ffffff"],
backgroundColor: 'rgba(225,225,225,0.7)',
title: {
text: '松鼠',
subtext: 7789,
textStyle: {
color: '#000000',
fontSize: 20,
// align: 'center'
},
subtextStyle: {
fontSize: 30,
color: ['#ff9d19']
},
x: 'center',
y: 'center',
},
grid: {
bottom: 150,
left: 100,
right: '10%'
},
tooltip: {
show:true,
trigger: 'item',
formatter: function(params){
if(params.dataIndex === 4){
//剔除总数据,避免鼠标移上的bug
return '';
}else{
// '{b}:{c}({d})%'
return params.data.name+":"+params.data.value;
}
},
textStyle:{
fontSize:12
} },
legend: {
show:false,
data: data,
},
series: [
// 主要展示层的
{
radius: ['30%', '61%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: true,
formatter: "{c}",
textStyle: {
fontSize: 12, },
position: 'inside'
},
emphasis: {
show: false
}
},
name: "民警训练总量",
data: data,
startAngle:80, //起始角度
},
{
radius: ['0', '30%'],
center: ['50%', '50%'],
label: {
normal: {
show: false,
},
emphasis: {
show: false
}
},
type: 'pie',
data: data1,
startAngle:80, //起始角度
} ]
}; /*暂时未使用*/
function _colors() {
return [
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#d4a26a' }, // 0% 处的颜色
{ offset: 1, color: '#dec399' } // 100% 处的颜色
],
false),
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#588ec5' }, // 0% 处的颜色
{ offset: 1, color: '#93bbd8' } // 100% 处的颜色
],
false),
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#72ede0' }, // 0% 处的颜色
{ offset: 1, color: '#02758a' } // 100% 处的颜色
],
false),
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#db4bb4' }, // 0% 处的颜色
{ offset: 1, color: '#85035f' } // 100% 处的颜色
],
false),
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#edd099' }, // 0% 处的颜色
{ offset: 1, color: '#ffa13c' } // 100% 处的颜色
],
false),
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#5df5af' }, // 0% 处的颜色
{ offset: 1, color: '#1a8764' } // 100% 处的颜色
],
false),
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#53b1d9' }, // 0% 处的颜色
{ offset: 1, color: '#023f8a' } // 100% 处的颜色
],
false),
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#db8fe6' }, // 0% 处的颜色
{ offset: 1, color: '#af44e6' }, // 100% 处的颜色
],
false),
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#fa864c' }, // 0% 处的颜色
{ offset: 1, color: '#aa3815' } // 100% 处的颜色
],
false),
new this.echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: '#b4dbf6' }, // 0% 处的颜色
{ offset: 1, color: '#3c9cff' } // 100% 处的颜色
],
false)
];
}
实例展示地址: https://gallery.echartsjs.com/editor.html?c=xnNT33748W
ecahrt 扇形(半扇形)的更多相关文章
- android自定义控件一站式入门
自定义控件 Android系统提供了一系列UI相关的类来帮助我们构造app的界面,以及完成交互的处理. 一般的,所有可以在窗口中被展示的UI对象类型,最终都是继承自View的类,这包括展示最终内容的非 ...
- RabbitMQ入门教程——发布/订阅
什么是发布订阅 发布订阅是一种设计模式定义了一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有的订阅者对象,使他们能够自动更新自己的状态. 为了描述这种 ...
- ANDROID——仿360手机卫士的旋转打分控件
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 简介 灵感源自360手机卫,主要功能就是实现显示评分或等级的效果.并稍微改良了一下,有更好 ...
- C#中的GDI+图形绘制方法
GDI+图形绘制方法 1.首先对于绘制图形,必须的先将命名空间导入:using System.Drawing.Drawing2D; 2.然后在一个事件中写入程序 首先先将Graphics这个对象实例化 ...
- [游戏模版6] Win32 graph
>_<:there in the MyPaint(...) function respectively use Ellipse(...) draw ellipse, use RoundRe ...
- Quartz2D简介及基本线条绘制
* Quartz2D简介 1.什么是Quartz2D? 他是一个二维的绘图引擎,同时支持iOS和Mac系统 2.Quartz2D能完成的工作 画基本线条,绘制文字,图片,截图,自定义UIView. 3 ...
- 004--VS C++ 绘制封闭图形
//全局变量HPEN hPen;HBRUSH hBru[4];int sBru[4] = { HS_VERTICAL, HS_HORIZONTAL, HS_CROSS, HS_DIAGCROSS }; ...
- GDI编程
图形设备接口(GDI)是一个可执行程序,它接受Windows应用程序的绘图请求(表现为GDI函数调用),并将它们传给相应的设备驱动程序,完成特定于硬件的输出,象打印机输出和屏幕输出.GDI负责Wind ...
- iOS - Quartz 2D 二维绘图
1.Quartz 2D 简介 Quartz 2D 属于 Core Graphics(所以大多数相关方法的都是以 CG 开头),是 iOS/Mac OSX 提供的在内核之上的强大的 2D 绘图引擎,并且 ...
随机推荐
- HALCON形状匹配(转)
LIntExport Herror create_shape_model( const Hobject& Template , //reduce_domain后的模板图像 Hlong N ...
- StringUtils的isNotEmpty和isNotBlank
StringUtils中一共有130多个方法,并且都是static的,所以我们可以这样调用StringUtils.xxx():今天笔者记录下常用的isNotEmpty和isNotBlank:这两个都是 ...
- C++Primer笔记-----day03
==============================================================day03================================= ...
- sql中经度维度计算距离
------------------------------------------创建一个方法---------------------------------------------------- ...
- Alternative PHP Cache ( APC )
简介: Alternative PHP Cache (APC) 是一个开放自由的PHP opcode 缓存.它的目标是提供一个自由.开放和健全的框架用于缓存和优化 PHP 的中间代码,加快 PHP 执 ...
- 【290】Python 函数
参考:Python 函数 参考:7.3 给函数参数增加元信息(增加参数的数据类型) 目录: 一.语法 二.说明 三.参数传递 四.参数 4. 1 必备参数 4.2 关键字参数 4.3 缺省参数 4.4 ...
- js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
1.工厂模式 function a(name){ var b = new object(); b.name = name; b.say = function(){ alert(this.name); ...
- jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用
jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用
- SQL Pretty Printer不错的sql格式化工具
之前使用过sql server 2000的查询设计器和Toad for oracle 都有格式化Sql语句的功能,感觉很方便,尤其对于我这种有着轻微强迫症的人来说.当最近把SQL Server Man ...
- Thread.sleep原理
我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时间.那么你有没有正确的理解这个函数的用法呢?思考下面这两个问题: 假设现在是 2008-4-7 12:00:00.000,如果我调用 ...