Echartjs系列文章之“实心”及“空心”圆饼图

最新推荐文章于 2024-06-14 10:38:15 发布
最新推荐文章于 2024-06-14 10:38:15 发布
阅读量7.2k 收藏 4
点赞数 1
分类专栏： js echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gytha_1/article/details/80731545
版权
js 同时被 2 个专栏收录
45 篇文章 0 订阅
订阅专栏
echart
1 篇文章 0 订阅
订阅专栏

“实心”圆饼图：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '实心环形图';


option = {
    color:['#f5b031','#ff0000','#3CB371','#2E7AC8'],
    series: [
        {
            name:'外圈',
            type:'pie',
            silent:true,
            radius: ['15%', '35%'],
            hoverAnimation:false,
            avoidLabelOverlap:true,
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'ofo'},
                {value:310, name:'mobike'},
                {value:234, name:'hello'},
            ]
        }, {
            name:'内圈',
            type:'pie',
            silent:true,
            radius: [0, '15%'],
            hoverAnimation:false,
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    textStyle:{
                        fontSize:12,
                        color:'#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:0, name:'暂无数据'}
            ],
            color:['#2E7AC8']
        },
    ]
};
option.series[1].data = [{"value":20,"name":1111}];//设置数据


if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

 

“空心”圆饼图：

<!DOCTYPE html>

<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '空心环形图';


option = {
    tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    formatter: function(){
                        return 8973
                    },
                    textStyle:{
                        fontSize:40,
                        color:'green'
                    }
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>
Gytha_1
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter项目实现（空心，实心）饼状图
所学所思
03-01 1443
1、插件安装 依赖：charts_flutter: ^0.9.0 之后使用Pub get安装依赖 2、插件使用 在github上面的例子中，我们的饼图是在 StatelessWidget 里面写的，但是我们实际上经常使用的地方是有状态组件。 其他的就不说了，直接上案例代码哈，大家对此案例如果有什么疑问的话，可以在评论区留言，我们一起讨论哦 /// Donut chart with labels example. This is a simple pie chart with a hole in ///
如何用echarts画一个好看的饼图
m0_54355172的博客
09-10 2863
详细讲解echarts饼图各项属性，从而绘制出满意的饼图
vue3实现echarts 3d饼图
最新发布
weixin_46561899的博客
06-14 453
【代码】vue3实现echarts 3d饼图。
echarts(3)——饼图
qq_46285250的博客
07-08 670
案例 注释代码 源码地址：https://www.makeapie.com/editor.html?c=x1zOZDoSxq option = { backgroundColor: '#273454', color: ['#FF9966', '#FFFFCC', '#0099CC', '#99CC33', '#99CCCC'], tooltip: { trigger: 'item', formatter: '{b} : {c}个(占比{d}%)',
echarts---圆饼图
weixin_45228198的博客
04-19 1471
配置图表显示图表配置项option绘制圆饼图title 详细配置legend 详细配置饼图配置其他 显示图表 <script src="/static/js/echarts.min.js"></script> <script> //DOM 容器 container = document.getElementById("chart"); //初始化图表 var chart = echarts.init(container) //配置图表 json对象 var
eacharts组件中饼图颜色分别修改颜色
qianluo111的博客
04-09 1267
就一句话简单易懂 在eacharts中API的配置中有一个color属性只需要将color加上就能改变每一个饼图的颜色 例：color:["rgb(84,112,198)","rgb(145,204,117)","rgb(250,200,88)"], echarts(data) { this.$echarts.init(document.getElementById('main_right')).setOption({ title: { .
js柱形图圆饼折线图
06-05
本话题主要探讨如何使用JavaScript来创建柱形图、圆饼图和折线图。这些图表可以帮助我们直观地展示复杂数据，使用户更容易理解。下面将详细介绍这三种图表的实现方法。 首先，柱形图是一种常见的统计图表，用于比较...
html+js+highcharts绘制圆饼图表的简单实例
12-10
实例如下： <!DOCTYPE ...<... <head>...html+js+highcharts绘制圆饼图表的简单实例</title> <script type="te
C# 控件Chart的 圆饼图百分比
02-14
1. 开发环境： 基于 VS2019 基于C#语言 ... 用C# 控件Chart 画出 圆饼图百分比，很直观 3、源代码解释地址： https://blog.csdn.net/hgaohr1021/article/details/129023432?spm=1001.2014.3001.5502
jquery插件canvaspercent.js实现百分比圆饼效果
01-19
在仪表盘的任务增多同时，列表页的百分比圆环或圆饼也随之增多，于是顺手在仪表盘的基础上，封装了一个小小的jquery插件（jq-canvaspercent.js），暂且... * 利用canvas绘图实现百分比percent圆饼图 */ (function($){
递进图示之圆饼图.pptx
09-26
递进图示之圆饼图.pptx,5cfb43e08fc2673.pptx
echarts 饼图 中间 画圈 ＋ 文字
山东理工1134
04-02 4162
echarts
echarts的3D饼图
weixin_45859470的博客
12-01 2738
免费--echarts的3D饼图--附有代码文件
使用Echarts饼图时将图例图标变成圆形
weixin_55708429的博客
04-12 3516
在echarts官方实例里，图例都是方形，今天碰到需求，需要是圆形图标，在此记录一下。直接在legend中设置。
EChart创建圆形空心圈饼图
ubuntulinuxjava的专栏
04-29 2246
本文将使用 EChart 创建圆形空心圈饼图。
Echarts饼状图属性大全
m0_49789433的博客
05-10 3265
1、标题设置 title: { text: '学生生源地来源分布图', subtext: '模拟数据', // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） x: 'center', // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center'
【Echarts】用echarts绘制饼图
m0_55394328的博客
12-06 5806
echarts（Enterprise Charts，商业级数据图表）是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
echarts的饼状图、圆环图、南丁格尔图、散点图、数据转换、
m0_68618659的博客
08-22 2905
饼状图不需要配置坐标轴，而是把数据名称和值都写在系列中，并且value值不需要是百分比数据，echarts会根据所有数据的value,按比例分配他们在饼图中对应的弧度。
python绘制圆饼图、柱状图
05-30
好的，以下是Python绘制圆饼图和柱状图的示例代码： 圆饼图： ```python import matplotlib.pyplot as plt # 设置数据和标签 labels = ['A', 'B', 'C', 'D'] sizes = [15, 30, 45, 10] # 绘制圆饼图 plt.pie(sizes, labels=labels, autopct='%1.1f%%') # 设置图表标题 plt.title('Pie Chart') # 显示图表 plt.show() ``` 在这个示例中，我们使用matplotlib库的pie函数绘制了圆饼图，并设置了数据和标签。autopct参数表示显示百分比，'%1.1f%%'表示保留一位小数。最后，我们设置了图表标题并使用show函数显示图表。你可以根据需要修改代码以生成不同的圆饼图。 柱状图： ```python import matplotlib.pyplot as plt # 设置数据和标签 labels = ['A', 'B', 'C', 'D'] values = [15, 30, 45, 10] # 绘制柱状图 plt.bar(labels, values) # 设置图表标题和轴标签 plt.title('Bar Chart') plt.xlabel('Category') plt.ylabel('Value') # 显示图表 plt.show() ``` 在这个示例中，我们使用matplotlib库的bar函数绘制了柱状图，并设置了数据和标签。最后，我们设置了图表标题和轴标签，并使用show函数显示图表。你可以根据需要修改代码以生成不同的柱状图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值