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 = { ...
随机推荐
- 合合信息扫描全能王发布“黑科技”,让AI替人“思考”图像处理问题
现阶段,手机扫描正越来越多地进入到人们的生活中.随着扫描应用场景的不断拓宽,诸多细节的问题逐渐显露,比如使用者在拍照扫描文档时,手指不小心"入镜"了,只能重拍:拍电脑屏幕时,画面上 ...
- QT数据可视化框架编程实战之三维柱状图_补天云QT技术培训专家
QT数据可视化框架编程实战之三维柱状图_补天云QT技术培训专家 文章目录 QT数据可视化框架编程实战:三维柱状图可视化运行效果 主程序实现C++代码 主场景 QML代码 坐标轴QML代码 数据模型定义 ...
- 递归获取zip中的文件
1 //tempPath 系统临时文件夹 2 2 private List<String> getWsContentList(String tempPath) { 3 3 //wsFile ...
- 邀请参与 2022 第三季度 Flutter 开发者调查
自 Flutter 3 发布之后,我们在以移动端为中心到多平台框架的路线上稳步前行,用 Dart 2.17 的新语言特性帮助大家提升工作效率,并对核心工具进行了改进,让您在跨平台打造优秀体验时更加得心 ...
- 2款.NET开源且免费的Git可视化管理工具
Git是什么? Git是一种分布式版本控制系统,它可以记录文件的修改历史和版本变化,并可以支持多人协同开发.Git最初是由Linux开发者Linus Torvalds创建的,它具有高效.灵活.稳定等优 ...
- /proc/pids/maps
本实例中的用户空间地址从 0x00000000 到 0x80000000,从地址空间划分可知,从低到高依次是: 可执行文件的代码段.数据段.BSS段. 堆heap. 文件映射和匿名映射,包括vdso. ...
- 对于python中GIL的一些理解与代码实现
近期看了一些关于GIL的一些内容,敲一下代码看看效果. # coding:utf-8 # GIL(Global Interpreter Lock):他只允许任何时刻只有一个线程处于执行状态,即使是在具 ...
- 06 - react的类组件中的状态state render函数 this指向问题 事件绑定
// 注册事件 import ReactDom from "react-dom" import { Component } from "react" // 类组 ...
- 39. 关于 diff 算法
diff 算法是vue渲染列表数据的时候,把新的 Vnode 和旧的 Vnode 比较,通过 key 值的对应,变化的标签就更新视图,不变的就复用 :
- 云原生周刊:Docker 推出 Docker Build Cloud
开源项目推荐 Kube-Vip Kube-Vip 旨在为 Kubernetes 集群提供高可用性和负载均衡功能.它提供了一个可插拔的 VIP(虚拟 IP)管理器,可以为集群中的服务分配一个虚拟 IP ...