webpig commented on issue #17455: URL: https://github.com/apache/echarts/issues/17455#issuecomment-3088798820
> [@hks2002](https://github.com/hks2002) 你好 这个代码看不懂 请问能不能提供一个更明显的例子 描述排序发生在哪个步骤 以及排序后的数据和option是什么样子的 完整示例：（主要通过 dataset 和 encode 进行关联） ``` <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>ECharts 堆叠条形图 (简洁数据 & 单点序列)</title> <!-- 1. 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js";></script> <style> /* 为图表容器指定宽高 */ #main { width: 100%; height: 600px; } </style> </head> <body> <!-- 2. 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main"></div> <script type="text/javascript"> // 3. 基于准备好的 DOM，初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('main')); // --- 数据处理 --- // ★ 1. 使用更简洁的扁平化数组定义数据 const chartData = [ // 站点A { site: '站点A', nccat: '运营商-联通', pct: 0.45, catCnt: 90 }, { site: '站点A', nccat: '运营商-移动', pct: 0.35, catCnt: 70 }, { site: '站点A', nccat: '运营商-电信', pct: 0.20, catCnt: 40 }, { site: '站点A', nccat: '运营商-广电', pct: 0, catCnt: 0 }, // 站点B { site: '站点B', nccat: '运营商-联通', pct: 0.25, catCnt: 55 }, { site: '站点B', nccat: '运营商-移动', pct: 0.10, catCnt: 20 }, { site: '站点B', nccat: '运营商-电信', pct: 0.65, catCnt: 130 }, { site: '站点B', nccat: '运营商-广电', pct: 0, catCnt: 0 }, // 站点C { site: '站点C', nccat: '运营商-联通', pct: 0.08, catCnt: 16 }, { site: '站点C', nccat: '运营商-移动', pct: 0.22, catCnt: 44 }, { site: '站点C', nccat: '运营商-电信', pct: 0.40, catCnt: 80 }, { site: '站点C', nccat: '运营商-广电', pct: 0.30, catCnt: 60 } ]; // 定义所有站点和运营商的顺序 const allSites = ['站点A', '站点B', '站点C']; const allOperators = ['运营商-联通', '运营商-移动', '运营商-电信', '运营商-广电']; // ★ 2. 将扁平数据按站点分组 const dataBySite = {}; chartData.forEach(item => { if (!dataBySite[item.site]) { dataBySite[item.site] = []; } dataBySite[item.site].push(item); }); const dataset = []; const series = []; // ★ 3. 遍历分组后的数据，排序并生成 dataset 和 series allSites.forEach(site => { const siteData = dataBySite[site]; // 对当前站点的数据按 pct 降序排序 siteData.sort((a, b) => b.pct - a.pct); // 为每个数据点创建 dataset 和 series siteData.forEach(json => { dataset.push({ source: [json] }); series.push({ name: json.nccat, type: 'bar', datasetIndex: dataset.length - 1, stack: site, // 按站点堆叠 label: { show: json.pct > 0, // 值为0时不显示标签 position: 'inside', formatter: '{@catCnt}', color: '#fff', }, emphasis: { focus: 'series' }, encode: { x: 'site', y: 'pct' } }); }); }); // --- ECharts 配置 --- const option = { title: { text: '各站点运营商覆盖率 (PCT) 分布', subtext: '单点序列 & 简洁数据结构' }, dataset: dataset, series: series, // 使用上面生成的 series tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { // 自定义 tooltip，从 dataset 中获取完整信息 let tooltipHtml = `${params[0].axisValue}<br/>`; // 对 Tooltip 内容也进行排序 const sortedParams = params.sort((a,b) => b.value - a.value); sortedParams.forEach(param => { const sourceData = dataset[param.seriesIndex].source[0]; const marker = param.marker; const pctDisplay = sourceData.pct > 0 ? `${(sourceData.pct * 100).toFixed(1)}%` : '无数据'; tooltipHtml += `${marker} ${sourceData.nccat}: ${pctDisplay} (基站: ${sourceData.catCnt})<br/>`; }); return tooltipHtml; } }, legend: { data: allOperators }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: allSites }, yAxis: { type: 'value', name: '覆盖率 (PCT)', axisLabel: { formatter: (value) => (value * 100) + '%' } }, color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858'] }; // 4. 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 5. 使图表自适应窗口大小变化 window.addEventListener('resize', () => { myChart.resize(); }); </script> </body> </html> ``` 效果图： <img width="1167" height="612" alt="Image" src="https://github.com/user-attachments/assets/fef27863-4fd6-4317-a296-85413ea463d8"; /> -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
