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 = { ...
随机推荐
- Kali初次使用,如何获得root权限?【转】
最新的kali 系统,安装的时候会创建一个新用户,不是root的,然后安装软件的时候会要求root权限,要启用root账号可以按下面这个写的 方法1已经确认可以.方法2没尝试,自己试试吧. 1.确定用 ...
- 2023/11/16 NOIP 模拟赛
T1 基于1的算术 标签 暴力枚举 思路1 赛时想了个假的 DP,只拿了 77 分,,, 小于 \(10^{15}\) 的仅由 \(1\) 组成的数只有 \(15\) 个,直接枚举即可. 想了一个做法 ...
- 快速结束 git 输出行
在使用git命令查看操作记录等时,内容很多,想要输出内容快速结束 英文 Q 备注:通过英文Q快速结束
- Angular 18+ 高级教程 – Component 组件 の Query Elements
前言 Angular 是 MVVM 框架. MVVM 的宗旨是 "不要直接操作 DOM". 在 Component 组件 の Template Binding Syntax 文章中 ...
- 26.删除有序数组中的重复项 Golang实现
题目描述: 给你一个 非严格递增排列 的数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度.元素的 相对顺序 应该保持 一致 .然后返回 nums 中唯 ...
- c++中字符/串->整数
char字符->整数数字:std::isdigit 用于判断某个字符是否为数字(0-9). 字符串->数字:std::stoi 用于将字符转换为整数. int isdigit( int c ...
- 墨天轮最受DBA欢迎的数据库技术文档-容灾备份篇
在大家的支持与认可下,墨天轮编辑部继续为大家整理出了[墨天轮最受欢迎的技术文档]系列第二篇--容灾备份篇,希望能够帮助到大家. 作为一名数据库管理员,最怕数据库中心突然失去服务能力.影响业务,而不论是 ...
- 一文读懂 Prometheus 长期存储主流方案
嘉宾 | 霍秉杰 整理 | 西京刀客 出品 | CSDN 云原生 Prometheus 作为云原生时代崛起的标志性项目,已经成为可观测领域的事实标准.Prometheus 是单实例不可扩展的,那么如果 ...
- OpenFunction 0.7.0 发布: OpenFunction Gateway、多语言及 Helm 安装支持
OpenFunction 是一个开源的云原生 FaaS(Function as a Service,函数即服务)平台,旨在帮助开发者专注于业务逻辑的研发.在过去的几个月里,OpenFunction 社 ...
- 自学PHP笔记(二) PHP数据类型
本文转发来自:https://blog.csdn.net/KH_FC/article/details/115415323 PHP数据类型可支持以下8种类型: 类型 说明 string 字符串 bool ...