环形图如下效果:

代码:

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. C#|.net core 基础 - 如何判断连续子序列

    前两天同事遇到了一个小需求,想判断一个集合是不是在另一个集合中存在,并且要求顺序一致,然后一起讨论了下应该怎么做,有没有什么比较好的方式?下面分享一下我们想到的方法,如果你也有不同的想法也可以分享给我 ...

  2. ASP.NET Core – CORS (Cross-Origin Resource Sharing)

    参考 Docs – Enable Cross-Origin Requests (CORS) in ASP.NET Core 介绍 CORS (Cross-Origin Resource Sharing ...

  3. 十,Spring Boot 的内容协商的详细剖析(附+Debug调试说明)

    十,Spring Boot 的内容协商的详细剖析(附+Debug调试说明) @ 目录 十,Spring Boot 的内容协商的详细剖析(附+Debug调试说明) 1. 基本介绍 2. 准备工作 3. ...

  4. C++ 数据输入cin (解决CLoin输入中文程序出错)

    数据输入cin 语法:cin >> 变量 解决 CLoin 使用cin输入中文程序无法正常运行 按住Ctrl+alt+shift+/键 弹出对话框选择注册表 取消勾选run.process ...

  5. Java中使用BigDecimal进行double类型的计算(高精度,可保留几位小数)

    Java中 小数直接进行乘除运算,会出现精度问题导致计算结果有误需要使用 BigDecimal 类型辅助运算,保证精度无误源码: import java.math.BigDecimal;import ...

  6. SpringMVC —— 响应

    响应页面    响应文本数据    响应json数据    响应json集合数据    注解      转换json时使用了类型转换器     

  7. 图解连接阿里云(二)使用Paho-MQTT(支持FreeRTOS版本、Linux版本)连接1MQTT测试服务器 2阿里云物联网平台

    前沿提要: MQTT是什么不知道? 看这一篇:https://www.cnblogs.com/happybirthdaytoyou/p/10362336.html 阿里云官网玩不转? 看这一篇: ht ...

  8. 14. Vue2 和 Vue3 区别

    主要分为四点: 1. Vue3 使用了 proxy 替代了 Object.defineProperty 实现响应式数据 ,所以 vue3 的性能得到了提升 : 2. Vue3 可以在 template ...

  9. 0602-nn.Module

    0602-nn.Module 目录 一.nn.Module 1.1 构建一层网络--全连接层 1.2 构建多层网络--多层感知机 pytorch完整教程目录:https://www.cnblogs.c ...

  10. WSL默认安装目录

    我当前在win11下进行以下操作,其它系统版本有问题可以留言 一.安装WSL 前提条件:我们需要保证你的操作系统版本满足 **Windows 10 版本 2004 及更高版本(内部版本 19041 及 ...