使用echarts画饼状图

最新推荐文章于 2024-06-29 00:28:00 发布
最新推荐文章于 2024-06-29 00:28:00 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： echarts 文章标签： echarts 饼状图 pie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Min_Monk/article/details/89395389
版权

笔记整理，直接上代码。

html页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/echarts.js"></script>
    <script src="../js/demo3.js"></script>
    <title>饼状图Demo</title>
</head>

<body>
    <div id="container" style="border: 1px solid #33acfb; width: 800px; height: 400px;"></div>

</body>

</html>

js代码

$(function () {
    var data = [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
    ];
    drawPiePic('container', data)
})

/**
 * 画饼状图
 * @param {*} documentId 节点ID
 * @param {*} data 填充数据
 */
function drawPiePic(documentId, data) {
    var legendData = [];
    for(var item in data){
        legendData.push(data[item].name);
    }

    var myChart = echarts.init(document.getElementById(documentId));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: legendData
        },
        series: [
            {
                // name: '访问来源',
                type: 'pie',
                radius: '25%',
                center: ['50%', '60%'],
                data: data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

效果图：

Min_Monk
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用Echarts绘制饼状图
Kepler_II的博客
03-18 1441
在项目网站的网页中，有这样一幅图： 心血来潮，想使用百度Echarts来绘制一下，可是没能绘制得完全一样，Echarts饼状图的label不能在图形下面放成一行，最后的效果是这样子的： 鼠标移动到items上，可动态显示百分比： 另外，还了解到了一种特殊的饼状图：南丁格尔图，就是用扇形半径的大小来表示百分比，对于相差比较大的items，看起来会有些不平衡； 最后，上代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l
ECharts画饼图实例
gznc_pcc的博客
05-03 492
首先要到官网下载两个js： （1） echarts.js （2） jquery.js Main.html页面 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt...
Flutter绘制带指引线百分比饼状图详解
最新发布
weixin_46418118的博客
06-29 467
【代码】Flutter绘制带指引线百分比饼状图详解。
echarts画饼图
weixin_43360488的博客
06-20 137
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="echarts.min (1).js"> </script> </head> <body> <img src="../Picture/1.jp
【Echarts】用echarts绘制饼图
m0_55394328的博客
12-06 5837
echarts（Enterprise Charts，商业级数据图表）是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
使用Echarts插件画饼状图
08-14
NULL 博文链接：https://sunshineminyan.iteye.com/blog/2318859
python使用matplotlib画饼状图
01-21
本文实例为大家分享了python使用matplotlib画饼状图的具体代码，供大家参考，具体内容如下 代码与详细注释 from matplotlib import pyplot as plt #调节图形大小，宽，高 plt.figure(figsize=(6,9)) #定义饼状图...
在Echarts 地图上画饼图
06-26
首先，ECharts是一个由百度公司开发的开源JavaScript图表库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及各种地图等，适用于网页数据可视化。ECharts的设计理念是易用、灵活且强大，支持多种数据格式和交互...
利用html5 canvas动态画饼状图的示例代码
09-28
在画饼状图之前，我们需要准备数据。例如，数据可能包含多个产品及其对应的销售量。如文中所示，数据结构如下： ```javascript [ {"product": "产品1", "sales": [销售额数组]}, {"product": "产品2", "sales": ...
Obiee+echarts实例之饼图(1)
u012451141的博客
11-10 190
一、效果图 1、这是用Obiee + echarts做出来的饼图，效果如图： 2、数据（仅供参考），如图：   二、代码解析 //前缀 &lt;!-- 引入echarts文件（注意路径） --&gt; &lt;scriptsrc="/analyticsRes/echarts/dist/echarts.js"&gt;&lt;/script&gt; &lt;!-- 为ECha...
echarts如何画饼图
qq_42566295的博客
07-20 1153
首先从echarts官网上下载echarts.js文件 &lt;script src="echarts.js"&gt;&lt;/script&gt; &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &amp
echarts图表 饼图
07-21
echarts图表 饼图
三维饼图插件——cubicPieChart-1.0.min.js
03-12
echarts没有三维饼图，但是有时候又需要在前端绘制三维饼图怎么办？这个时候可以考虑用threejs来实现功能。 使用示例： var cubic = new Cubic.PieChart("WebGL-output", { width: 400, height: 300, thickness: 5,//厚度 radius: 30,//半径 colors: [0xffffff, 0xff00ff, 0xffff00, 0x0000ff,0x5F9EA0,0x00FF7F],//颜色数组16进制的数组 data: [12, 13, 5, 50, 23, 54],//数据数组 startAngle: 0,//起始角 background: 0x00ffff,//背景色，16进制数字 opacity: 1 //背景透明度 }); console.log(cubic.getPosition()); console.log(cubic.getRotation()); // cubic.setPosition(0, 20, 0); // cubic.setRotation(0, 0, 0); // cubic.remove();
源码 - flask + Pandas + echarts 使用饼状图等将二手房数据进行分析+可视化
01-09
一、实战场景 二、知识点 python 基础语法 python 文件读写 pandas 数据处理 flask web 框架 echarts 图表 bootstrap jinja 模版 三、菜鸟实战 初始化 Flask 框架，设置路由 各行政区房屋数量柱状图分析 区域二手房房源朝向分布情况 二手房单价最高Top10 图 echarts 渲染房屋数量柱状图 运行结果 运行截图 数据示例
2.Echart----绘制饼图
lazy_tomato的博客
04-15 7973
EChart 超级详细的饼图绘制逻辑，带你从零到有，一步一步学习EChart的绘制
echarts_饼状图.html
weixin_42193179的博客
03-22 1639
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>饼状图</title> <script src="echarts.js"></script> </head> <body>...
【Echarts】- 制作饼图
m0_55960697的博客
04-22 4104
效果大概是这样 步骤分析 ​​​​​​​ 封装好函数，为后续传入真实数据做准备 初始化echarts 设置配置项，空的 option 即可 创建图表 查找官方示例 按需求，自定义配置图表 第一步：echarts基本步骤 function pieChart() { let myChart = echarts.init(document.querySelector('.pie')); let option = {}; ...
ECharts饼图
萤烛末光,增辉日月
09-04 1928
了解和使用ECharts饼图，包括基础设置、环形图、嵌套环形图、南丁格尔玫瑰图、与折线图联动等图表展现。
echarts饼图
chen2745213271的博客
02-25 2026
如何在页面制作一个简易的饼图，首先找到一个制作饼图的插件，这里我使用的是echarts ，然后使用插件添加各种参数就可以很快制作一个简易的饼图，下面将简单的制作一个饼图演示。 首先肯定是先引入插件，关于插件可以到echarts官网下载。 然后在HTML里写一个容器并初始化，这个容器需要一开始赋予高度和宽度，使得初始化的时候将数据带入节点，除非后面在script里使用高度与宽度的参数。如下图 然后使用组件配置饼图的各种数据，使用一个对象将组件包括在一起最后将这个配置好的对象添加初始化好的容器中，下面
vue2使用echarts画饼状图
06-03
要在Vue2中使用echarts画饼状图，可以按照以下步骤进行： 1. 安装echarts 在项目中安装echarts，可以使用npm或yarn进行安装，命令如下： ``` npm install echarts --save ``` 或者 ``` yarn add echarts ``` 2. 引入echarts 在需要使用echarts的组件中引入echarts，可以使用以下方式： ```javascript import echarts from 'echarts' ``` 3. 创建echarts实例 在组件的mounted钩子函数中创建echarts实例，代码如下： ```javascript mounted () { // 基于准备好的dom，初始化echarts实例 const myChart = echarts.init(this.$refs.chart) // 绘制图表 myChart.setOption(this.chartOptions) } ``` 其中，this.$refs.chart是一个DOM元素，用于渲染echarts图表。this.chartOptions是一个包含echarts配置选项的对象，可以根据需要进行设置。 4. 设置饼状图的配置选项 在data中定义一个包含饼状图数据的数组，然后在chartOptions中设置饼状图的配置选项，代码如下： ```javascript data () { return { pieData: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] } }, chartOptions: { title: { text: '饼状图示例', subtext: '数据来自网络' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '50%', data: this.pieData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } ``` 其中，title、tooltip、legend和series是饼状图的配置选项，可以根据需要进行设置。在series中设置data为之前定义的pieData数组，用于展示饼状图数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值