EChart创建圆形空心圈饼图

转载已于 2023-10-29 08:27:40 修改 · 2.5k 阅读

文章标签：

#饼图 #echarts

于 2019-04-29 08:42:20 首次发布

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用ECharts创建圆形空心圈饼图，通过详细代码示例展示配置项，包括设置图表尺寸、图例、数据系列及样式等，帮助读者快速掌握ECharts饼图的定制技巧。

原文地址：EChart创建圆形空心圈饼图 - 人人编程网

关于EChart的使用就不再赘述，直接上代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>ECharts3 学习</title>

<script src="../../public/js/echarts3/echarts.js"></script>

</head>

<body>

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({

tooltip: {

trigger: 'item',

formatter: "{a} <br/>{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

x: 'left',

data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

},

series: [

{

name:'访问来源',

type:'pie',

radius: ['50%', '70%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

},

labelLine: {

normal: {

show: true

}

},

data:[

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

]

}

]

});

</script>

</body>

</html>

效果如下图：

EChart创建圆形空心圈饼图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

空城.依旧

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Echarts 展示——实现空心圆的绘制

虎康的博客

07-09

581

基于准备好的 DOM，初始化 echarts 实例。// 使用刚指定的配置项和数据显示图表。'空心圆绘制......”'如图所示，绘制空心圆。

ECharts饼图实现引导线结尾加空心圆环

qq_36998298的博客

11-20

1609

首先上结果图:设计给的样例图里每个折线结尾有一个空心环, echarts原生是没有这个设置的参数的,需要用series.label.rich 使用富文本加入一个空内容,空内容画一个边框,边框画圆,再用padding微调所有的位置,从而实现环与线连接.需要注意ECharts V5和V4相同代码会导致结果不同, padding正负号两个版本处理不一致,

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

优快云-Ada助手 2023.10.30
哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)增加条理清晰的目录；(2)增加除了各种控件外，文章正文的字数；(3)提升标题与正文的相关性。

第二节Echarts空心饼图

zjltianxin的博客

11-02

694

效果图。

vue2.0 自定义饼状图 (Echarts)组件的方法

12-28

1、自定义图表组件 Echarts.vue   [removed] export default { props: { // 样式 echartStyle: { type: Object, default(){ return {} } }, // 标题文本 titleText: { type: St

echarts_饼状图-空心

qq_38260470的博客

04-07

636

【代码】echarts_饼状图-空心。

echarts 饼图-空心饼状图

qq_38260470的博客

03-25

897

【代码】echarts 饼图。

精选资源

echarts 3d饼图资源

05-12

它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持交互功能和多种自定义选项，使得开发者能够创建出美观且功能强大的数据展示效果。在本资源中，重点是 ECharts 的 3D 饼图。 3D 饼图是 ECharts 提供...

Echart图表教程：掌握饼图、折线图、柱状图制作

- **数据可视化**：在一些需要详细展示数据背后故事的场景下，ECharts 可以用柱状图、折线图、饼图等不同的视觉组件来呈现信息，让数据可视化更加生动和易于理解。通过上述知识的掌握，可以为开发人员提供一个强大...

使用vue+echart完成百分比图，空心饼图

来了波，兄嘚

09-10

3611

使用echart完成百分比图效果图：上代码：安装依赖： npm install echarts --save import echarts from “echarts”; <template> <div> <div id="demo"></div> </div> </template> <script> export default { data() { return { op

PHP中使用GD库创建圆形饼图的例子

10-25

本例中，我们将探讨如何使用GD库在PHP中创建一个圆形饼图，也就是扇形统计图。首先，创建画布是创建任何图像的第一步。在PHP中，`imagecreatetruecolor()`函数用于在内存中创建一个新的真彩色图像，它接受两个参数...

echarts圆形图源文件

02-22

echarts图源文件，圆形图，文本成放射性向外辐射，可用echarts在线工具打开

Echart--圆型图

disuiniang7601的博客

03-02

346

效果: 设置数据: var option3 = { title: { text: '天气情况统计', subtext: '虚构数据', left: 'center' }, tooltip: {/*鼠标经过视图，显示数据*/ trigge...

echarts的legend展示为空心圆

xzy__007的博客

12-07

1367

复制代码去Echarts的示例里粘贴进去即可看到效果效果图 option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Se...

echarts初始化空心饼图（pie）

开发路上的AZhe

03-28

3049

饼图相对比较简单，很多效果在官网上就能直接找到 ps：饼图也可以多series，然后通过zlevel属性来控制层级显示完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport".

Echarts中间空心饼状图

weixin_40295491的博客

11-29

7207

Echarts中间空心饼状图记录下写Echarts留下的记录，都是直接照搬的Echarts官网上的素材官网：https://www.echartsjs.com/examples/zh/index.html <template> <div id="zdry-chart"></div> </template> <script> ...

echarts 实现空心饼状图中间展示选中块内容带默认展示文本效果

qq_45560350的博客

05-22

2852

【代码】echarts 实现空心饼状图中间展示选中块内容带默认展示文本效果。

echart——圆角饼图

等花开一起压花路

02-10

3080

【代码】echart——圆角饼图。

Echart饼图-圆形图修改重新绘制

suxuelian的博客

03-27

1393

首先看看默认效果：代码如下： option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], .

使用Pyecharts绘制镂空环饼图（附完整代码）

lingyaoJUN的博客

12-14

1305

在数据可视化中，饼形图是一种常用的图表类型，可以展示不同类别的占比关系。在本篇博客中，将使用Python和pyecharts库来绘制中药材消费者画像数据的镂空环饼图。...

echart 饼状图label在饼图中间显示

最新发布

05-23

### 如何在ECharts中将饼状图的标签显示在饼图中心要在ECharts中实现饼状图的标签居中显示，可以通过配置 `series` 中的 `label` 和 `labelLine` 属性来完成。具体来说，可以关闭默认的标签连线 (`labelLine`) 并调整标签的位置使其位于饼图的中心。以下是具体的实现方法： #### 1. 关闭标签线并设置标签位置通过设置 `label.lineStyle.show = false` 来隐藏连接线，并使用 `label.position = 'inner'` 将标签放置到饼图内部[^2]。为了进一步使标签居中于整个饼图而非单个扇区，还需要结合 `formatter` 函数自定义标签内容。 #### 2. 使用 formatter 自定义标签内容如果需要在饼图正中央显示特定的文字（比如总和或其他统计信息），可以在 `label.formatter` 中指定文字内容[^3]。下面是完整的代码示例： ```javascript // HTML部分 <div id="main" style="width: 600px; height: 400px;"></div> // JavaScript部分 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option = { series: [ { type: 'pie', radius: ['50%', '70%'], // 设置内外半径比例 label: { normal: { position: 'center', // 标签置于圆心 show: true, textStyle: { fontSize: '16', fontWeight: 'bold' }, formatter: '{total|{d}%}' // 显示百分比作为中心文本 } }, labelLine: { normal: { show: false // 不显示指向扇形区域的指示线 } }, data: [ { value: 40, name: 'A' }, { value: 60, name: 'B' } ] } ], graphic: [{ type: 'text', left: 'center', top: 'middle', style: { text: 'Total\n100%', textAlign: 'center', fill: '#333', font: 'bolder 14px Microsoft YaHei' } }] }; myChart.setOption(option); ``` 此代码片段创建了一个带有中心标签的饼图，其中心展示了总计数值或占比情况[^1]。 #### 注意事项 - 如果想让中心显示固定的内容而不是动态计算的结果，则可通过 `graphic.text` 添加额外的静态文本层。 - 调整字体大小、颜色等样式参数以匹配整体设计风格。