highcharts中的环形图
环形图如下效果:

代码:
that.options = {
chart: {
type: 'pie',
backgroundColor: 'transparent',
color: '#fff',
// height: that.torem(500)
},
title: {
text: null
},
subtitle: {
text: null
},
plotOptions: {
pie: {
colors: ['#dba630', '#46ebce', '#b43cfc', '#3b7af8', '#29b00f'],
borderColor: 'transparent',
dataLabels: {
// 环形图内部展示
enabled: false
},
cursor: 'pointer',
showInLegend: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
padding: that.torem(80),
itemStyle: {
color: '#fff',
fontSize: that.torem(28)
},
itemDistance: that.torem(100),
lineHeight: that.torem(140),
labelFormatter: function() {
return `${this.name}\xa0\xa0\xa0${this.y}%`;
}
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}:</b>' + '<b>{point.y}%</b>'
},
series: [
{
innerSize: '70%',
zMin: 0,
data: dataArr
}
]
};
highcharts中的环形图的更多相关文章
- Android中自定义环形图2
如图: 自定义属性,在values文件夹下创建 attrs.xml <?xml version="1.0" encoding="utf-8"?> & ...
- Android中自定义环形图
如图: 自定义view package com.riverlet.ringview; import android.animation.ObjectAnimator; import android.c ...
- Qt编写自定义控件41-自定义环形图
一.前言 自定义环形图控件类似于自定义饼状图控件,也是提供一个饼图区域展示占比,其实核心都是根据自动计算到的百分比绘制饼图区域.当前环形图控件模仿的是echart中的环形图控件,提供双层环形图,有一层 ...
- HighCharts中的无主题的2D折线图
HighCharts中的无主题的2D折线图 1.设计源码 <!DOCTYPE html> <html> <head> <meta charset=" ...
- HighCharts中的Ajax请求的2D折线图
HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- Java 在Excel中添加分离型饼图、环形图
一.概述 Excel中可支持多种不同类型的图表,本文介绍如何绘制分离型饼图和环形图.其中,分离型饼图的绘制可分为整体分离型(即设置饼图分离程度)和局部分离(即设置点爆炸型值)两种情况.下面将以Java ...
- HighChartS cpu利用率动态图(Java版)
来源:http://www.cnblogs.com/haifg/p/3217699.html 最近项目需要监控服务器cpu的利用率,并做成动态图.在网上查找了一些资料,最终选择了HighChart ...
- HighCharts实现多数据折线图分列显示
HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...
- 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)
最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...
- Highcharts 基本区域图;Highcharts 使用负数区域图;Highcharts 堆叠区域图;Highcharts 百分比堆叠区域图
Highcharts 基本区域图 配置 chart chart.type 配置项用于设定图表类型,默认为 "line",本章节我们使用 'area'. var chart = { ...
随机推荐
- git 相关操作
git diff 已经缓存的文件和刚刚修改过的没有缓存的文件的对比 git diff --stage git status 查看本地文件的修改,是否进入缓存 git add 把刚刚修改过的 ...
- Angular 18+ 高级教程 – Dependency Injection 依赖注入
前言 本来是想先介绍 Angular Component 的,但 Component 里面会涉及到一些 Dependency Injection (简称 DI) 的概念,所以还是先介绍 DI 吧. 温 ...
- Git Bash OpenSSL – Generate Self Signed Certificate
前言 以前就写过了, 只是写的太乱, 这篇是一个整理版. 以前的文章: Git Bash 创建证书 PowerShell 创建证书 我已经没有用 PowerSheel 做证书了, 所以就不介绍了. 参 ...
- Identity – Custom Entity
扩展属性 Custom Entity 指的是我们想对 Identity 的几个 Entity 做修改. 比如 User 要多一些 property, 或者 Id 用 int 而不是默认的 GUID. ...
- POJ-3176 Cow Bowling(基础dp)
The cows don't use actual bowling balls when they go bowling. They each take a number (in the range ...
- MoNA:复用跨模态预训练模型,少样本模态的福音 | ICML'24
跨模态转移旨在利用大型预训练模型来完成可能不属于预训练数据模态的任务.现有的研究在将经典微调扩展到跨模态场景方面取得了一定的成功,但仍然缺乏对模态差距对转移的影响的理解.在这项工作中,进行了一系列关于 ...
- [TK] 寻宝游戏
在树上标记若干个点,求出从某个点走过全部点并回到该点的最小路径. 有多次询问,每次询问只改变一个点. 首先是一个暴力的思路. 会发现,从标记点中的其中一个开始走,结果一定更优,并且无论从哪个点开始走, ...
- VMWARE 客户机 ARP 问题一则
最近测试自定义的 linux 镜像,会在 vmware 里面反复安装.测试过程中,发现一个奇怪的现象,就是刚装好的虚拟机,要主动往外ping一下,才能被网络上其他主机连接上.否则就算是同一子网下的宿主 ...
- 1. 什么是three.js?
Three.js是一个基于JavaScript编写的开源3D图形库,它使用WebGL技术在网页上渲染3D图形.Three.js提供了许多高级功能,如几何体.纹理.光照.阴影等,以便开发者能够快速地创建 ...
- less 是什么?为什么使用less?
less 是css的预处理器,是动态语言,赋予了css动态的特性,如继承,变量,函数等,less可以执行在客户端和服务端: 为什么使用less a)less 的结构简单,便于扩展 b)实现多重继承 c ...