Echarts设置饼状图保证你看的明明白白
简单的饼状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts-动画</title>
<script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script>
</head>
<div style="width: 780px;height: 400px;" id="box"></div>
</body>
<script>
let myChart = echarts.init(document.querySelector('#box'))
// 第一个颜色是从正上方开始的
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
center: ['40%', '50%'], // 饼状图的位置
/**
* radius：饼状图的大小
* 它是一个数组，第1个值表示里面的圆的大小
* 第2个值表示外面的圆的大小
* */
radius: ['45%', '60%'],
data: [
{ value: 1048, name: '名称1' },
{ value: 735, name: '名称2' },
{ value: 580, name: '名称3' },
{ value: 484, name: '名称4' },
{ value: 300, name: '名称5' }
]
}
]
}
myChart.setOption(option);
</script>
</html>
给饼状图设置渐变色
...其他配置,
data:[ 相关数据],
itemStyle: {
normal: {
label: {
padding: [0, 0],
alignTo: 'labelLine'
},
color: (list) => {
let colorList = [
{
"colorStart": "#FF9800",
"colorEnd": "#FFD180"
},
{
"colorStart": "#673AB7",
"colorEnd": "#9575CD"
},
{
"colorStart": "#0F9D58",
"colorEnd": "#4CAF50"
},
{
"colorStart": "#00BCD4",
"colorEnd": "#64FFDA"
},
{
"colorStart": "#E91E63",
"colorEnd": "#FF80AB"
},
]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
//左、下、右、上
offset: 0,
color: colorList[list.dataIndex]["colorStart"],
},
{
offset: 1,
color: colorList[list.dataIndex]["colorEnd"],
},
]);
}
}
},
给饼状图外围配置一条虚线
{ //最外部细虚线
// 类型是仪表盘
type: 'gauge',
// 位置必须和饼状图的一样，否者设置出来会有偏差
center: ['40%', '50%'],
/**
* startAngle：仪表盘起始角度。
* 圆心正右手侧为0度，正上方为90度，正左手侧为180度。
* 就是说：逆时针
* */
startAngle: 270,
// endAngle：仪表盘结束角度。最初值是：-89.9999,
endAngle: -90,
// 设置虚线的大小
radius: '75%',
// 不要显示刻度，因为仪表盘式有刻度样式的；我们这里只要圆，不要刻度
// 如果设置为 show: true,就会显示刻度样式
axisTick: {
show: false
},
// false 不显示标签
axisLabel: {
show: false
},
// 仪表盘刻度的分割段数，这里表现是外层虚线之间的间距
// splitNumber: 65 更加直接的表现是外层有65段虚线
splitNumber: 65,
axisLine: {
// 不显示仪表盘轴线。如果设置为true,外层虚线就看不见
show: false,
// lineStyle：仪表盘轴线样式。
// lineStyle: {
// // 仪表盘的轴线可以被分成不同颜色的多段，我们这里始终是同一个颜色 [1, '#E5E6E8']
// color: [
// [0.1, 'red'], // 0~10% 红轴
// [0.2, 'green'], // 10~20% 绿轴
// [0.3, 'blue'], // 20~30% 蓝轴
// ],
// width: 10
// }
},
// 分隔线样式。
splitLine: {
show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见
length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度
lineStyle: {
width: 10, // 分隔线线长。支持相对半径的百分比。
color: '#E5E6E8', // 线的颜色
}
},
// 仪表盘详情，用于显示数据。
detail: {
show: false
},
},
视觉引导线配置
...其他配置,
data:[ 相关数据],
// 标签的视觉引导线配置
labelLine: {
show: true, // 是否显示视觉引导线
length: 20, // 视觉引导线第一段的长度。
length2: 40, // 视觉引导项第二段的长度。
lineStyle: {
color: '#E5E6E8', // 这里设置扇线颜色为灰色
width: 1, // 线段宽度
type: 'solid', // 线段类型，默认为实线
}
},
为什么hover的时候视觉引导线发生了变化?
我看官网都不会发生变化.
是与版本有关还是配置项有关
hover时视觉引导线和对应的名称样式不发生改变
...其他配置,
data:[ 相关数据],
// 高亮状态的扇区和标签样式 设置饼图外围虚线
emphasis: {
// 这里设置悬停时引导线对应名称的颜色，与非悬停时保持一致
label: {
color: '#333333'
},
labelLine: {
// 这里设置悬停时引导线的颜色，与非悬停时保持一致
lineStyle: {
color: '#E5E6E8'
}
}
}
可以自定义富文本样式
...其他配置,
data:[ 相关数据],
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true,
// 标签的位置。
position: 'outside',
normal: {
textStyle: {
color: '#333333' // 设置引导线外层文字描述的颜色
},
// 字符串模板 模板变量有：
// {a}：系列名。
// {b}：数据名。
// {c}：数据值。
// {d}：百分比。
formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}',
padding: [0, -40], // 设置标签距离引导线水平方向的距离
rich: {
aisB1: {
color: '#333333',
//这里还有其他属性；大家可以去查看
},
aisC1:{
color: '#333333',
},
aisD1: {
color: '#333333', // 这是数据值的颜色
},
}
}
},
名称在引导线的上方-使用\n
因为是使用的是4.9的版本；
所以设置名称在引导线的上方使用了一点技巧；
那就是换行符 \n
formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}\n\n',
名称在引导线的上方-使用labelLayout 需要再5.0以上版本
...其他配置,
data:[ 相关数据],
// 从 v5.0.0 开始支持
labelLayout:{
// 标签垂直对齐方式，可以设置'top', 'middle', 'bottom'。
verticalAlign:'bottom',
// 标签在 y 方向上的像素偏移，设置标签在引导线的上方
dy:-4
},
饼状图中间配置一个阴影圆
// 配置里面的圆
{
type: 'gauge',
center: ['40%', '50%'], // 饼状图的位置
radius: '35%',
// 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示
// 如果是版本是5，这里可以是360
startAngle: 359.999,
endAngle: 0,
splitNumber: 4,
zlevel: 10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[1, '#fff']
],
width: '100%',
shadowColor: '#CDCDCD', //背景阴影颜色
shadowOffsetX: 0, // X偏移量
shadowOffsetY: 0, // Y偏移量
shadowBlur: 10, // 模糊范围
}
},
splitLine: { //分隔线样式
show: false,
},
axisLabel: { //刻度标签
show: false,
},
axisTick: { //刻度样式
show: false,
},
detail: {
show: false,
},
//仪表盘指针。
pointer: {
// 不显示仪表盘中的指针
show: false,
},
title: {
// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
// 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
offsetCenter: ['0%', "0%"],
color: '#999999',
},
data: [{
name: "2024-05-09\n15:36:25",
}]
},
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts-动画</title>
<script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script>
<!-- <script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.js"></script> -->
</head>
<div style="width: 780px;height: 400px;" id="box"></div>
</body>
<script>
let myChart = echarts.init(document.querySelector('#box'))
// 第一个颜色是从正上方开始的
let option = {
tooltip: {
trigger: 'item'
},
series: [
{ //最外部细虚线
// 类型是仪表盘
type: 'gauge',
// 位置必须和饼状图的一样，否者设置出来会有偏差
center: ['40%', '50%'],
/**
* startAngle：仪表盘起始角度。
* 圆心正右手侧为0度，正上方为90度，正左手侧为180度。
* 就是说：逆时针
* */
startAngle: 270,
// endAngle：仪表盘结束角度。最初值是：-89.9999,
endAngle: -90,
// 设置虚线的大小
radius: '75%',
// 不要显示刻度，因为仪表盘式有刻度样式的；我们这里只要圆，不要刻度
// 如果设置为 show: true,就会显示刻度样式
axisTick: {
show: false
},
// false 不显示标签
axisLabel: {
show: false
},
// 仪表盘刻度的分割段数，这里表现是外层虚线之间的间距
// splitNumber: 65 更加直接的表现是外层有65段虚线
splitNumber: 65,
axisLine: {
// 不显示仪表盘轴线。如果设置为true,外层虚线就看不见
show: false,
// lineStyle：仪表盘轴线样式。
// lineStyle: {
// // 仪表盘的轴线可以被分成不同颜色的多段，我们这里始终是同一个颜色 [1, '#E5E6E8']
// color: [
// [0.1, 'red'], // 0~10% 红轴
// [0.2, 'green'], // 10~20% 绿轴
// [0.3, 'blue'], // 20~30% 蓝轴
// ],
// width: 10
// }
},
// 分隔线样式。
splitLine: {
show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见
length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度
lineStyle: {
width: 10, // 分隔线线长。支持相对半径的百分比。
color: '#E5E6E8', // 线的颜色
}
},
// 仪表盘详情，用于显示数据。
detail: {
show: false
},
},
// 圆环
{
type: 'pie',
center: ['40%', '50%'], // 饼状图的位置
/**
* radius：饼状图的大小
* 它是一个数组，第1个值表示里面的圆的大小
* 第2个值表示外面的圆的大小
* */
radius: ['45%', '60%'],
itemStyle: {
normal: {
label: {
padding: [0, 0],
alignTo: 'labelLine'
},
color: (list) => {
let colorList = [
{
"colorStart": "#FF9800",
"colorEnd": "#FFD180"
},
{
"colorStart": "#673AB7",
"colorEnd": "#9575CD"
},
{
"colorStart": "#0F9D58",
"colorEnd": "#4CAF50"
},
{
"colorStart": "#00BCD4",
"colorEnd": "#64FFDA"
},
{
"colorStart": "#E91E63",
"colorEnd": "#FF80AB"
},
]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
//左、下、右、上
offset: 0,
color: colorList[list.dataIndex]["colorStart"],
},
{
offset: 1,
color: colorList[list.dataIndex]["colorEnd"],
},
]);
}
}
},
// 标签的视觉引导线配置
labelLine: {
show: true, // 是否显示视觉引导线
length: 20, // 视觉引导线第一段的长度。
length2: 50, // 视觉引导项第二段的长度。
lineStyle: {
color: '#E5E6E8', // 这里设置扇线颜色为灰色
width: 1, // 线段宽度
type: 'solid', // 线段类型，默认为实线
}
},
// 从 v5.0.0 开始支持 标签的统一布局配置。
labelLayout:{
// 标签垂直对齐方式，可以设置'top', 'middle', 'bottom'。
verticalAlign:'bottom',
// 标签在 y 方向上的像素偏移，设置标签在引导线的上方
dy:-4
},
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true,
// 标签的位置。
position: 'outside',
normal: {
textStyle: {
color: '#333333' // 设置引导线外层文字描述的颜色
},
// 字符串模板 模板变量有：
// {a}：系列名。
// {b}：名称。
// {c}：数据值。
// {d}：百分比。
formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}',
padding: [0, -40], // 设置标签距离引导线水平方向的距离
rich: {
aisB1: {
color: '#333333',
},
aisC1: {
color: '#333333',
},
aisD1: {
color: '#333333', // 这是数据值的颜色
},
}
}
},
data: [
{ value: 1048, name: '名称1' },
{ value: 735, name: '名称2' },
{ value: 580, name: '名称3' },
{ value: 484, name: '名称4' },
{ value: 300, name: '名称5' }
],
// 高亮状态的扇区和标签样式 设置饼图外围虚线
emphasis: {
// 这里设置悬停时引导线对应名称的颜色，与非悬停时保持一致
label: {
color: '#333333'
},
labelLine: {
// 这里设置悬停时引导线的颜色，与非悬停时保持一致
lineStyle: {
color: '#E5E6E8'
}
}
}
},
// 配置里面的圆
{
type: 'gauge',
center: ['40%', '50%'], // 饼状图的位置
radius: '35%',
// 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示
// 如果是版本是5，这里可以是360
startAngle: 359.999,
endAngle: 0,
splitNumber: 4,
zlevel: 10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[1, '#fff']
],
width: '100%',
shadowColor: '#CDCDCD', //背景阴影颜色
shadowOffsetX: 0, // X偏移量
shadowOffsetY: 0, // Y偏移量
shadowBlur: 10, // 模糊范围
}
},
splitLine: { //分隔线样式
show: false,
},
axisLabel: { //刻度标签
show: false,
},
axisTick: { //刻度样式
show: false,
},
detail: {
show: false,
},
//仪表盘指针。
pointer: {
// 不显示仪表盘中的指针
show: false,
},
title: {
// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
// 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
offsetCenter: ['0%', "0%"],
color: '#999999',
},
data: [{
name: "2024-05-09\n15:36:25",
}]
},
]
}
myChart.setOption(option);
</script>
Echarts设置饼状图保证你看的明明白白的更多相关文章
- vue中使用echarts画饼状图
echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...
- echarts中饼状图数据太多进行翻页
echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...
- Echarts生成饼状图、条形图以及线形图 JS封装
1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Cre ...
- echarts pie饼状图绑定点击事件
var valueData = [ {value: 33,name: '诊所'}, {value: 29,name: '汽车服务相关'}, {value: 27, name: '洗衣店'}, {val ...
- iOS 饼状图
首先先看一下效果: 一.创建饼状图对象 创建饼状图对象用到类是PieChartView.h, 代码如下: self.pieChartView = [[PieChartView alloc] ini ...
- Android图表库MPAndroidChart(七)—饼状图可以再简单一点
Android图表库MPAndroidChart(七)-饼状图可以再简单一点 接上文,今天实现的是用的很多的,作用在统计上的饼状图,我们看下今天的效果 这个效果,我们实现,和之前一样的套路,我先来说下 ...
- Android开源图表之树状图和饼状图的官方示例的整理
最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...
- DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- ECharts学习（2）--饼状图之南丁格尔图
1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
随机推荐
- #并查集#JZOJ 4223 旅游
题目 多次询问有多少个无序点对\((x,y)\), 满足至少有一条最大边权\(\leq d\)的路径 分析 离线询问,用并查集加边,每次产生的贡献为\(2*siz[x]*siz[y]\) 代码 #in ...
- #区间dp#CF1114D Flood Fill
题目 有一个长度为\(n\)的颜色序列,在游戏前选择一个固定的位置, 若当前轮该位置的颜色为\(x\),那么可以将所有颜色为\(x\)的连通块改为任意颜色, 问最少进行多少轮使得区间\([1,n]\) ...
- OpenHarmony社区运营报告（2023年3月）
本月快讯 • <OpenHarmony 2022年度运营报告>于3月正式发布,2022年OpenAtom OpenHarmony(以下简称"OpenHarmony" ...
- 财务人提高竞争力必备的技能，怎么能少了ta！
从近年来大数据技术的发展趋势和相关产业飞速发展的状态,可以看出当前"数据分析"的热度可以说是有增无减,而且从市场上对数据分析人才的需求缺口也可以看出企业对数据分析的重视程度.未来随 ...
- Redis之父萨尔瓦多·桑菲利波又名安蒂雷斯
萨尔瓦多·桑菲利波又名安蒂雷斯 个人博客连接 嗨,我是萨尔瓦多·桑菲利波,也被称为安提雷斯, 一位居住在卡塔尼亚的意大利计算机程序员. 我于7年1977月2020日出生在坎波贝洛迪利卡塔. 2022 ...
- openGauss Gin 索引
openGauss Gin 索引 概述 GIN(Generalized Inverted Index)通用倒排索引,是首选的文本搜索索引类型.倒排索引对应的列上的数据类型通常是一个多值类型,索引中包含 ...
- 实时 3D 深度多摄像头跟踪 Real-time 3D Deep Multi-Camera Tracking
实时 3D 深度多摄像头跟踪 Real-time 3D Deep Multi-Camera Tracking 论文url https://arxiv.org/abs/2003.11753 论文简述: ...
- HarmonyOS数据管理与应用数据持久化（二）
通过键值型数据库实现数据持久化 场景介绍 键值型数据库存储键值对形式的数据,当需要存储的数据没有复杂的关系模型,比如存储商品名称及对应价格.员工工号及今日是否已出勤等,由于数据复杂度低,更容易兼容不同 ...
- Linux之识别HBA的WWN
一.概念 FC HBA,也即Fibre Channel Host Bus Adapter,光纤通道主机适配器,简称光纤适配器. 在FC网络环境中,主机需要和FC网络.FC存储设备(SAN磁盘阵列)连接 ...
- 面向切面编程AOP[三]（java AnnotationAwareAspectJAutoProxyCreator实现了什么功能）
前言 要查看一个类实现了什么功能,那么查看它继承的接口或者class即可知道,那么其到底继承了什么? 正文 AnnotationAwareAspectJAutoProxyCreator extends ...