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

echarts 画一个饼图，并且外围有一个旋转动画

news 2025/8/17 7:33:43 
function drawPie(domId) {var chartDom = document.getElementById(domId);var myChart = echarts.init(chartDom);var angle = 0; // 角度var pieData = [];for (var i = 1; i <= 6; i++) {pieData.push({name: 'CH0' + i, value: parseInt(Math.random() * 1000 * 100)});}const YData = pieData.map(item => item.value)const sum = YData.reduce((item, index) => item + index, 0); // 求数据之和var scale = 1;
// 自定义颜色var rich = {white: {color: "#fff",align: "center",fontSize: 12 * scale,// padding: [21, 0],},yellow: {color: "#ffc20e",fontSize: 20 * scale,padding: [5, 4],align: "center",},total: {color: "#ffc20e",fontSize: 18 * scale,align: "center",},blue: {color: "#49dff0",fontSize: 16 * scale,align: "center",},red: {color: "#ff0000",fontSize: 16 * scale,align: "center",}};option = {color: [{type: 'linear',x: 0, y: 0, x2: 0, y2: 1,colorStops: [{offset: 0, color: 'rgba(255, 166, 0, 1)' // 0% 处的颜色}, {offset: 1, color: 'rgba(254, 219, 101, 1)' // 100% 处的颜色}],global: false // 缺省为 false},{type: 'linear',x: 0, y: 0, x2: 1, y2: 1,colorStops: [{offset: 0, color: 'rgba(38, 154, 153, 1)' // 0% 处的颜色}, {offset: 1, color: 'rgba(90, 216, 166, 1)' // 100% 处的颜色}],global: false // 缺省为 false},{type: 'linear',x: 0, y: 0, x2: 0, y2: 1,colorStops: [{offset: 0, color: 'rgba(109, 212, 0, 1)' // 0% 处的颜色}, {offset: 1, color: 'rgba(68, 215, 182, 1)' // 100% 处的颜色}],global: false // 缺省为 false},{type: 'linear',x: 0, y: 0, x2: 1, y2: 1,colorStops: [{offset: 0, color: 'rgba(105, 136, 248, 1)' // 0% 处的颜色}, {offset: 1, color: 'rgba(105, 136, 248, 1)' // 100% 处的颜色}],global: false // 缺省为 false},{type: 'linear',x: 0, y: 0, x2: 0, y2: 1,colorStops: [{offset: 0, color: 'rgba(45, 225, 253, 1)' // 0% 处的颜色}, {offset: 1, color: 'rgba(14, 95, 255, 1)' // 100% 处的颜色}],global: false // 缺省为 false},{type: 'linear',x: 0, y: 0, x2: 0, y2: 1,colorStops: [{offset: 0, color: 'rgba(2, 109, 178, 1)' // 0% 处的颜色}, {offset: 1, color: 'rgba(18, 254, 224, 1)' // 100% 处的颜色}],global: false // 缺省为 false},],title: {text: "12,345",subtext: '（kWh）',textStyle: {color: "#fff",fontSize: 24,// align: 'center'},subtextStyle: {fontSize: 21,color: "#fff",// fontWeight: "bold"},x: "center",y: "40%",},grid: {bottom: 150,left: 100,right: "10%",},tooltip: {trigger: 'item'},series: [{name: '',type: 'pie',radius: ["35%", "72%"],center: ["50%", "50%"],data: pieData,avoidLabelOverlap: true, // 开启智能布局 (防止折线位置冲突)label: {normal: {show: true,// formatter: "{b}：{c}",formatter: function (param) {const percent = ((param.value / sum) * 100).toFixed(2);return ("{white|" + param.name + ": }{white|" + param.value + "}\n{white|" + percent + "%}");},rich: rich,},emphasis: {show: true,},},// 控制图例的线labelLine: {normal: {show: true,length: 15,length2: 25,},emphasis: {show: true,},},},// 边框的设置{radius: ["35%", "50%"],center: ["50%", "50%"],type: "pie",label: {normal: {show: false,},emphasis: {show: false,},},labelLine: {normal: {show: false,},emphasis: {show: false,},},animation: false,tooltip: {show: false,},data: [{value: 1,itemStyle: {color: "rgba(0,0,0,0.5)",},},],},{type: 'custom',coordinateSystem: 'none',zlevel:100,renderItem: (params, api) => {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.80,startAngle: (270 + angle) * Math.PI / 180,endAngle: (360 + angle) * Math.PI / 180},style: {fill: 'transparent',stroke: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: 'rgba(45, 225, 253, 1)' // 起始颜色}, {offset: 1, color: 'rgba(255, 166, 0, 1)' // 结束颜色}], false),lineWidth: 2.6},silent: true}},data: [0]},{type: 'custom',coordinateSystem: 'none',zlevel:100,renderItem: (params, api) => {debuggerreturn {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.80,startAngle: (90 + angle) * Math.PI / 180,endAngle: (180 + angle) * Math.PI / 180},style: {fill: 'transparent',stroke: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: 'rgba(92, 100, 255, 1)' // 起始颜色}, {offset: 1, color: 'rgba(45, 225, 253, 1)' // 结束颜色}], false),lineWidth: 2.6},silent: true}},data: [0]},{type: 'custom',coordinateSystem: 'none',renderItem: (params, api) => {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.88,startAngle: (360 + -angle) * Math.PI / 180,endAngle: (120 + -angle) * Math.PI / 180},style: {fill: 'transparent',stroke: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: 'rgba(109, 212, 0, 1)' // 起始颜色}, {offset: 1, color: 'rgba(18, 254, 224, 1)' // 结束颜色}], false),lineWidth: 2.6},silent: true}},data: [0]},{type: 'custom',coordinateSystem: 'none',renderItem: (params, api) => {return {type: 'arc',shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.88,startAngle: (180 + -angle) * Math.PI / 180,endAngle: (300 + -angle) * Math.PI / 180},style: {fill: 'transparent',stroke: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: 'rgba(52, 220, 227, 1)' // 起始颜色}, {offset: 1, color: 'rgba(254, 219, 101, 1)' // 结束颜色}], false),lineWidth: 2.6},silent: true}},data: [0]},//内部圆的两个点{type: 'custom',coordinateSystem: 'none',renderItem: (params, api) => {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2;let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.80;return {type: 'circle',shape: {/** 角度355° 外弧1开始角度 */cx: x0 + r * Math.cos((360 + angle) * Math.PI / 180),cy: y0 + r * Math.sin((360 + angle) * Math.PI / 180),r: 4},style: {fill: 'rgba(255, 166, 0, 1)',stroke: 'rgba(255, 166, 0, 1)'},silent: true}},data: [0]},{type: 'custom',coordinateSystem: 'none',renderItem: (params, api) => {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2;let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.80;return {type: 'circle',shape: {/** 角度175° 外弧2开始角度 */cx: x0 + r * Math.cos((180 + angle) * Math.PI / 180),cy: y0 + r * Math.sin((180 + angle) * Math.PI / 180),r: 4},style: {fill: 'rgba(92, 100, 255, 1)',stroke: 'rgba(92, 100, 255, 1)'},silent: true}},data: [0]},//外部两点点{type: 'custom',coordinateSystem: 'none',renderItem: (params, api) => {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2;let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.88;return {type: 'circle',shape: {/** 角度355° 外弧1开始角度 */cx: x0 + r * Math.cos((360 + -angle) * Math.PI / 180),cy: y0 + r * Math.sin((360 + -angle) * Math.PI / 180),r: 4},style: {fill: 'rgba(18, 254, 224, 1)',stroke: 'rgba(18, 254, 224, 1)'},silent: true}},data: [0]},{type: 'custom',coordinateSystem: 'none',renderItem: (params, api) => {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2;let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.88;return {type: 'circle',shape: {/** 角度175° 外弧2开始角度 */cx: x0 + r * Math.cos((180 + -angle) * Math.PI / 180),cy: y0 + r * Math.sin((180 + -angle) * Math.PI / 180),r: 4},style: {fill: 'rgba(52, 220, 227, 1)',stroke: 'rgba(52, 220, 227, 1)'},silent: true}},data: [0]},// {//     name: "外边框",//     type: "pie",//     clockWise: false, //顺时加载//     hoverAnimation: false, //鼠标移入变大//     center: ["50%", "50%"],//     radius: ["80%", "80%"],//     label: {//         normal: {//             show: false,//         },//     },//     data: [//         {//             value: 9,//             name: "",//             itemStyle: {//                 normal: {//                     borderWidth: 3,//                     borderColor: "#65FDFE",//                 },//             },//         },//     ],// },]};
// 其他各种图表一个原理let index = 0;
// 全部都适用 pie、bar、linesetInterval(function () {// 数据的长度if (index >= option.series[0].data.length) {index = 0;}myChart.dispatchAction({type: "showTip", // 提示框seriesIndex: 0,dataIndex: index // 对第几个进行提示});index += 1;}, 2000);option && myChart.setOption(option);setTimeout(function () {setInterval(() => {angle = angle + 2;myChart.setOption(option, true);}, 100)},1000)
}

在这里插入图片描述

http://www.xdnf.cn/news/1309249.html

相关文章：

  • pytest tmpdir fixture介绍（tmpdir_factory）（自动在测试开始前创建一个临时目录，并在测试结束后删除该目录）
  • 【LeetCode题解】LeetCode 35. 搜索插入位置
  • flowable汇总查询方式
  • ktg-mes 改造成 Saas 系统
  • Golang分布式事务处理方案
  • ROS move_base 混合功能导航 RealSense D435i + 3D 点云地图 + 楼层切换 + 路径录制 + 路径规划
  • 适合2D而非3D的游戏
  • Rust学习笔记（四）｜结构体与枚举（面向对象、模式匹配）
  • 从舒适度提升到能耗降低再到安全保障，楼宇自控作用关键
  • 奈飞工厂 —— 算法优化实战推荐
  • JavaScript手录17-原型
  • 2025年生成式引擎优化（GEO）服务商技术能力评估报告
  • 【Docker】Ubuntu上安装Docker（网络版）
  • [创业之路-550]：公司半年度经营分析会 - 常见差距与根因分析示例
  • linux网络基础
  • 022 基础 IO —— 文件
  • Redis-plus-plus 安装指南
  • 161. Java Lambda 表达式 - 使用工厂方法创建 Predicates
  • 力扣（LeetCode) ——142. 环形链表 II（C语言）
  • OpenShift 4.19安装中的变化
  • Vue 3与React内置组件全对比
  • Hadoop面试题及详细答案 110题 （16-35）-- HDFS核心原理与操作
  • 音视频学习（五十四）：基于ffmpeg实现音频重采样
  • 基于单片机的防酒驾系统设计
  • 我的世界Java版1.21.4的Fabric模组开发教程(十八)自定义传送门
  • 《C++进阶之继承多态》【多态：概念 + 实现 + 拓展 + 原理】
  • 超越“调参”：从系统架构师视角，重构 AI 智能体的设计范式
  • 嵌入式硬件篇---电感本质
  • VScode 使用遇到的问题
  • Git Revert 特定文件/路径的方法