EChart创建圆形空心圈饼图

转载 已于 2023-10-29 08:27:40 修改 · 2.5k 阅读 · 1
文章标签：

#饼图 #echarts

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

<!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创建圆形空心圈饼图

 

第二节Echarts空心饼图
zjltianxin的博客
11-02 666
效果图。
echarts_饼状图-空心
qq_38260470的博客
04-07 611
【代码】echarts_饼状图-空心。
echarts 饼图-空心饼状图
qq_38260470的博客
03-25 846
【代码】echarts 饼图。
Echart--圆型图
disuiniang7601的博客
03-02 345
效果: 设置数据: var option3 = { title: { text: '天气情况统计', subtext: '虚构数据', left: 'center' }, tooltip: {/*鼠标经过视图，显示数据*/ trigge...
echarts的legend展示为空心圆
xzy__007的博客
12-07 1311
复制代码去Echarts的示例里粘贴进去即可看到效果 效果图 option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Se...
echarts 3d饼图资源
05-12
它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持交互功能和多种自定义选项，使得开发者能够创建出美观且功能强大的数据展示效果。在本资源中，重点是 ECharts 的 3D 饼图。 3D 饼图是 ECharts 提供...
Echart图表教程：掌握饼图、折线图、柱状图制作
- **数据可视化**：在一些需要详细展示数据背后故事的场景下，ECharts 可以用柱状图、折线图、饼图等不同的视觉组件来呈现信息，让数据可视化更加生动和易于理解。 通过上述知识的掌握，可以为开发人员提供一个强大...
使用vue+echart完成百分比图，空心饼图
来了波，兄嘚
09-10 3593
使用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饼图各个板块之间的空隙如何实现
01-22
本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 itemStyle: { normal: { borderWidth: 1, // 间距的宽度 borderColor: '#fff', //背景色 } }, 代码层级 效果图 到此这篇关于echarts饼图各个...
echarts圆形图源文件
02-22
echarts图源文件，圆形图，文本成放射性向外辐射，可用echarts在线工具打开
echarts初始化空心饼图（pie）
开发路上的AZhe
03-28 3042
饼图相对比较简单，很多效果在官网上就能直接找到 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 展示——实现空心圆的绘制
最新发布
虎康的博客
07-09 526
基于准备好的 DOM，初始化 echarts 实例。// 使用刚指定的配置项和数据显示图表。'空心圆绘制......”'如图所示，绘制空心圆。
Echarts中间空心饼状图
weixin_40295491的博客
11-29 7198
Echarts中间空心饼状图 记录下 写Echarts留下的记录，都是直接照搬的Echarts官网上的素材 官网：https://www.echartsjs.com/examples/zh/index.html <template> <div id="zdry-chart"></div> </template> <script> ...
echarts 实现空心饼状图 中间展示选中块内容 带默认展示文本效果
qq_45560350的博客
05-22 2826
【代码】echarts 实现空心饼状图 中间展示选中块内容 带默认展示文本效果。
echart——圆角饼图
等花开一起压花路
02-10 3062
【代码】echart——圆角饼图。
Echart饼图-圆形图修改重新绘制
suxuelian的博客
03-27 1362
首先看看默认效果： 代码如下： option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], .
使用Pyecharts绘制镂空环饼图（附完整代码）
lingyaoJUN的博客
12-14 1265
在数据可视化中，饼形图是一种常用的图表类型，可以展示不同类别的占比关系。在本篇博客中，将使用Python和pyecharts库来绘制中药材消费者画像数据的镂空环饼图。...
17Echarts - 折线图（Log Axis）
阿甘兄
04-30 1817
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值