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 = { ...
随机推荐
- 【YashanDB知识库】收集分区表统计信息采样率小于1导致SQL执行计划走偏
[问题分类]性能优化,BUG [关键字]分区表,统计信息,采样率 [问题描述]收集表(分区表)级别的统计信息时,如果采样率小于1,dba_ind_statistics中partition_name i ...
- Kubernetes 环境中切换代理ipvs模式
Kubernetes 环境中切换代理ipvs模式 service代理默认使用iptables规则通过内核模块netfilter实现流量转发,内核转发效率高,但是iptables不具备更为灵活的负载均衡 ...
- Round #2022/12/10
问题 D:城市大脑 题目描述 杜老师正在编写杭州城市大脑智能引擎.杭州的道路可以被抽象成为一幅无向图.每条路的初始速度都是 \(1\ m/s\).杜老师可以使用 \(1\) 块钱让任意一条路的速度提升 ...
- 【笔记】node常用方法(持续更新)
1.path.basename(path[, ext]) path <string> ext <string> 可选的文件扩展名. 返回: <string> pat ...
- EF Core – Get Started 搭建单侧环境
有时候想搭个环境做测试, 又记不住那些 command, 官方教程又啰嗦. git clone 模板又不太好管理, 索性记入在这里吧. 创建项目 dotnet new webapp -o Simple ...
- JAVAEE——MySQL安装
一.下载MySQL(两种方式) 1.官网下载 官网下载地址:https://www.mysql.com/downloads 2.点击下载(版本:mysql-8.0.28-winx64) 链接:ht ...
- Flutter(able) 的单例模式
文/ 杨加康,CFUG 社区成员,<Flutter 开发之旅从南到北>作者,小米工程师 单例设计模式(Singleton Design Pattern)理解起来非常简单. 一个类只允许创建 ...
- LeetCode 1438. Longest Continuous Subarray With Absolute Diff Less Than or Equal to Limit (绝对差不超过限制的最长连续子数组)
给你一个整数数组 nums ,和一个表示限制的整数 limit,请你返回最长连续子数组的长度,该子数组中的任意两个元素之间的绝对差必须小于或者等于 limit . 如果不存在满足条件的子数组,则返回 ...
- 简单上手 Vue Router
Vue Router 也随着 Vue3 的更新来到了 4 版本,来看一下怎么使用吧!(这里使用的是 composition API 和 TypeScript 模式) 安装 vue-router4 np ...
- Java日期时间API系列14-----Jdk8中java.time包中的新的日期时间API类,java日期计算1,获取年月日时分秒等
通过Java日期时间API系列8-----Jdk8中java.time包中的新的日期时间API类的LocalDate源码分析 ,可以看出java8设计非常好,实现接口Temporal, Tempora ...