ECharts饼图-饼图1.rar资源-CSDN下载

共3个文件

js：2个

html：1个

版权申诉

echarts

统计分析

数据可视化

大屏可视化

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

ECharts是一款由百度前端技术部开发的纯 Javascript 图表库，用于展示数据的可视化图形。在数据可视化领域，ECharts以其丰富的图表类型、良好的性能以及灵活的配置项深受开发者的喜爱。其中，饼图是ECharts中非常经典的一种图表类型，用于展示数据中各部分所占的比例情况。在本压缩包文件中，用户可以找到关于ECharts饼图的图表效果和代码实现的详细讲解。通过访问提供的链接，用户能够了解到如何使用ECharts来创建一个饼图，并且能够看到实际的代码示例。这个过程不仅包括如何配置图表的基本参数，还包括如何进一步优化图表的显示效果，使得饼图可以更好地适应不同的数据展示需求。此外，用户还可以通过提供的标签信息得知该文档主要涉及的内容。标签包括了“echarts”、“饼图”、“统计分析”、“数据可视化”和“大屏可视化”，这表明用户将学习到的不仅仅是一个图表的制作过程，更会涉及到如何将图表应用到实际的数据分析和大屏展示中。这对于需要在报告、演示、监控系统等方面展示数据的用户尤为重要。对于那些在学习和工作中需要处理大量数据并希望通过可视化手段来呈现数据结果的人来说，ECharts无疑是一个非常好的选择。利用ECharts制作出的饼图不仅能够清晰直观地展示数据分布，还能够通过交互式功能增加用户体验。例如，在大屏可视化项目中，饼图可以用来直观展示关键指标的完成情况，帮助决策者快速把握业务状态。在实际的应用场景中，ECharts饼图的功能非常强大。开发者可以通过编程调整饼图的样式，如改变颜色、添加图例、调整扇区的大小等，来满足不同的视觉需求。更重要的是，ECharts提供了一系列的交互式功能，如提示框、数据区域缩放、详细的数据标签显示等，这些功能使得饼图不仅仅是一个静态的展示工具，而是一个可以与用户互动、提供即时反馈的数据展示平台。 ECharts饼图在数据可视化中扮演着重要的角色，它不仅简单易用，而且功能丰富，适用于各种复杂的数据展示场景。通过学习如何使用ECharts制作饼图，用户可以提升自己的数据可视化能力，并在实际工作中更有效地传达数据信息。

资源推荐

资源详情

资源评论

收起资源包目录

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

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

index.html 7KB

images

json

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> #chart-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 1000px; height: 750px; } </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'), "dark"); //图表配置。 let colors = ["rgba(133, 246, 122, 1)", "rgba(240, 113, 255, 1)", "rgba(253, 81, 81, 1)", "rgba(123, 44, 255, 1)", "rgba(101, 229, 221, 1)", "rgba(254, 190, 19, 1)", "rgba(11, 219, 249, 1)", "rgba(44, 161, 255, 1)"] let testData = [ { name: "病假", value: "20" }, { name: "事假", value: "10" }, { name: "婚假", value: "5" }, { name: "丧假", value: "3" }, { name: "年休假", value: "7" }, { name: "产假", value: "25" }, { name: "调休", value: "5" }, { name: "陪产假", value: "15" } ] // 计算插入的数据的值（根据总量调整间距大小） let gap = (testData.reduce((a, b) => a + Number(b.value), 0) || 0) / 100; // 可以根据需要调整分母来调整间隔大小 let seriesData = []; testData.forEach((f, fi) => { seriesData.push({ name: f.name, value: f.value, itemStyle: { color: colors[fi], shadowColor: colors[fi], shadowBlur: 10, } }); // 插入一条新的颜色透明的数据用来占位 seriesData.push({ name: "", value: gap, itemStyle: { color: "rgba(0, 0, 0, 0)" }, tooltip: { show: false } }); }); let option = { toolbox: { show: true, feature: { saveAsImage: {}, }, }, tooltip: {}, legend: [ { right: "10%", top: "middle", orient: "vertical", icon: "circle", itemStyle: { color: "rgba(255, 0, 0, 0)", borderWidth: 2, borderColor: "auto", }, textStyle: { fontSize: 16, }, itemWidth: 16, itemHeight: 16, itemGap: 30, height: 200, width: 300, data: [ "病假", "事假", "婚假", "丧假", "年休假", "产假", "调休", "陪产假", ], }, ], series: [ { type: "pie", radius: ["54%", "60%"], center: ["30%", "50%"], itemStyle: { borderRadius: 15, }, label: { show: false, }, data: seriesData }, { type: "pie", radius: ["64%", "65%"], center: ["30%", "50%"], itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(44,161,255,1)", }, { offset: 0.8, color: "rgba(44,161,255,0)", }, ], }, }, silent: true, label: { show: false, }, data: [0], }, { type: "pie", radius: ["66.5%", "67%"], center: ["30%", "50%"], silent: true, label: { show: false, }, data: [100], itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(44,161,255,0.5)", }, { offset: 0.8, color: "rgba(44,161,255,0)", }, ], }, }, }, ], }; //内容区域结束。 myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈

版权申诉