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.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
随机推荐
- #差分约束系统，最长路，线段树优化建边#洛谷 3588 [POI2015] PUS
题目 给定一个长度为\(n\)的正整数序列 \(a\) ,每个数都在 \(1\) 到 \(10^9\) 范围内, 告诉你其中 \(s\) 个数,并给出 \(m\) 条信息,每条信息包含三个数 \(l, ...
- #NTT，原根#洛谷 3321 JZOJ 4051 [SDOI2015]序列统计
题目 分析 首先朴素dp方程 设\(dp[i][j]\)表示\(i\)个数的数列乘积为\(j\)的方案 那么\(dp[i][j*a[k]\bmod m]=itself+dp[i-1][j]\) 这可以 ...
- #博弈论#HDU 2516 取石子游戏
题目 \(n\)个石子,两人轮流取.先取者第1次可以取任意多个, 但不能全部取完.以后每次取的石子数不能超过上次取子数的2倍. 取完者胜.先取者负输出"Second win".先取 ...
- 【直播回顾】OpenHarmony知识赋能五期第五课——多媒体子系统之视频解读
5月19日晚上19点,知识赋能第五期第五节课<OpenHarmony标准系统多媒体子系统之视频解读>,在OpenHarmony开发者成长计划社群内成功举行. 本期课程,由深开鸿资深技术专家 ...
- 深度剖析 Spring 框架在 Java 应用开发中的优势与应用
Spring 是用于企业 Java 应用程序开发的最流行的应用程序开发框架.全球数百万开发人员使用 Spring Framework 创建高性能.易于测试和可重用的代码.Spring Framewor ...
- 第十四篇：JavaScript基础
一.CSS内容补充之position 10.position:fixed:固定div在页面的一个位置: top:0; right:0; left:0; position:absolute + rela ...
- 重新点亮shell————sed的替换[十]
前言 简单介绍一下sed 和 awk. 正文 这两个和vim的区别: vim 是交互式和 他们是非交互式 vim是文件操作模式与他们是行交互模式 sed sed 的 模式空间. sed的基本工作方式是 ...
- redis 简单整理——主从拓扑图[二十二]
前言 Redis的复制拓扑结构可以支持单层或多层复制关系,根据拓扑复杂性 可以分为以下三种:一主一从.一主多从.树状主从结构,下面分别介绍. 正文 一主一从结构 一主一从结构是最简单的复制拓扑结构,用 ...
- 面试官：说一说CyclicBarrier的妙用！我：这个没用过
写在开头 面试官:同学,AQS的原理知道吗? 我:学过一点,抽象队列同步器,Java中很多同步工具都是基于它的... 面试官:好的,那其中CyclicBarrier学过吗?讲一讲它的妙用吧 我:啊,这 ...
- ES6中对象新增了哪些扩展?
一.属性的简写 ES6中,当对象键名与对应值名相等的时候,可以进行简写 const baz = {foo:foo}// 等同于const baz = {foo} 方法也能够进行简写 const o = ...