echarts 相关问题

在 Echarts Sankey 中，他们有一个带有级别的示例。但是，当我尝试运行它时（只有垂直变化，尽管这似乎没有影响），它不会按级别对齐节点。在 Echarts Sankey 中，他们有一个带有级别的示例。但是，当我尝试运行它时（只有垂直变化，尽管这似乎没有影响），它不会按级别对齐节点。 <script> // See below for JSON based Sankey // https://echarts.apache.org/examples/en/editor.html?c=sankey-levels // https://echarts.apache.org/examples/data/asset/data/product.json var chartDom = document.getElementById('flow'); var myChart = echarts.init(chartDom); var option; myChart.showLoading(); $.get('../api/stream_data/{{item.id}}', function (data) { myChart.hideLoading(); myChart.setOption( (option = { // grid: { // left: 0, // top: 0, // right: 0, // bottom: 0 // }, tooltip: { trigger: 'item', triggerOn: 'mousemove' }, //legend: { // textStyle: { // fontSize: '15', // } //}, series: [ { type: 'sankey', orient: 'vertical', label: { position: 'top', textStyle: { fontSize: 24 }, formatter: '{b}: {c}%' }, data: data.nodes, links: data.links, emphasis: { focus: 'adjacency' }, levels: [ { depth: 0, itemStyle: { color: '#fbb4ae' }, lineStyle: { color: 'source', opacity: 0.6 } }, { depth: 1, itemStyle: { color: '#b3cde3' }, lineStyle: { color: 'source', opacity: 0.6 } }, { depth: 2, itemStyle: { color: '#ccebc5' }, lineStyle: { color: 'source', opacity: 0.6 } }, { depth: 3, itemStyle: { color: '#decbe4' }, lineStyle: { color: 'source', opacity: 0.6 } } ], lineStyle: { curveness: 0.5 }, label: { formatter: '{b}: {c}%', position: 'top', size: 24 } } ] }) ); }); option && myChart.setOption(option); </script> 有人知道我做错了什么吗？是否有更好的库可以在 JS 中生成 Sankey 来更好地处理这个问题？注意，levels仅指定每个级别中数据项的外观。每个数据项的位置由迭代算法确定，以最小化节点和边之间的重叠。可以通过 layoutIterations 影响该算法应该执行的迭代次数。如果设置为 0，项目将按照原始数据的顺序放置（并按级别对齐）。我不太了解其他包，但plotly允许指定确切的节点位置。

echarts sankey-diagram

回答 1 投票 0

如何使电子图表响应式？

对于更高分辨率的屏幕，如何使图表根据视口宽度响应地改变其宽度？

echarts

回答 1 投票 0

ReactJS：Echart 页面为空

我正在尝试使用 echart 绘制一个简单的折线图，但是我看到空白页面。我的代码如下所示。从 'react' 导入 React, {useState, useEffect}; 从 'echar 导入 * 作为 echarts...

reactjs echarts

回答 1 投票 0

ECharts 将网格高度设置为零

是否可以将网格高度设置为零？看这个演示，即使我将 grid.height 设置为 0，图表仍然显示。我想要的效果是隐藏图表，包括线条和轴，但保留

echarts

回答 1 投票 0

如何在echarts工具提示中使用字符串模板获取数据？

我想使用字符串模板来获取数据，但我没有。这是官方的例子。在此输入图像描述这是我的例子，我通过使用模板得到一个数组。我希望它的宽度与

echarts

回答 1 投票 0

如何禁用echarts中与特定系列的所有交互？

我有这个图表，其中有几行，我只想将其用作视觉指南，基本上只是一些“背景视觉效果”。我不想和它有任何互动。我法力...

echarts

回答 1 投票 0

Apache Echarts Change Legend 如何为 select 添加替代行为

我有一个图表，现在默认情况下在图例中，当您单击某个项目时，它会在图表中消失，而不是我想要实现的，当您单击该项目时，您只能在图表中看到该项目

reactjs charts echarts react-tsx apache-echarts

回答 1 投票 0

Echarts 和 bootstrap：响应式宽度

使用Echarts（来自百度）我想在div元素中放置一个饼图（我正在使用bootstrap）。所以我有：使用Echarts（来自百度）我想在div元素中放置一个饼图（我正在使用bootstrap）。所以我有： <div class="row"> <div class="col-md-4"> <div id="chartGift" style="height:400px;"></div> </div> </div> 我从官方文档中获取了javascript代码 https://ecomfe.github.io/echarts/doc/example/pie1.html#-en 问题是饼图没有出现，因为检查html代码，我看到宽度为0。为什么echarts不从父元素设置宽度？我不想设置静态宽度（我看到它有效），因为图表没有响应。如果您只想设置固定高度，请尝试将宽度设置为容器的 100% 并设置最小高度： <div id="chartGift" style="width: 100%; min-height: 400px"></div> 这对我有用！另外，如果您想确保图表具有响应能力，您可以知道何时调整窗口大小并强制图表调整大小。像这样： $(window).on('resize', function(){ if(chart != null && chart != undefined){ chart.resize(); } }); 希望有帮助！只需使用 ResizeObserver 即可检测图表容器元素大小的变化。即使您的布局发生变化，它也可以工作，并且不依赖于窗口大小调整等。顺便说一句。如果需要，也可提供 Polyfill。 const container = document.querySelector('#chart'); const chart = echarts.init(container); new ResizeObserver(() => chart.resize()).observe(container); 我在购买的管理模板中找到了解决方案。有加载内容后初始化图表的解决方案。这是工作示例： $(document).ready(function () { setTimeout(function () { // based on prepared DOM, initialize echarts instance var myChart = echarts.init(document.getElementById('chart-amount'), 'macarons'); // specify chart configuration item and data var option = {..options of chart here ..} // use configuration item and data specified to show chart myChart.setOption(option); }, 100); }); 图表容器的样式为：style="height: 400px; width: 100%; 这一点很重要，当你使用echart工具箱时，它喜欢走出容器。我希望它有帮助:) <div id="echart" style="width: 400px; min-width: 100%; height:400px;"></div> 这对我有用。最小宽度：100% 就可以了。首先，将图表包装在 div 中，并指定 div 宽度：100% 和高度：100%。这允许图表在弹性布局中使用。其次，你需要给图表的父容器一个宽度（即使它的响应宽度），如 flex: 1。在解决这个问题时，我必须做很多事情：包装器应动态确定图表的大小 <div class="goal-chart-wrapper" ref="chartContainer"> <div class="goal-chart" ref="goalChart"></div> </div> CSS 控制包装器的大小并强制孩子遵守父母的大小 .goal-chart-wrapper { width: 100%; min-height: 200px; position: relative; .goal-chart { height: 100%; width: 100%; position: absolute; } } 删除插入画布内图表的渲染填充（在图表选项内）。没有包含标签，轴消失了。 grid: { left: 0, top: 0, right: 0, bottom: 0, containLabel: true } 在决定大小的父级上添加 ResizeObserver，这会触发图表的大小调整 import { init } from 'echarts'; const options = { // ... } this.chart = init(this.$refs.goalChart); this.chartContainer = this.$refs.chartContainer; new ResizeObserver(() => { this.chart.resize(); }).observe(this.chartContainer); this.chart.setOption(options); 为了使图表具有响应性并始终匹配其容器的大小，您可以将 ResizeObserver 与 echartsInstance.resize 结合使用。但是，因为观察开始时会触发观察，这会破坏图表的初始动画。因此，就我而言，我在请求调整大小之前检查是否有实际大小变化： let elemChart = document.querySelector('#divChartPie'); let chart = echarts.init(elemChart); // Make chart responsive (resize chart on elemChart resize) new ResizeObserver(() => { if (elemChart.clientWidth !=chart.getWidth() || elemChart.clientHeight != chart.getHeight()) { chart.resize(); } }).observe(elemChart); 设置 width: 100% 会使 echarts 以节点大小（100px）显示，而设置 min-width: 100% 则根本不显示。所以这是相对 css 单位的一些问题。但是我们仍然可以使用JS设置图表容器的大小。 let main = document.querySelector("main"); let chartDom = document.getElementById("echartsGrafikon"); // getting width of element we want to size up to our chart // do this before chart initialization let grafikonWidth = main.getBoundingClientRect().width; chartDom.style.width = grafikonWidth + "px"; // initializing echart let echartGrafikon = echarts.init(chartDom); // to dynamically change size window.onresize = function () { echartGrafikon.resize(); };

javascript css twitter-bootstrap twitter-bootstrap-3 echarts

回答 8 投票 0

如何使用 Apache echarts 使用“globe”坐标系获取点击坐标

我想弄清楚在Echarts中渲染3D地球仪时如何获取鼠标点击的坐标。我正在渲染 Lines3D 系列来指定地理边界和 Scatter3D 系列...

echarts

回答 1 投票 0

应用强调淡入淡出和焦点来选择apache echarts折线图中的系列组？

我不知道如何将图表选项默认为组系列，并在将鼠标悬停在组内的一个系列上时允许强调整个组。例如，如果您有四个 lin...

echarts apache-echarts

回答 1 投票 0

echarts 相关问题

最新问题