Echarts饼图之-玫瑰图数据交互

最新推荐文章于 2023-11-02 23:48:39 发布
最新推荐文章于 2023-11-02 23:48:39 发布
阅读量1.3k 收藏 4
点赞数 1
原文链接：https://www.jianshu.com/u/05f416aefbe1
版权

文档：
https://echarts.apache.org/examples/zh/index.html#chart-type-pie

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>五分钟上手之饼状图</title>
        <!-- 引入 echarts.js -->
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:600px;"></div>
        <script type="text/javascript">
           

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
           
                myChart.setOption({
                  
                        legend: {
                            top: 'bottom'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        series: [
                            {
                                name: '面积模式',
                                type: 'pie',
                                radius: [50, 250],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                data: [
                                    {value: 40, name: 'rose 1'},
                                    {value: 38, name: 'rose 2'},
                                    {value: 32, name: 'rose 3'},
                                    {value: 30, name: 'rose 4'},
                                    {value: 28, name: 'rose 5'},
                                    {value: 26, name: 'rose 6'},
                                    {value: 22, name: 'rose 7'},
                                    {value: 18, name: 'rose 8'}
                                ]
                            }
                        ]
                    
                });
          
        </script>
    </body>
</html>

Echarts饼图之-玫瑰图数据交互

test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入 echarts.js -->
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:600px;"></div>
		<script type="text/javascript">
			var names = []; //类别数组（用于存放饼图的类别）

			var brower = [];
			$.ajax({
				url: "test.json",
				data: {},
				type: 'GET',
				success: function(data) {
					//请求成功时执行该函数内容，result即为服务器返回的json对象
					$.each(data, function(index, item) {
						names.push(item.value); //挨个取出类别并填入类别数组
						brower.push({
							name: item.jobName,
							value: item.jobNum
						});
					});
					hrFun(brower);
				},
			});
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			function hrFun(param) {
				myChart.setOption({
					legend: {
						top: 'bottom'
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					legend: {
						orient: 'vertical',
						x: 'right',
						y: 'bottom',
						textStyle: { //图例文字的样式
							color: '#0b2b5e',
							fontSize: 12
						},
						data: ['在线', '离线']
					},
					series: [{
						name: '面积模式',
						type: 'pie',
						radius: [50, 250],
						center: ['50%', '50%'],
						roseType: 'area',
						label: {
							normal: {
								show: false,
							},
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						itemStyle: {
							borderRadius: 8
						},
						data: brower,
					}]
				});
			}
		</script>
	</body>
</html>

test.json

[{
    "jobNum": 1,
    "jobName": "设备经理"
}, {
    "jobNum": 1,
    "jobName": "电气操作"
}, {
    "jobNum": 0,
    "jobName": "ERP管理"
}, {
    "jobNum": 1,
    "jobName": "安全经理"
}, {
    "jobNum": 1,
    "jobName": "生产经理"
}, {
    "jobNum": 1,
    "jobName": "FKM车间主任"
}, {
    "jobNum": 5,
    "jobName": "操作工"
}, {
    "jobNum": 1,
    "jobName": "卸料员"
}, {
    "jobNum": 2,
    "jobName": "经理"
}, {
    "jobNum": 5,
    "jobName": "成品检测"
}, {
    "jobNum": 2,
    "jobName": "电气管理"
}, {
    "jobNum": 0,
    "jobName": "仓库"
}, {
    "jobNum": 5,
    "jobName": "主任"
}, {
    "jobNum": 1,
    "jobName": "设备副总"
}, {
    "jobNum": 0,
    "jobName": "默认身份"
}, {
    "jobNum": 2,
    "jobName": "设备管理"
}, {
    "jobNum": 1,
    "jobName": "统计"
}, {
    "jobNum": 1,
    "jobName": "组长"
}, {
    "jobNum": 3,
    "jobName": "仪表"
}, {
    "jobNum": 1,
    "jobName": "公用"
}, {
    "jobNum": 6,
    "jobName": "叉车"
}, {
    "jobNum": 1,
    "jobName": "行政管理"
}, {
    "jobNum": 2,
    "jobName": "普工"
}, {
    "jobNum": 1,
    "jobName": "班长"
}, {
    "jobNum": 2,
    "jobName": "人力资源"
}, {
    "jobNum": 1,
    "jobName": "销售"
}, {
    "jobNum": 1,
    "jobName": "聚合技术员"
}, {
    "jobNum": 1,
    "jobName": "工艺"
}, {
    "jobNum": 4,
    "jobName": "分析"
}, {
    "jobNum": 1,
    "jobName": "会计"
}, {
    "jobNum": 5,
    "jobName": "保洁"
}, {
    "jobNum": 1,
    "jobName": "技术副总"
}, {
    "jobNum": 2,
    "jobName": "安全管理员"
}, {
    "jobNum": 1,
    "jobName": "机修管理"
}, {
    "jobNum": 2,
    "jobName": "采购"
}, {
    "jobNum": 2,
    "jobName": "销售后台"
}, {
    "jobNum": 5,
    "jobName": "值班长"
}, {
    "jobNum": 12,
    "jobName": "后处理"
}, {
    "jobNum": 1,
    "jobName": "分析车间主任"
}, {
    "jobNum": 1,
    "jobName": "FEP车间主任"
}, {
    "jobNum": 2,
    "jobName": "工艺管理"
}, {
    "jobNum": 4,
    "jobName": "电工"
}, {
    "jobNum": 0,
    "jobName": "计量"
}, {
    "jobNum": 18,
    "jobName": "聚合"
}, {
    "jobNum": 1,
    "jobName": "仓库管理"
}, {
    "jobNum": 1,
    "jobName": "后勤管理"
}, {
    "jobNum": 1,
    "jobName": "总经理"
}, {
    "jobNum": 1,
    "jobName": "公用工程主任"
}, {
    "jobNum": 1,
    "jobName": "安全总监"
}, {
    "jobNum": 6,
    "jobName": "中控分析"
}, {
    "jobNum": 1,
    "jobName": "成品检测组长"
}, {
    "jobNum": 2,
    "jobName": "副主任"
}, {
    "jobNum": 1,
    "jobName": "单体技术员"
}, {
    "jobNum": 1,
    "jobName": "出纳"
}, {
    "jobNum": 1,
    "jobName": "技术员"
}, {
    "jobNum": 2,
    "jobName": "环保管理员"
}, {
    "jobNum": 2,
    "jobName": "机修"
}, {
    "jobNum": 2,
    "jobName": "生产副总"
}, {
    "jobNum": 6,
    "jobName": "外操"
}, {
    "jobNum": 1,
    "jobName": "总经理助理"
}, {
    "jobNum": 1,
    "jobName": "计量、ERP管理"
}]


在这里插入图片描述

前端王小婷
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts数据可视化饼图(南丁格尔玫瑰图)
m0_50125215的博客
05-14 4143
ECharts图表实现步骤： 从官方示例中找到类似图表，适当修改，引入到HTML页面中。 按照产品需求，来定制图表。 https://echarts.apache.org/zh/option.html#series-pie.label.edgeDistance echarts五个步骤 1. 引入库：echarts.min.js 2. 准备有大小的DOM容器（HTML结构） 3. 实例化echarts对象：echarts.init(DOM容器) 4. 配置echarts
echarts之饼图（2）---玫瑰饼图
wind的博客
07-16 1297
PS相关学习资料链接：Pink老师的教程分解 效果： 1.html结构 <div class="pannel rose"> <h2>玫瑰饼图</h2> <div class="chart"> </div> </div> 2.css自行设置chart位置的宽和高 3.js逻辑： //玫瑰饼图 (function() { var myChart = echarts.init(document.
【Echarts】玫瑰饼图数据交互
最新发布
qq_42294095的博客
11-02 1021
Echarts玫瑰饼图数据交互
Echarts+VUE实现普通饼图+玫瑰图+圆环图
weixin_46447771的博客
07-25 1308
echarts+VUE实现基础饼图、圆环图、玫瑰图三种饼图
ECharts 饼图
12-14
ECharts 还支持南丁格尔图（也称为玫瑰图），它通过扇形的面积而不是弧度来表示数据比例。要实现这个效果，只需在饼图系列中设置 `roseType: 'angle'`。例如： ```javascript series: [{ name: '访问来源', ...
echarts 应用示例 线图 柱状图饼图 地图 异步数据加载
12-09
3. **饼图（Pie Chart）**：饼图用于表示整体与部分之间的关系，ECharts 的饼图支持环形图、南丁格尔玫瑰图等变体。用户可以设置扇区的边框、渐变色、标签、动画效果等，以增强视觉表现力。 4. **地图（Map）**：...
echarts柱状图饼图折线图.zip
07-31
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及散点图等，适用于各类Web数据展示场景。本压缩包“echarts柱状图饼图折线图.zip”包含了一些关于...
Echarts-4.0.4-官方实例-常用图表
04-02
ECharts允许自定义扇区颜色、添加标签、设置渐变色、动画效果，以及使用南丁格尔玫瑰图等。 4. **雷达图（Radar Chart）**： 雷达图，又称蜘蛛图，通过多边形的顶点和边来展示多个变量在同一尺度下的表现。ECharts...
基于ECharts GL的3D图表展示设计与实现
04-15
总结起来，ECharts GL为前端开发者提供了强大的3D图表绘制能力，结合其丰富的配置选项和交互功能，可以帮助我们创建出具有专业水准的数据可视化应用。在实际项目中，开发者应根据需求选择合适的图表类型，合理配置...
62Echarts - 饼图（Nightingale's Rose Diagram）
阿甘兄
04-30 874
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
ECharts绘制玫瑰图
weixin_56814370的博客
04-05 4568
ECharts绘制玫瑰图
vue echarts 玫瑰图
tendernessxy的博客
04-13 1062
vue echarts 玫瑰图
02 【eCharts样式定制系列】玫瑰图、环形饼图、漏斗图自定义各项数据的颜色
X北辰北的博客
01-13 2782
描述 在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCharts进行定制。此次需要定制的图表依次是玫瑰图、环形图、漏斗图。 我们先来看一下UI设计稿中的图表： 其次再看一下eCharts官网默认的图表： 通过和官网的图表demo作对比，我们需要对...
echarts饼图
caoxinjian423的博客
11-15 190
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>饼图</title> <style> #test{ margin: 20px; width: 700px; height: 500px; } <.
pyecharts-动态可视化(8)-饼状图 （基础-富文本-共用-rosetype-内外饼图）
vv_eve的博客
08-13 6910
饼状图的绘制 （基础-富文本-共用-rosetype-内外饼图）4个图的绘制 `label_opts=opts.LabelOpts(formatter="{a|{a}}{abg|}\n{hr|}\n {b|{b}: }{c} {per|{d}%} )` 标签内容格式器，支持**字符串模板和回调函数**两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。 字符串模板 模板变量有： {a}：系列名。 {b}：数据名。 {c}：数据值。 {d}：百分比。
echarts玫瑰图
bidepanm的博客
10-28 990
// 事件处理函数 export default { props: { // 需要传递的数据 data: { type: Array, default() { return []; } } }, data() { return { // echarts对象 myEchar
Laravel5.8+vue 使用echarts 饼图动态获取接口返回数据
鱼儿锅头的博客
01-04 655
Laravel5.8+vue 使用echarts 饼图动态获取接口返回数据 使用echarts在我上一篇文章Laravel5.8+vue 使用echarts 话不多说直接上代码吧 <script> //初始化一个空数组方便存放给饼图的数据 var servicedata=[]; export default { name: "Home", data() { return { myCha
vue echarts玫瑰类型视图
前端小白的博客
10-24 1207
<style> @import "../../css/style.css"; </style> <style scoped> @import "../../css/vue_rose_pie.css"; </style> <template> <div class="pieRound"> <div cl...
echarts饼图3张玫瑰图
08-25
要创建3张玫瑰图的echarts饼图，你可以使用以下代码作为参考： 首先，创建一个基本的echarts饼图模板，指定图表类型为饼图，并设置一些基本配置，如图表的半径、玫瑰图类型和选中效果等。以下是一个示例代码： ```javascript var option = { series: [ { type: "pie", radius: ["35%", "60%"], roseType: "radius", selectedMode: "single", selectedOffset: 10, data: pieData } ] }; ``` 然后，针对每张玫瑰图，你可以对数据和样式进行个性化设置。你可以使用以下代码作为参考： ```javascript var option1 = { series: [ { type: "pie", radius: ["35%", "60%"], roseType: "radius", selectedMode: "single", selectedOffset: 10, data: pieData1 } ] }; var option2 = { series: [ { type: "pie", radius: ["35%", "60%"], roseType: "radius", selectedMode: "single", selectedOffset: 10, data: pieData2 } ] }; var option3 = { series: [ { type: "pie", radius: ["35%", "60%"], roseType: "radius", selectedMode: "single", selectedOffset: 10, data: pieData3 } ] }; ``` 其中，`pieData1`、`pieData2`和`pieData3`是分别对应每张图的数据。 通过以上的代码示例，你可以创建三张玫瑰图的echarts饼图，并根据需要进行个性化设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [echarts 饼图 基本配置](https://blog.csdn.net/qq_38210427/article/details/130360548)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值