当前位置：首页 > news >正文

【Echarts】玫瑰饼图数据交互

news 2025/9/16 10:26:33

在学习echarts玫瑰饼图的过程中，了解到三种数据交互的方法，如果对您也有帮助，不胜欣喜。

一、官网教程

https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple

（该教程数据在代码中）

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {legend: {top: 'bottom'},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},series: [{name: 'Nightingale Chart',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' }]}]
};option && myChart.setOption(option);

二、网友分享教程

1、http://https://www.dandelioncloud.cn/article/details/1580424652969463810

2、https://blog.csdn.net/weixin_44763569/article/details/118681932

（该教程通过push将外部数值放入数组中使用）

<!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>

[{"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管理"
}]

三、课程视频教程

https://www.bilibili.com/video/BV14u411D7qK?p=50&vd_source=841fee104972680a6cac4dbdbf144b50

（通过设置echarts、axios接收数据）

主要涉及以下5个文件：

1、three.json，后台数据文件之一，注意value和name顺序！

{"chartData":[{"value":1000,"name":"A牌"},{"value":2000,"name":"B牌"},{"value":3000,"name":"C牌"},{"value":2500,"name":"D牌"},{"value":1500,"name":"E牌"}]
}

2、three.js，后台配置文件之一

let express=require("express")
let router=express.Router()
let threeData=require("../mock/three.json")router.get("/data",(req,res)=>{res.send({msg:"我是three的路由地址",chartData:threeData})
})module.exports=router;

3、index.js，后台路由配置文件之一

let express=require("express")
let app=express();//设置跨域
app.use(function(req,res,next){res.header('Access-Control-Allow-Origin','*');res.header('Access-Control-Allow-Headers','Content-Type,Content-Length, Authorization, Accept,X-Requested-with , yourHeaderFeild');res.header('Access-Control-Allow-Methods','PUT,POST,GET, DELETE,OPTIONS');next();
})
//引用路由文件
let chartOne=require("./router/one")
let chartTwo=require("./router/two")
let chartThree=require("./router/three")
let chartFour=require("./router/four")//使用中间件来配置路由
app.use("/one",chartOne)
app.use("/two",chartTwo)
app.use("/three",chartThree)
app.use("/four",chartFour)app.listen(8888)

4、homePage.vue，前端文件，引用组件

//以下只摘选script代码，其他略
<script>
//引用组件
import ItemPage from "@/components/itemPage.vue"import ItemOne from "@/components/itemOne.vue"
import ItemTwo from "@/components/itemTwo.vue"
import ItemThree from "@/components/itemThree.vue"
import ItemFour from "@/components/itemFour.vue"
import MapPage from "@/components/mapPage.vue"
//引用inject
import {inject} from "vue"export default{components:{ItemPage,ItemOne,ItemTwo,ItemThree,ItemFour,MapPage},setup(){//测试使用echartslet $echarts=inject("echarts")      //测试使用axioslet $http=inject("axios")console.log($echarts)console.log($http)}
}
</script>

5、itemThree.vue，前端组件文件，获取后端数据

<template><div><h2>图表3</h2><div class="chart" id="threeChart">分析图</div></div>
</template>
<script>
import{inject,onMounted,reactive} from "vue"
export default {setup(){//1、设置echarts设置axios 创建接受请求的变量let $echarts=inject("echarts")let $http=inject("axios")//2、获取数据async function getState(){data=await $http({url:"/three/data"});}let data=reactive({})//生成动态图表//1、在dom加载完毕后动态展示图表onMounted(()=>{//2、发送请求getState().then(()=>{console.log("饼状图",data.data)//初始化echartslet myChart=$echarts.init(document.getElementById("threeChart"))myChart.setOption({legend:{//设置图例top:"bottom"//放到最下面},series:[{type:"pie",//饼图radius:[10,100],//内半径，外半径center:["50%","45%"],//饼图中心坐标（横，纵）roseType:"area",//设置成玫瑰图itemStyle:{borderRadius:10//内外圆角半径},data:data.data.chartData.chartData}]})})return{getState,data}        })      }
}
</script>
<style>
h2{/*48像素*/height: 0.6rem;color: #fff;line-height: 0.6rem;text-align: center;font-size: 0.25rem;
}
.chart{/*高度*/height: 4.5rem;background-color:rgba(191, 255, 0, 0.3);
}
</style>

【Echarts】玫瑰饼图数据交互

在学习echarts玫瑰饼图的过程中，了解到三种数据交互的方法，如果对您也有帮助，不胜欣喜。一、官网教程 https://echarts.apache.org/examples/zh/editor.html?cpie-roseType-simple （该教程数据在代码中） import *…...

编程日记 2023/11/3 6:58:07

k8s、pod

Pod k8s中的port【端口：30000-32767】 port ：为Service 在 cluster IP 上暴露的端口 targetPort：对应容器映射在 pod 端口上 nodePort：可以通过k8s 集群外部使用 node IP node port 访问Service containerPort：容…...

编程日记 2023/11/3 6:57:07

一天掌握python爬虫【基础篇】涵盖 requests、beautifulsoup、selenium

大家好，我是python222小锋老师。前段时间卷了一套 Python3零基础7天入门实战以及1小时掌握Python操作Mysql数据库之pymysql模块技术近日锋哥又卷了一波课程，python爬虫【基础篇】涵盖 requests、beautifulsoup、selenium，文字版视频版。1…...

编程日记 2023/11/3 6:56:05

睿趣科技：想知道开抖音小店的成本

随着互联网的发展，越来越多的人开始尝试通过开设网店来创业。抖音作为目前最受欢迎的短视频平台之一，也提供了开店的功能。那么，开一家抖音小店需要多少成本呢？ 首先，我们需要了解的是，抖音小店的开店费用是…...

编程日记 2023/11/3 6:55:04

python项目部署代码汇总：目标检测类、人体姿态类

一、AI健身计数 1、图片视频检测 （cpu运行）： 注：左上角为fps，左下角为次数统计。 1.哑铃弯举：12，14，16 详细环境安装教程：pyqt5AI健身CPU实时检测mediapipe 可视化界面…...

编程日记 2023/11/3 6:54:03

力扣每日一题92：反转链表||

题目描述： 给你单链表的头指针 head 和两个整数 left 和 right ，其中 left < right 。请你反转从位置 left 到位置 right 的链表节点，返回反转后的链表。示例 1： 输入：head [1,2,3,4,5], left 2, right 4 输…...

编程日记 2023/11/3 6:53:02

Vue+OpenLayers从入门到实战进阶案例汇总目录，兼容OpenLayers7和OpenLayers8

本篇作为《VueOpenLayers入门教程》和《VueOpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合…...

编程日记 2023/11/3 6:52:01

C#中使用LINQtoSQL管理SQL数据库之添加、修改和删除

目录一、添加数据二、修改数据三、删除数据四、添加、修改和删除的源码五、生成效果 1.VS和SSMS原始记录 2.删除ID2和5的记录 3.添加记录ID2、5和8 4.修改ID3和ID4的记录用LINQtoSQL管理SQL Server数据库时，主要有添加、修改和删除3种操作。项目中创…...

编程日记 2023/11/3 6:51:00

飞致云及其旗下1Panel项目进入2023年第三季度最具成长性开源初创榜单

2023年10月26日，知名风险投资机构Runa Capital发布2023年第三季度ROSS指数（Runa Open Source Startup Index）。ROSS指数按季度汇总并公布在代码托管平台GitHub上年化增长率（AGR）排名前二十位的开源初创公司和开源项目。…...

编程日记 2023/11/3 6:49:59

Maven实战-私服搭建详细教程

Maven实战-私服搭建详细教程 1、为什么需要私服首先我们为什么需要搭建Maven私服，一切技术来源于解决需求，因为我们在实际开发中，当我们研发出来一个公共组件，为了能让别的业务开发组用上，则搭建一个远程仓库很有…...

编程日记 2023/11/3 6:48:58

uniapp-自定义表格，右边操作栏固定

uniapp-自定义表格，右边操作栏固定在网上找了一些，没找到特别合适的，收集了一下其他人的思路，基本都是让左边可以滚动，右边定位，自己也尝试写了一下，有点样式上的小bug，还在尝试修…...

编程日记 2023/11/3 6:47:57

基于Electron27+React18+ArcoDesign客户端后台管理EXE

基于electron27.xreact18搭建电脑端exe后台管理系统模板 electron-react-admin 基于electron27整合vite.jsreact18搭建桌面端后台管理程序解决方案。前几天有分享electron27react18创建跨平台应用实践，大家感兴趣可以去看看。 https://blog.csdn.net/yanxinyun1990…...

编程日记 2023/11/3 6:46:57

QT5交叉编译保姆级教程（arm64、mips64）

什么是交叉编译？ 简单说，就是在当前系统平台上，开发编译运行于其它平台的程序。比如本文硬件环境是x86平台，但是编译出来的程序是在arm64架构、mips64等架构上运行本文使用的操作系统：统信UOS家庭版22.0 一、安装…...

编程日记 2023/11/3 6:44:54

python计算图片的RGB值，可以作为颜色的判断条件 import colorsys import PIL.Image as Imagedef get_dominant_color(image):max_score 0.0001dominant_color Nonefor count,(r,g,b) in image.getcolors(image.size[0]*image.size[1]):# 转为HSV标准saturation c…...

编程日记 2023/11/3 6:43:53

oracle 日期

日期加减 Oracle中日期进行加减可以使用多种方式，以下介绍三种一种是针对天的操作，适用于对日，时，分，秒的操作， 一种是对月的操作，适用于月，年的操作， 一种是使用INTER…...

编程日记 2023/11/3 6:42:52

JVM堆内存解析

一、JVM堆内存介绍 Java大多数对象都是存放在堆中，堆内存是完全自动化管理，根据垃圾回收机制不同，Java堆有不同的结构，下面是我们一台生产环境服务器JVM堆内存空间分配情况，JVM只设置了-Xms2048M -Xmx2048M。 1、JVM堆…...

编程日记 2023/11/3 6:40:50

C#Onnx模型信息查看工具

效果 Netron效果项目代码 using Microsoft.ML.OnnxRuntime; using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms;namespace Onnx_Demo {public partial class frmMain : Form{public frmMain(){InitializeComponent();}string…...

编程日记 2023/11/3 6:39:50

RK3588 ubuntu系统安装opencv

废话不多说直接上步骤： 先切换至root用户 sudo su 输入密码先更新一下本地软件 apt update apt upgrade 安装相关环境 apt install build-essential cmake git pkg-config libgtk-3-dev \ libavcodec-dev libavformat-dev libswscale-dev libv4l-dev libxvidcore-…...

编程日记 2023/11/3 6:37:48

常用的vue UI组件库

背景：Vue.js 是一个渐进式 javascript 框架，用于构建 UIS（用户界面）和 SPA（单页应用程序）。UI 组件库的出现提高了我们的开发效率，增强了应用的整体外观、感觉、交互性和可访问性，下…...

编程日记 2023/11/3 6:36:46

防范欺诈GPT

去年，ChatGPT的发布让全世界都感到惊讶和震惊。突然间出现了一个平台，它比之前的任何其他技术都更深入地了解互联网。人工智能可以被训练成像阿姆一样说唱，以世界著名诗人的风格写作，并精确地翻译内容，以至于它似乎能…...

编程日记 2023/11/3 6:35:45

Spark 之入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...

编程新知 2025/9/16 1:45:43

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...

编程新知 2025/9/8 8:54:14

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...

编程新知 2025/9/13 17:42:41

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录使用 erase 返回值继续迭代使用索引进行遍历我们知道类似 vector 的顺序迭代器被删除后，迭代器会失效，因为顺序迭代器在内存中是连续存储的，元素删除后，后续元素会前移。但一些场景中，我们又需要在执行删除操作…...

编程新知 2025/9/11 23:31:22

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架，该方法利用Stable Diffusion的强大生成能力，仅需单个正常样本和文本描述，即可生成逼真且多样化的异常样本，有效解决了视觉异常检测中异常样本稀缺的难题，为工业质检、医疗影像…...

编程新知 2025/9/9 10:09:30

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目，设置虚拟环境，出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2025/8/9 4:55:19

相关文章：