ECharts柱状图-带圆角的堆积柱状图.rar_echarts柱形图堆叠顶端圆角资源-CSDN下载

共3个文件

js：2个

html：1个

echarts

统计分析

数据可视化

大屏可视化

需积分: 5 53 浏览量 2024-11-17 16:05:18 上传评论收藏 864KB RAR 举报

ECharts是一款由百度团队开发的开源可视化图表库，它支持丰富的图表类型，并且具有良好的交互性。柱状图是ECharts中常用的一种图表类型，它适用于展示不同类别的数据量对比，尤其适合用来表示分类数据的频率或数值大小。在本例中，我们关注的是带有圆角的堆积柱状图，这种图表不仅可以展示单个类别的数据量，还能通过堆积的样式比较各个子类别的数据分布。堆积柱状图是一种特殊的柱状图，它通过将多个柱状图叠加起来，直观地显示数据的组成情况。在堆积柱状图中，每个柱子的高度表示该类别的总量，而柱子的不同颜色部分则表示不同子类别的占比。这种图表能够清晰地显示各部分对总量的贡献大小，便于观察者快速地把握数据的主要构成。带有圆角的设计为柱状图增添了一种现代化和柔和的视觉效果，使得图表看起来更加美观且易于阅读。圆角柱状图不仅提高了视觉吸引力，还可以在视觉上减少尖锐边缘可能带来的不适感，使得图表更符合现代设计趋势。在数据可视化的过程中，柱状图被广泛应用于商业报告、市场分析、大屏展示等多种场景。ECharts作为一款强大的图表库，通过简单的配置即可生成复杂的图表，并且支持在Web页面中动态交互，用户可以通过缩放、拖拽等操作深入了解数据的细节。本压缩包中包含的文件名称“图表”可能指向一个或多个具体的ECharts图表代码文件，这些文件通常包含了完整的HTML、JavaScript以及CSS代码，描述了如何在网页上实现带圆角的堆积柱状图。这些文件是开发人员进行图表制作时的直接参考，通过阅读和学习这些代码，开发人员可以快速掌握ECharts在实际项目中的应用方法。在实现带圆角的堆积柱状图时，开发者需要关注几个关键的技术点。是数据的组织方式，数据需要按照类别和子类别组织成适合ECharts处理的格式。是图表样式的设置，包括柱子的颜色、圆角的半径以及图例的配置等。是交互功能的实现，如鼠标悬停时显示数据详情，图表缩放和拖拽等，这些都需要通过ECharts提供的API来实现。开发者还需要关注ECharts的版本更新，因为ECharts库持续在改进和添加新的功能，及时了解和应用这些新特性能够帮助开发者制作出更加先进和具有竞争力的数据可视化产品。带圆角的堆积柱状图是ECharts中实现数据可视化的一种有效方式，它能够清晰展示数据的组成和类别之间的关系，同时圆角设计提升了图表的整体美感。通过使用ECharts，开发者能够以简单而高效的方式在网页上生成功能强大、视觉吸引的图表，从而在数据分析和展示方面达到专业水平。

资源推荐

资源详情

资源评论

收起资源包目录

ECharts柱状图-带圆角的堆积柱状图.rar （3个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

index.html 4KB

images

json

<!doctype html> <html> <head> <meta charset="utf-8"> <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')); //图表配置。 var series = [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', stack: 'a', name: 'a' }, { data: [10, 46, 64, '-', 0, '-', 0], type: 'bar', stack: 'a', name: 'b' }, { data: [30, '-', 0, 20, 10, '-', 0], type: 'bar', stack: 'a', name: 'c' }, { data: [30, '-', 0, 20, 10, '-', 0], type: 'bar', stack: 'b', name: 'd' }, { data: [10, 20, 150, 0, '-', 50, 10], type: 'bar', stack: 'b', name: 'e' } ]; const stackInfo = {}; for (let i = 0; i < series[0].data.length; ++i) { for (let j = 0; j < series.length; ++j) { const stackName = series[j].stack; if (!stackName) { continue; } if (!stackInfo[stackName]) { stackInfo[stackName] = { stackStart: [], stackEnd: [] }; } const info = stackInfo[stackName]; const data = series[j].data[i]; if (data && data !== '-') { if (info.stackStart[i] == null) { info.stackStart[i] = j; } info.stackEnd[i] = j; } } } console.error("stackInfo", stackInfo) for (let i = 0; i < series.length; ++i) { const data = series[i].data; const info = stackInfo[series[i].stack];//stackInfo["a"]; for (let j = 0; j < series[i].data.length; ++j) { const isEnd = info.stackEnd[j] === i; const topBorder = isEnd ? 20 : 0; const bottomBorder = 0; data[j] = { value: data[j], itemStyle: { borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder] } }; } } console.error("series", series) option = { toolbox: { show: true, feature: { saveAsImage: { }, }, }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: series }; //将图表对象和图表配置进行关联。 myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈