echarts 相关问题

如何使用 getZr.on() 停用先前的事件

我使用以下代码来停用先前的事件： ChartUse.getZr().on('mouseout', params => { if (params.seriesIndex === 0) { 图表使用.setOption({ ...

如何在同一个echarts.instance中使用convertFromPixel同步两个或多个图形？

我有两个点图形（分散），我需要将鼠标（mousemove）移动到其中一个图形上，并将工具提示效果传递给另一个图形。也就是说，当我将鼠标移到系列[0]上时，工具提示必须...

如何在同一个echarts.instance中使用converFromPixel同步两个或多个图形？

我有两个点图形（分散），我需要将鼠标（mousemove）移动到其中一个图形上，并将工具提示效果传递给另一个图形。也就是说，当我将鼠标移到系列[0]上时，工具提示必须...

eCharts：使用for循环根据数据点的数量在蜘蛛图上生成点

我有几个雷达图，是为了回答一组问题而创建的。 每个图都有不同数量的数据点，具体取决于问题的数量。 我目前正在创建情节...

数据集组件没有配置图例

我正在配置两个图表，图例仅在使用series.data时出现，但在使用数据集组件（series.datasetIndex和series.encode）时不会出现。我尝试过的没有任何效果...

使用 echarts4r 绘制并排条形图

简短版本：有没有办法使用echarts4r绘制带有并排条形图的条形图（类似于ggplot中的position=dodge选项）？ 长版： 我想创建一个按多个分组的条形图...

ECharts：如何显示所有轴标签？

Echarts 似乎有一个不错的功能，可以根据提供的空间自动选择要显示的标签。然而，这个算法有时似乎有点过于激进，并且不......

Echarts饼图标题中心位置

我有一个默认的饼图 里面有标题，如文档示例中所示： 选项={ 标题： { text: '甜甜圈图案例', 左：“中心”， 顶部：“中心” }, 系列： [ {...

如何使用Echarts Js在MarkPoint属性中自动设置symbolSize

我正在尝试使用echarts配置自动设置MarkPoint，但我没有成功，我希望我的pin根据值自动缩小或增长。 像这样的事情： 但我

Echarts桑基图渲染

我正在尝试用echarts创建动态桑基图。我有一个情况，我有很多数据，但我的图表并不真正可读，正如您在图像中看到的那样（我隐藏了节点名称......

无需浏览器即可导出echarts图表

我正在寻找在不使用浏览器的情况下生成echarts图表的png。 我计划在我的 crontab 中执行此操作。 有什么想法吗？我看到像 Nightmare.js 或 Selenium+无头浏览器这样的解决方案，但我......

根据雷达图上的指标数量更改电子图表选项

我正在使用 eCharts 创建雷达图，图表上的指标数量可以更改。我想使用一个脚本并根据数据更改指标数量，而不是创建...

如何将条形系列放在左侧而不是居中？

我放置固定宽度和固定间隙的钢筋。 但我怎样才能将它们向左对齐呢？就像下图一样。 选项={ x轴：{ 类型：'类别'， 数据：['星期一'，'星期二']， }, y 轴：{ 类型：'

如何使用echarts库设置每个条形左侧的x轴刻度？

我想在栏的左侧显示每个x轴刻度，而不是在中心，但我不确定哪个设置可以帮助我，我尝试将boundaryGap设置为false，但没有运气。请注意...

无论条形图宽度如何，如何右对齐值？

我正在使用 Apache echarts 制作水平条形图。我试图正确对齐每个条形图的值，但在审查 API 并使用

如何右对齐值（无论条形图宽度如何）Apache echarts

我正在使用 Apache echarts 制作水平条形图。我试图正确对齐每个条形图的值，但在审查 API 并使用

堆叠水平条形图，其中 x 是 Apache Echarts 的时间

我已经尝试了一段时间来弄清楚如何正确绘制由单行组成的图表，但该行中可以有不同的值。上面是一个简单的模拟，它应该看起来如何......

带有分组数据的universalTransition

我有这段代码，它运行得很好。在其中，我展示了我希望如何进行过渡，让点完美移动： <p>我有这段代码，它运行得很好。在其中，我展示了我希望如何进行过渡，让点完美移动：</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>&lt;head&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js&#34;&gt;&lt;/script&gt; &lt;style&gt; .chart { width: 700px; height: 430px; margin: 0 auto; } &lt;/style&gt; &lt;/head&gt; &lt;button class=&#39;barBttn&#39;&gt; Bar Chart &lt;/button&gt; &lt;button class=&#39;scatterBttn&#39;&gt; Scatter Chart &lt;/button&gt; &lt;div class=&#34;chart&#34;&gt;&lt;/div&gt; &lt;script&gt; function chartSystem () { return { &#39;maleData&#39;: [ [&#39;x&#39;, &#39;y&#39;], [150, 45], [160, 50], [170, 55], [180, 60] ], &#39;femaleData&#39;: [ [&#39;x&#39;, &#39;y&#39;], [160, 65], [170, 70], [180, 75], [190, 80] ], &#39;barData&#39;: [ [&#39;title&#39;, &#39;values&#39;, &#39;itemGroupId&#39;], [&#39;Male&#39;, 56, &#39;male&#39;], [&#39;Female&#39;, 88, &#39;female&#39;] ] } } // let pullDataset = null; let pullData = null; function chartSend () { // const dfInit = chartSystem(); // pullDataset = [ { source: dfInit.maleData, sourceHeader: true }, { source: dfInit.femaleData, sourceHeader: true }, { source: dfInit.barData, sourceHeader: true } ] // pullData = [ { data: dfInit.barData.slice(1).map(item =&gt; ({ name: item[0], value: item[1], itemGrmoupId: item[2] })) } ] } chartSend(); // const chartUse = echarts.init(document.getElementsByClassName(&#34;chart&#34;)[0]); // Configuração do scatter plot function chartFrameSwitch0() { const xAxis0 = { scale: true }; const yAxis0 = { scale: true }; const series0 = { type: &#39;scatter&#39;, id: &#39;male&#39;, datasetIndex: 0, encode: { x: 0, y: 1 }, xAxisIndex: 0, yAxisIndex: 0, dataGroupId: &#39;male&#39;, // Consistência com o gráfico de barras universalTransition: { enabled: true, delay: function (idx, count) { return Math.random() * 400; } }, itemStyle: { color: &#39;#1e90ff&#39; } // Cor para &#34;Male&#34; }; const series1 = { type: &#39;scatter&#39;, id: &#39;female&#39;, // identifica a serie (serieKey) dataGroupId: &#39;female&#39;, // agrupa a serie datasetIndex: 1, encode: { x: 0, y: 1 }, xAxisIndex: 0, yAxisIndex: 0, universalTransition: { enabled: true, delay: function (idx, count) { return Math.random() * 400; } }, itemStyle: { color: &#39;#ff69b4&#39; } // Cor para &#34;Female&#34; }; const option = { dataset: [pullDataset[0], pullDataset[1]], xAxis: [xAxis0], yAxis: [yAxis0], series: [series0, series1] }; chartUse.setOption(option, { replaceMerge: [&#39;xAxis&#39;, &#39;yAxis&#39;, &#39;series&#39;] }); } function chartFrameSwitch1() { const xAxis0 = { type: &#39;category&#39;, scale: false }; const yAxis0 = { type: &#39;value&#39;, scale: false }; const series0 = { type: &#39;bar&#39;, datasetIndex: 0, encode: { x: 0, y: 1, itemGroupId: 2 }, itemStyle: { color: (params) =&gt; { const color = [&#39;#1e90ff&#39;, &#39;#ff69b4&#39;]; return color[params.dataIndex]; } }, universalTransition: { enabled: true, divideShape: &#39;split&#39;, seriesKey: [&#39;male&#39;, &#39;female&#39;], // Consistência com o scatter delay: function (idx, count) { return Math.random() * 400; } } }; const option = { dataset: [pullDataset[2]], xAxis: [xAxis0], yAxis: [yAxis0], series: [series0] }; chartUse.setOption(option, { replaceMerge: [&#39;xAxis&#39;, &#39;yAxis&#39;, &#39;series&#39;] }); } chartFrameSwitch0(); const scatterClick = document.getElementsByClassName(&#39;scatterBttn&#39;)[0]; const barClick = document.getElementsByClassName(&#39;barBttn&#39;)[0]; scatterClick.addEventListener(&#39;click&#39;, chartFrameSwitch0); barClick.addEventListener(&#39;click&#39;, chartFrameSwitch1); &lt;/script&gt;</code></pre> </div> </div> <p></p> <p>但是我不想做两次<pre><code>series.type: &#39;scatter&#39;</code></pre>，而是想用组分隔线将它们分开，如<pre><code>chartSystem.genderData</code></pre>所示。我想为每个组传递 <pre><code>id</code></pre> 和 <pre><code>dataGroupId</code></pre>，而不必为此执行两个 <pre><code>series type: &#39;scatter&#39;</code></pre>。这可能吗？看到我尝试的过渡不起作用，平滑效果不会发生这种情况，正如我们在提供的第一个示例中看到的那样。</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>&lt;head&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js&#34;&gt;&lt;/script&gt; &lt;style&gt; .chart { width: 700px; height: 430px; margin: 0 auto; } &lt;/style&gt; &lt;/head&gt; &lt;button class=&#39;barBttn&#39;&gt;Bar Chart&lt;/button&gt; &lt;button class=&#39;scatterBttn&#39;&gt;Scatter Chart&lt;/button&gt; &lt;div class=&#34;chart&#34;&gt;&lt;/div&gt; &lt;script&gt; function chartSystem() { return { genderData: [ [&#39;x&#39;, &#39;y&#39;, &#39;dataGroupId&#39;], [150, 45, &#39;male&#39;], [160, 50, &#39;male&#39;], [170, 55, &#39;male&#39;], [180, 60, &#39;male&#39;], [160, 65, &#39;female&#39;], [170, 70, &#39;female&#39;], [180, 75, &#39;female&#39;], [190, 80, &#39;female&#39;] ], barData: [ [&#39;Title&#39;, &#39;values&#39;, &#39;itemGroupId&#39;], [&#39;Male&#39;, 56, &#39;male&#39;], [&#39;Female&#39;, 88, &#39;female&#39;] ] }; } let pullDataset = null; let pullData = null; function chartSend() { const dfInit = chartSystem(); // Definindo dataset consolidado pullDataset = [ { source: dfInit.genderData, sourceHeader: true }, { source: dfInit.barData, sourceHeader: true } ]; // Preparando os dados para o gráfico de barras pullData = [ { data: dfInit.barData.slice(1).map(item =&gt; ({ name: item[0], value: item[1] })) } ]; } chartSend(); const chartUse = echarts.init(document.getElementsByClassName(&#34;chart&#34;)[0]); // Configuração do scatter plot com `groupId` // Configuração do scatter plot com `dataGroupId` function chartFrameSwitch0() { const xAxis0 = { scale: true }; const yAxis0 = { scale: true }; const series0 = { type: &#39;scatter&#39;, datasetIndex: 0, encode: { x: 0, // Coluna &#39;x&#39; no dataset y: 1, // Coluna &#39;y&#39; no dataset id: 2, dataGroupId: 2 // Modificado para `dataGroupId` }, universalTransition: { enabled: true, delay: function (idx, count) { return Math.random() * 400; } }, itemStyle: { color: function (params) { // Cor dinâmica baseada no dataGroupId return params.data[2] === &#39;male&#39; ? &#39;#1e90ff&#39; : &#39;#ff69b4&#39;; } } }; const option = { dataset: [pullDataset[0]], // Dataset consolidado xAxis: [xAxis0], yAxis: [yAxis0], series: [series0] }; chartUse.setOption(option, { replaceMerge: [&#39;xAxis&#39;, &#39;yAxis&#39;, &#39;series&#39;] }); } // Configuração do gráfico de barras function chartFrameSwitch1() { const xAxis0 = { type: &#39;category&#39; }; const yAxis0 = { type: &#39;value&#39; }; const series0 = { type: &#39;bar&#39;, datasetIndex: 0, encode: { x: 0, y: 1, itemGroupId: 2 }, itemStyle: { color: function (params) { const colors = [&#39;#1e90ff&#39;, &#39;#ff69b4&#39;]; return colors[params.dataIndex]; } }, universalTransition: { enabled: true, divideShape: &#39;split&#39;, seriesKey: [&#39;male&#39;, &#39;female&#39;], delay: function (idx, count) { return Math.random() * 400; } } }; const option = { dataset: [pullDataset[1]], xAxis: [xAxis0], yAxis: [yAxis0], series: [series0] }; chartUse.setOption(option, { replaceMerge: [&#39;xAxis&#39;, &#39;yAxis&#39;, &#39;series&#39;] }); } // Inicializando o scatter plot chartFrameSwitch0(); // Botões para alternar entre gráficos const scatterClick = document.getElementsByClassName(&#39;scatterBttn&#39;)[0]; const barClick = document.getElementsByClassName(&#39;barBttn&#39;)[0]; scatterClick.addEventListener(&#39;click&#39;, chartFrameSwitch0); barClick.addEventListener(&#39;click&#39;, chartFrameSwitch1); &lt;/script&gt;</code></pre> </div> </div> <p></p> <p>如何进行此调整？</p> </question> <answer tick="false" vote="0"> <p>[待删除的简介]我花了一些时间才找出问题所在；然而，解决方案非常简单。此问题和类似问题所需的基本信息是：</p> <p>通过 <pre><code>dataset</code></pre> 指定数据的系列内的数据点（如问题中的情况）可以分为几组，以便基于 <strong><pre><code>encode.itemGroupId</code></pre></strong> 在 UniversalTransition 中进行匹配； 没有 <pre><code>encode.dataGroupId</code></pre>（不使用单个数据点的 <pre><code>dataGroupId</code></pre>）- <a href="https://echarts.apache.org/en/option.html#series-line.dataGroupId" rel="nofollow noreferrer"><pre><code>dataGroupId</code></pre></a> 是 <pre><code>series</code></pre> 的属性，用于标识系列中的所有数据项。</p> <p>如果 <pre><code>data</code></pre> 直接在系列内部指定，而不是通过 <pre><code>dataset</code></pre>，那么每个数据点都是一个对象，则应出于相同目的为每个点显式设置 <pre><code>groupId</code></pre>；更多信息请参阅 <a href="https://echarts.apache.org/en/option.html#series-line.data.groupId" rel="nofollow noreferrer">groupId 的文档</a>。</p> <p>将 <pre><code>encode.dataGroupId</code></pre> 更改为 <pre><code>encode.itemGroupId</code></pre> 的原始片段：</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>function chartSystem() { return { genderData: [ [&#39;x&#39;, &#39;y&#39;, &#39;dataGroupId&#39;], [150, 45, &#39;male&#39;], [160, 50, &#39;male&#39;], [170, 55, &#39;male&#39;], [180, 60, &#39;male&#39;], [160, 65, &#39;female&#39;], [170, 70, &#39;female&#39;], [180, 75, &#39;female&#39;], [190, 80, &#39;female&#39;] ], barData: [ [&#39;Title&#39;, &#39;values&#39;, &#39;itemGroupId&#39;], [&#39;Male&#39;, 56, &#39;male&#39;], [&#39;Female&#39;, 88, &#39;female&#39;] ] }; } let pullDataset = null; let pullData = null; function chartSend() { const dfInit = chartSystem(); // Definindo dataset consolidado pullDataset = [ { source: dfInit.genderData, sourceHeader: true }, { source: dfInit.barData, sourceHeader: true } ]; // Preparando os dados para o gráfico de barras pullData = [ { data: dfInit.barData.slice(1).map(item =&gt; ({ name: item[0], value: item[1] })) } ]; } chartSend(); const chartUse = echarts.init(document.getElementsByClassName(&#34;chart&#34;)[0]); // Configuração do scatter plot com `groupId` // Configuração do scatter plot com `dataGroupId` function chartFrameSwitch0() { const xAxis0 = { scale: true }; const yAxis0 = { scale: true }; const series0 = { type: &#39;scatter&#39;, datasetIndex: 0, encode: { x: 0, // Coluna &#39;x&#39; no dataset y: 1, // Coluna &#39;y&#39; no dataset itemGroupId: 2, }, universalTransition: { enabled: true, delay: function (idx, count) { return Math.random() * 400; } }, itemStyle: { color: function (params) { // Cor dinâmica baseada no dataGroupId return params.data[2] === &#39;male&#39; ? &#39;#1e90ff&#39; : &#39;#ff69b4&#39;; } } }; const option = { dataset: [pullDataset[0]], // Dataset consolidado xAxis: [xAxis0], yAxis: [yAxis0], series: [series0] }; chartUse.setOption(option, { replaceMerge: [&#39;xAxis&#39;, &#39;yAxis&#39;, &#39;series&#39;] }); } // Configuração do gráfico de barras function chartFrameSwitch1() { const xAxis0 = { type: &#39;category&#39; }; const yAxis0 = { type: &#39;value&#39; }; const series0 = { type: &#39;bar&#39;, datasetIndex: 0, encode: { x: 0, y: 1, itemGroupId: 2 }, itemStyle: { color: function (params) { const colors = [&#39;#1e90ff&#39;, &#39;#ff69b4&#39;]; return colors[params.dataIndex]; } }, universalTransition: { enabled: true, divideShape: &#39;split&#39;, delay: function (idx, count) { return Math.random() * 400; } } }; const option = { dataset: [pullDataset[1]], xAxis: [xAxis0], yAxis: [yAxis0], series: [series0] }; // console.log(&#39;option = &#39; + JSON.stringify(option, null, 3)) chartUse.setOption(option, {replaceMerge: [&#39;xAxis&#39;, &#39;yAxis&#39;, &#39;series&#39;]}); // const option2 = chartUse.getOption(); // console.log(&#39;option2 = &#39; + JSON.stringify(option2, null, 3)) } // Inicializando o scatter plot chartFrameSwitch0(); // Botões para alternar entre gráficos const scatterClick = document.getElementsByClassName(&#39;scatterBttn&#39;)[0]; const barClick = document.getElementsByClassName(&#39;barBttn&#39;)[0]; scatterClick.addEventListener(&#39;click&#39;, chartFrameSwitch0); barClick.addEventListener(&#39;click&#39;, chartFrameSwitch1);</code></pre> <pre><code>.chart { width: 700px; height: 430px; margin: 0 auto; }</code></pre> <pre><code>&lt;button class=&#39;barBttn&#39;&gt;Bar Chart&lt;/button&gt; &lt;button class=&#39;scatterBttn&#39;&gt;Scatter Chart&lt;/button&gt; &lt;div class=&#34;chart&#34;&gt;&lt;/div&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js&#34;&gt;&lt;/script&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

有没有办法使用“选择”类型的缩放而不显示工具栏？

我想一直使用工具栏中的“缩放光标”。然后使用双击缩小。到目前为止我已经成功地实现了所有这些。我想做的最后一件事就是...

为什么系列编码值与任何数据集都不匹配时，echarts 仍然渲染？

我正在尝试使用数据集选项来渲染echart。但我发现了一个奇怪的案例。即使我的系列编码值与数据集的任何维度都不匹配，图表仍然呈现，这是一个错误还是我......