环形图如下效果:

代码:

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中的环形图的更多相关文章

  1. Android中自定义环形图2

    如图: 自定义属性,在values文件夹下创建 attrs.xml <?xml version="1.0" encoding="utf-8"?> & ...

  2. Android中自定义环形图

    如图: 自定义view package com.riverlet.ringview; import android.animation.ObjectAnimator; import android.c ...

  3. Qt编写自定义控件41-自定义环形图

    一.前言 自定义环形图控件类似于自定义饼状图控件,也是提供一个饼图区域展示占比,其实核心都是根据自动计算到的百分比绘制饼图区域.当前环形图控件模仿的是echart中的环形图控件,提供双层环形图,有一层 ...

  4. HighCharts中的无主题的2D折线图

    HighCharts中的无主题的2D折线图 1.设计源码 <!DOCTYPE html> <html> <head> <meta charset=" ...

  5. HighCharts中的Ajax请求的2D折线图

    HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  6. Java 在Excel中添加分离型饼图、环形图

    一.概述 Excel中可支持多种不同类型的图表,本文介绍如何绘制分离型饼图和环形图.其中,分离型饼图的绘制可分为整体分离型(即设置饼图分离程度)和局部分离(即设置点爆炸型值)两种情况.下面将以Java ...

  7. HighChartS cpu利用率动态图(Java版)

    来源:http://www.cnblogs.com/haifg/p/3217699.html   最近项目需要监控服务器cpu的利用率,并做成动态图.在网上查找了一些资料,最终选择了HighChart ...

  8. HighCharts实现多数据折线图分列显示

    HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...

  9. 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)

    最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...

  10. Highcharts 基本区域图;Highcharts 使用负数区域图;Highcharts 堆叠区域图;Highcharts 百分比堆叠区域图

    Highcharts 基本区域图 配置 chart chart.type 配置项用于设定图表类型,默认为 "line",本章节我们使用 'area'. var chart = { ...

随机推荐

  1. MMDetection

    安装了mmdetection,想跑一下有几篇文章的工作.总觉得发展很快,一转眼几年时间,好多东西都变了.可再仔细看,感觉又没变啥,还是faster rcnn, ssd, yolo等,这几年变化的主要是 ...

  2. sql 查询表数据

    SELECT s.Name AS SchemaName, t.Name AS TableName, p.rows AS RowCounts--, --CAST(ROUND((SUM(a.used_pa ...

  3. [rCore学习笔记 027]地址空间

    写在前面 本随笔是非常菜的菜鸡写的.如有问题请及时提出. 可以联系:1160712160@qq.com GitHhub:https://github.com/WindDevil (目前啥也没有 引言 ...

  4. redisson内存泄漏问题排查

    问题描述 最近生产有个服务突然出现频繁告警,接口P99响应时间变长,运维同学观察到相应的pod cpu飙升,内存占用很高. cpu升高问题排查是老生常谈的话题了,一般可以使用top -p pid -H ...

  5. [Tkey] 黑兔子,白兔子

    CL-21 一般拿到这个题第一眼都应该能看出并查集,subtask1 是给并查集暴力修改的. 后面 subtask2 没有联通操作,是给纯线段树的,也算是启发正解了 再往下可以考虑操作 \(1\) 采 ...

  6. USB PD和USB TYPE-C 的区别

    USB Power Delivery (USB PD) 和 USB Type-C 是两个不同但相关的技术标准,它们在功能和应用上有所区别. 1. USB Type-C 连接器标准: USB Type- ...

  7. 对3D图像进行裁剪

    在对医学图像进行深度学习的过程中,我们会遇到图片过大,导致train的过程中网络会瘫痪,所以我们会考虑到对图像进行分割.比如一张155x240x240的图像,我们可以将他分割成一系列128x128x1 ...

  8. .NET 8 实现无实体库表 API 部署服务

    前言 快速将创意变为现实!无需实体建库建表即可完成增删改查操作,支持15种条件查询.分页.列表及无限级树形列表等多种功能的API部署. 提供完善的接口文档.Auth授权.接口限流.客户端真实IP获取. ...

  9. QToss:基于.NET架构的跨境电商的工具,助力企业实现智能数据营销

    2024年10月13日下午参加了一场在深圳举办的跨境电商大佬们的聚会,现场参加的人数上千人. 大会分享嘉宾中有位来自美国的,他告诉我们不用担心美国政府会把TikTok禁掉,TikTok在全世界都很受欢 ...

  10. Python入门:A+B问题

    1. A + B 问题I 前言 本篇作为课程第一篇,主要是对Python基础语法进行扫盲,本节课会学习到下面知识: 输入 本道题目的工作任务很简单,只是计算两个数的和,但是在计算之前,我们首先要明确的 ...