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 绘图引擎,并且 ...
随机推荐
- 禁用Java JDK的自动更新
- axis2 webService开发指南(2)
1 Axis2的简单WebService示例 1.1 新建一个web工程,创建一个类Greeting,用于当作webservice服务 代码如下: package amyservices; impo ...
- Linux实战教学笔记47:JAVA企业级应用服务器之TOMCAT实战
第一章 Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache,Sun和其他一些公司及个人共 ...
- 【LA11248 训练指南】网络扩容【最大流】
题意: 给定一个有向网络,每条边均有一个容量.问是否存在一个从点1到点N,流量为C的流.如果不存在,是否可以恰好修改一条弧的容量,使得存在这样的流? 分析: 先跑一遍最大流,如果最大流大于等于C,则输 ...
- SEL 类型
1.SEL类型的第一个作用, 配合对象/类来检查对象/类中有没有实现某一个方法 SEL sel = @selector(setAge:); Person *p = [Person new]; // 判 ...
- zabbix结合grafana
一.下载grafana 下载地址: http://docs.grafana.org/installation/rpm/ https://s3-us-west-2.amazonaws.com/grafa ...
- JAVA数据结构实现原理
HashTable 线程安全, 内部函数被synchronized修饰,对象级的锁 HashMap 非线程安全, 需要tradeoff 空间和查找时间, 空间利用率低时,冲突少,查询效率高,反之空间利 ...
- Python学习笔记_使用openpyxl操作Excel,在同一个文件里复制某一个sheet
应用场景:定制一个Excel模板文件,其中定义了一个模板Sheet,以此模板文件里的模板sheet为样例,制作报表,里面有不止一个模板样例Sheet 一.软件环境: 1.OS:Win10 64位 2. ...
- SqlSugar Asp.Net 高性能ORM框架
SqlSugar从去年到现在已经一年了,版本从1.0升到了现在的2.4.1 ,这是一个稳定版本 ,有数家公司已经项目上线,在这里我将SqlSugar的功能重新整理成一篇新的贴子,希望大家喜欢. 公司团 ...
- nodejs、webpack
开发环境,直接本机下载代码回来,装好nodejs.webpack(安装方法 npm install webpack -g), 切换到项目根目录下 1.安装依赖:npm install 2.执行webp ...