echarts自定义分组，x轴分级，支持多级，支持dataZoom_echartsx轴分组,echarts多级x轴资源-CSDN下载

共4个文件

html：2个

js：2个

需积分: 39 139 浏览量 2022-03-31 16:51:00 上传评论 6 收藏 1.29MB ZIP 举报

在本文中，我们将深入探讨如何使用ECharts，一个流行的JavaScript数据可视化库，来实现自定义分组、X轴分级以及支持多级和dataZoom功能。ECharts提供了丰富的图表类型和高度定制化的选项，使得开发者能够根据需求创建出复杂的可视化效果。让我们从自定义分组开始。在ECharts中，可以通过设置`series`配置项中的`data`属性来实现数据分组。例如，如果你有一组数据，每个条目包含类别名和值，你可以将它们组织成对象数组，其中每个对象代表一个条目，包含`name`（类别）和`value`（值）属性。通过这种方式，ECharts会自动根据`name`进行分类，形成分组。 ```javascript let data = [ {name: '类别1', value: 50}, {name: '类别2', value: 30}, {name: '类别3', value: 40}, // ... ]; ``` 接下来，我们讨论X轴分级。ECharts允许你创建带有多个级别的X轴，这通常用于展示层次结构或时间序列数据。通过设置`xAxis`配置项的`type`为`category`，并提供多层数据，可以实现分级效果。例如： ```javascript xAxis: { type: 'category', data: [['一级分类1', '二级分类1'], ['一级分类2', '二级分类2']], splitLine: {show: false}, // 隐藏分割线 axisLabel: { margin: 20, // 设置标签之间的间距 rotate: 45 // 旋转标签文本，避免重叠 } } ``` 在支持多级的情况下，你可能需要使用`echarts.util.each`遍历数据，动态构建X轴的多级数据。同时，可以使用`axisTick`配置来控制每一级的显示方式。至于dataZoom功能，它是ECharts中用于缩放和滚动视图的工具，特别适合处理大量数据时提高图表的可读性。`dataZoom`配置项可以添加到图表组件中，如： ```javascript dataZoom: [{ type: 'inside', // 内置型dataZoom start: 50, // 起始百分比 end: 100 // 结束百分比 }, { type: 'slider', // 滑块型dataZoom showDetail: true, filterMode: 'filter' // 使用过滤模式 }] ``` 结合以上代码，你可以在ECharts柱状图中实现自定义分组、X轴分级和dataZoom功能。这只是一个基础示例，实际应用中，你还可以根据需要调整颜色、样式、提示信息等更多细节，以满足更复杂的需求。ECharts的灵活性和强大功能使其成为前端开发中数据可视化的理想选择。记得在实际项目中，根据具体的数据结构和用户交互需求来调整和优化这些配置，以达到最佳的视觉效果和用户体验。

资源详情

资源评论

资源推荐

收起资源包目录

echarts自定义分组.zip （4个子文件）

echarts自定义分组

echarts自定义分组-静态.html 2KB

echarts5.js 3.16MB

echarts4.js 2.92MB

echarts自定义分组-动态.html 5KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>echarts自定义分组-动态</title> <script src="echarts4.js"></script> </head> <body> <div id="bar" style="width: 800px; height: 600px;"></div> <script type="text/javascript"> // 转化成echarts参数， // data: 数据，levels: 分几组，tickLength：刻度线的长度（标签多高） function toEchartsOption(data, levels, tickLength) { // 如果分组不在正中间，需要加上偏移宽度 var labelOffset = "{offset|}"; var xAxis = []; var seriesData = []; var option = { title: { text: 'echarts自定义分组-动态' } , xAxis: xAxis , yAxis: {} , series: [{type: 'bar', data: seriesData}] , dataZoom: [ { // 这个dataZoom组件，默认控制x轴。 type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 xAxisIndex: [], start: 0, end: 30 // 右边在 60% 的位置。 } ], }; for (var i = 0; i < levels; i++) { option.dataZoom[0].xAxisIndex.push(i); // 填充datazoom的联动 } // 度量数据 for (var i = 0; i < data.length; i++) { seriesData.push(data[i][levels]); } // 标签的初始边距，随着分层递增 var labelMargin = 10; // 构造xAxis数据 for (var lvl = levels - 1; lvl >=0; lvl--) { var xAxisData = []; var xAxisItem = { position: "bottom" , data: xAxisData , axisTick: { length: tickLength * (levels - lvl) } , axisLabel: { interval : 0, // 显示所有标签 margin: labelMargin + tickLength * (levels - lvl - 1) } }; if (lvl == levels - 1) { // 最后一级不做任何合并处理 for (var i = 0; i < data.length; i++) { xAxisData.push(data[i][lvl]); } } else { // 分组级，做分隔线和合并处理 var tickSeparates = []; var prevData = ""; // 上一组的数据 var prevDataNum = 1; // 上一组的数据条目 for (var i = 0; i < data.length; i++) { var lvlData = data[i][lvl]; xAxisData.push(""); if (lvlData != prevData) { // 加分隔线 tickSeparates.push(true); if (i > 0) { // 对上一组数据进行处理 if (prevDataNum%2 == 0) { // 偶数，放在中间靠前的位置，需要偏移 xAxisData[i - parseInt(prevDataNum/2) - 1] = labelOffset + prevData; } else { // 奇数，直接放正中间，不需要偏移 xAxisData[i - parseInt(prevDataNum/2) - 1] = prevData; } } prevDataNum = 1; } else { tickSeparates.push(false); prevDataNum++; } prevData = lvlData; } if (prevDataNum%2 == 0) { // 偶数，放在中间靠前的位置，需要偏移 xAxisData[xAxisData.length - parseInt(prevDataNum/2) - 1] = labelOffset + prevData; } else { // 奇数，直接放正中间，不需要偏移 xAxisData[xAxisData.length - parseInt(prevDataNum/2) - 1] = prevData; } // 根据分隔标识画分隔线 xAxisItem.axisTick.interval = ((tickSeparates) => { return (index, value) => { return tickSeparates[index]; }; })(tickSeparates); // 指定偏移的自定义样式，初始偏移为0 xAxisItem.axisLabel.rich = { offset: { width: 0 } } } xAxis.push(xAxisItem); } return option; } //数据 var data = [ ["湖北", "武汉市", "江岸区", 180] , ["湖北", "武汉市", "江汉区", 200] , ["湖北", "黄石市", "黄石港区", 130] , ["湖北", "黄石市", "西塞山区", 100] , ["湖北", "宜昌市", "夷陵区", 90] , ["湖南", "长沙市", "芙蓉区", 120] , ["湖南", "长沙市", "天心区", 110] , ["湖南", "株洲市", "天元区", 80] , ["广东", "广州市", "越秀区", 120] , ["广东", "广州市", "荔湾区", 150] , ["广东", "广州市", "增城区", 100] ]; // 三级 var levels = 3; // echarts实例 var chart = echarts.init(document.getElementById('bar')); var option = toEchartsOption(data, levels, 20); chart.lastBandWidth = 0; // 监听渲染事件，只要bandWidth发生变化，重新设置标签偏移的值 chart.on('rendered', function () { var bandWidth = chart._chartsViews[0].renderTask.context.outputData._layout.bandWidth; if (chart.lastBandWidth != bandWidth) { chart.lastBandWidth = bandWidth; // 延时执行否则echarts渲染异常 setTimeout(()=>{ // 加上偏移后重新绘制 var optionNew = {xAxis: [{}]}; for (var i = 1; i < levels; i++) { // 增量更新偏移值 optionNew.xAxis.push({axisLabel:{rich:{offset:{width: chart.lastBandWidth}}}}); } //console.info(optionNew); chart.setOption(optionNew); }, 0); } }); // 先绘制第一遍，找到绘制后每个柱子的刻度宽度 chart.setOption(option); </script> </body> </html>