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 绘图引擎,并且 ...
随机推荐
- Installation failed with message Failed to finalize session : INSTALL_FAILED_INVALID_APK: Split lib_slice_8_apk was defined multiple times. It is possible that this issue is resolved by uninstalling a
取消:Instant Run就行
- linux系统构架 - LB集群之LVS介绍
LB 集群是 load balance 集群的简写,翻译成中文就是负载均衡集群.常用的负载均衡开源软件有 nginx.lvs.keepalived ,商业的硬件负载设备 F5.Netscale. LB ...
- 解决Tomcat 一闪而过的问题
启动tomcat时cmd窗口一闪而过解决方法. 问题现象: 在实际开发中一般都是eclipse+tomcat(也许还会用到tomcat的插件),我们只需要在eclipse中单击servers上的按钮就 ...
- centos7 yum 安装jq
一.简介 EPEL是企业版 Linux 附加软件包的简称,EPEL是一个由Fedora特别兴趣小组创建.维护并管理的,针对 红帽企业版 linux(RHEL)及其衍生发行版(比如 CentOS.Sci ...
- go反射实例
需求分析: 如在rocketmq的网络通信中,所有通信数据包以如下形式传输: (注:rocketmq的java结构体,这里使用了go形式表示) type RemotingCommand struct ...
- BarcodeLib -- 一个精简而不失优雅的条形码生成库
BarcodeLib -- 一个精简而不失优雅的条形码生成库 引言 在百度进行“C# 条形码”等类似关键字搜索的时候,基本上是使用 ZXing 类库进行条形码的生成.今天我所介绍的是另一款类库 Bar ...
- Library not found for -lAPOpenSdk
多人开发合作的时候 总是会遇见各种各样的问题 今天就来讲一个关于友盟的问题 在我的小伙伴 用cocoapods 中添加了这样一句话 pod ‘UMengSocialCOM’, 并且pod updat ...
- [转]NDK编译库运行时报dlopen failed: cannot locate symbol "__exidx_end" 解决办法
原文链接:http://blog.csdn.net/acm2008/article/details/41040015 当用NDK编译的库在运行加载时报如下错: dlopen("/data/d ...
- [C++] Memory_stack_heap
STACK_HEAP_MEMERY_MAP NOTICE: For p1 , where is the address of p1 ?(0x200400) IN STACK For p1 , wher ...
- linux的“自动化”-乾颐堂CCIE
linux系统的web网站在运营状态时,我们常需要对网站进行维护,例如查看资源剩余并做出响应.日志分割.数据整理,在特定状态执行特定任务等等,这些都会需要linux能实现自动执行某些任任务.本篇博文介 ...