ECharts饼图-饼图34.rar_finebi里的占比饼图怎么制作资源-CSDN下载

共3个文件

js：2个

html：1个

版权申诉

echarts

统计分析

数据可视化

大屏可视化

183 浏览量 2025-06-09 11:17:03 上传评论收藏 864KB RAR 举报

ECharts是由百度开源的一个数据可视化库，它提供直观、生动、可交互、高度可定制的数据可视化图表。ECharts图表库广泛应用于网页、大屏数据展示、移动应用等场景中。使用ECharts，可以方便地创建各种图表，比如折线图、柱状图、饼图、散点图等，这些图表可以为数据分析和业务展示提供强大的支持。在ECharts库中，饼图是其中一种非常经典的图表类型。饼图用于展示不同数据系列占总体的比例关系，常用于展示各部分占整体的比例大小。其特点是以圆形的“饼”来表示数据，每个扇区的弧度代表该数据占总量的百分比，因此它非常适用于展示数据的组成结构。此外，通过点击饼图中不同的扇区，还可以实现不同数据间的交互查看，增加了图表的互动性。 ECharts的饼图功能很强大，它不仅提供了基础的显示效果，还允许用户通过配置项来自定义图表的各种样式，如调整饼图的半径大小、设置环形饼图（即圆环图）、控制饼图的分割线样式、调整扇区的文本标签位置等。开发者可以根据自己的需求调整这些参数来达到预期的视觉效果。同时，ECharts还支持动态更新数据，这意味着饼图中的数据可以实时更新，相应的图表也会即时反映新的数据变化，这对于实时监控和数据演示非常有帮助。开发者可以通过编程方式向图表中动态添加数据点，或更新已有数据点的值，使得图表保持实时更新。 ECharts的易用性与灵活性使其在数据可视化领域受到广泛欢迎。它简化了传统图表绘制流程，降低了数据可视化的技术门槛。开发者无需关注底层的图形绘制逻辑，只需编写简单的代码，即可实现复杂的数据可视化需求。在前端开发领域，ECharts已经成为许多开发者在进行数据展示时的首选工具。 ECharts为数据可视化提供了高效、便捷、美观的解决方案。无论是开发者还是最终用户，都可以从ECharts提供的丰富图表中获得良好的视觉体验和数据洞察。随着大数据时代的到来，ECharts的这些优势将会使它在数据可视化领域扮演越来越重要的角色。

资源推荐

资源详情

资源评论

收起资源包目录

ECharts饼图-饼图34.rar （3个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

index.html 5KB

images

json

<!doctype html> <html> <head> <meta charset="utf-8"> <style> #chart-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 464px; height: 216px; } </style> <script src="./lib/5.5.0/echarts.min.js"></script> </head> <body> <div id="chart-panel"></div> <script type="text/javascript"> //初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //图表配置。 const img = new Image(); img.src = "../../images/chartIcon.png"; const colors = [ "#FF0000", "#30A900", "#FC6F26", "#DF53BB", "#00DFFF", "#A880FF", ]; const data = [{ name: "阶段1", value: 100 }, { name: "阶段2", value: 200 }, { name: "阶段3", value: 300 }, { name: "阶段4", value: 400 }, { name: "阶段5", value: 500 }, { name: "阶段6", value: 600 }] let legData = data.map((item, index) => { return { ...item, textStyle: { rich: { title: { padding: [0, 0, 0, 10], fontSize: 14, width: 90, fontWeight: "500", color: colors[index % 6], }, p: { fontSize: 16, width: 50, fontWeight: "400", color: colors[index % 6], }, }, }, }; }); var option = { toolbox: { feature: { saveAsImage: {} } }, legend: { show: true, orient: "vertical", right: 20, top: "center", itemGap: 12, icon: "roundRect", itemWidth: 20, itemHeight: 10, data: legData, formatter: function (name) { let value = ""; data.forEach((item) => { if (item.name == name) { value = item.value; } }); return "{title|" + name + "}{p|" + value + "}"; }, }, graphic: { elements: [ { type: "image", left: "26%", top: "32%", style: { image: img, width: 38, height: 36, }, }, ], }, title: [ { text: "总数量", x: "24%", y: "47.5%", }, { text: 100, x: "26.2%", y: "58%", }, ], tooltip: {}, series: [ { type: "pie", center: ["30%", "50%"], radius: ["48%", "90%"], itemStyle: { borderColor: "#ffffff", color: function (params) { return colors[params.dataIndex % 6]; }, }, label: { show: false, }, data: data, }, { itemStyle: { color: "rgba(245,252,252, 0.6)", borderColor: "#ffffff", }, type: "pie", silent: true, center: ["30%", "50%"], radius: ["48%", "62%"], data: [ { value: 0, }, ], }, { itemStyle: { color: "rgba(245,252,252, 0.4)", borderColor: "#ffffff", }, type: "pie", silent: true, center: ["30%", "50%"], radius: ["62%", "74%"], data: [ { value: 0, }, ], }, ], }; //将图表对象和图表配置进行关联。 myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈

版权申诉