环形图如下效果:

代码:

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. 【YashanDB知识库】收集分区表统计信息采样率小于1导致SQL执行计划走偏

    [问题分类]性能优化,BUG [关键字]分区表,统计信息,采样率 [问题描述]收集表(分区表)级别的统计信息时,如果采样率小于1,dba_ind_statistics中partition_name i ...

  2. Kubernetes 环境中切换代理ipvs模式

    Kubernetes 环境中切换代理ipvs模式 service代理默认使用iptables规则通过内核模块netfilter实现流量转发,内核转发效率高,但是iptables不具备更为灵活的负载均衡 ...

  3. Round #2022/12/10

    问题 D:城市大脑 题目描述 杜老师正在编写杭州城市大脑智能引擎.杭州的道路可以被抽象成为一幅无向图.每条路的初始速度都是 \(1\ m/s\).杜老师可以使用 \(1\) 块钱让任意一条路的速度提升 ...

  4. 【笔记】node常用方法(持续更新)

    1.path.basename(path[, ext]) path <string> ext <string> 可选的文件扩展名. 返回: <string> pat ...

  5. EF Core – Get Started 搭建单侧环境

    有时候想搭个环境做测试, 又记不住那些 command, 官方教程又啰嗦. git clone 模板又不太好管理, 索性记入在这里吧. 创建项目 dotnet new webapp -o Simple ...

  6. JAVAEE——MySQL安装

    一.下载MySQL(两种方式) 1.官网下载 官网下载地址:https://www.mysql.com/downloads   2.点击下载(版本:mysql-8.0.28-winx64) 链接:ht ...

  7. Flutter(able) 的单例模式

    文/ 杨加康,CFUG 社区成员,<Flutter 开发之旅从南到北>作者,小米工程师 单例设计模式(Singleton Design Pattern)理解起来非常简单. 一个类只允许创建 ...

  8. LeetCode 1438. Longest Continuous Subarray With Absolute Diff Less Than or Equal to Limit (绝对差不超过限制的最长连续子数组)

    给你一个整数数组 nums ,和一个表示限制的整数 limit,请你返回最长连续子数组的长度,该子数组中的任意两个元素之间的绝对差必须小于或者等于 limit . 如果不存在满足条件的子数组,则返回 ...

  9. 简单上手 Vue Router

    Vue Router 也随着 Vue3 的更新来到了 4 版本,来看一下怎么使用吧!(这里使用的是 composition API 和 TypeScript 模式) 安装 vue-router4 np ...

  10. Java日期时间API系列14-----Jdk8中java.time包中的新的日期时间API类,java日期计算1,获取年月日时分秒等

    通过Java日期时间API系列8-----Jdk8中java.time包中的新的日期时间API类的LocalDate源码分析 ,可以看出java8设计非常好,实现接口Temporal, Tempora ...