echarts 相关问题

百度的商业图表解决方案,最初旨在满足公司各种业务系统的报告需求。

Apache Echarts:有整体图表吗?

我想创建一个这样的图表: 我检查了示例:https://echarts.apache.org/examples/en 但找不到类似的东西。 有人用 Echarts 实现过这样的事情吗?

回答 1 投票 0

从 api 获取数据时恢复选项不起作用

我在 Angular 16 项目中使用 echarts。初始化数据为空,并填充来自 api 的数据。 当使用缩放选项然后恢复图表时,图表为空(初始状态)并且未填充 api 调用。 如何

回答 1 投票 0

Apache EChart SplitNumber 未按预期工作

我相信这可能是由于我对echart的xAxis和yAxis splitNumber变量的误解造成的。 如果你看一下我这里的例子,xAxis 和 splitNumber 为 10,我有 15

回答 1 投票 0

ResizeObserver 只能调整元素大小一次

单击按钮后,我会显示图表。首次实例化图表时,会在图表的父容器上设置 ResizeObserver。我的应用程序有一个可折叠的侧边栏,当我折叠时......

回答 1 投票 0

Echarts 时间轴,Angular 中包含 3 个类别

使用 highcharts 制作图表示例 我在使用 Echarts 和 ngx-echarts 制作类似的图表时遇到困难,有人也经历过这种情况吗? 使用 “@Angular/animations&quo...

回答 1 投票 0

是否可以在多个网格中共享相同的xAxis

我正在使用Echarts实现这样一个图表,一个x轴代表时间,多个y轴代表不同的信号 我使用多网格,每个网格包含一个折线图,一切都很好,例外...

回答 1 投票 0

在同一个参数中分别更新两个参数(ECHARTS)

我需要更新series.data中的两个参数,名称和值。问题是我无法以正式的方式分离这个更新。我什至设法做到这一点,例如,通过创建另一个

回答 1 投票 0

Apache Echarts - 自定义 Echarts 中网络图的节点悬停的节点形状和值

我有两个关于自定义echarts网络图的节点和边的问题:- 我们如何将节点的形状从圆形更改为方形? 我们如何在节点悬停时显示自定义数据

回答 1 投票 0

Edge 与 Chrome 中的 Apache Echarts GPU 内存消耗

我正在使用 Apache ECharts(画布渲染器)绘制 25 个系列的基本折线图,每个系列 100 个数据点(总共 2500 个数据点)。在 Edge 中,这会使我的 GPU 内存消耗增加约 1GB...

回答 1 投票 0

Apache Echarts 无法工作。错误-图例数据应与系列名称或数据名称相同

Apache Echarts 无法工作。错误 - 图例数据应与系列名称或数据名称相同。 即使我的系列名称和图例数据中的名称匹配,它也会给出上述错误......

回答 2 投票 0

Apache eCharts Angular 在堆栈上绘制标记线

我有一个折线图,其中的 markLine 显示当前日期。不幸的是,该行显示在其他堆栈系列的下方。设置 zLevel 也没有帮助。 { // .. 其他配置

回答 1 投票 0

如何正确设置vue-echart仪表的梯度?

我正在使用 vue-echarts 并创建了以下组件: 从“vue-echarts”导入 VChart 从 'echarts/core' 导入 { use } 从'ech导入{GaugeChart}...</desc> <question vote="0"> <p>我正在使用 <a href="https://github.com/ecomfe/vue-echarts" rel="nofollow noreferrer">vue-echarts</a> 并且创建了以下组件:</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import VChart from &#39;vue-echarts&#39; import { use } from &#39;echarts/core&#39; import { GaugeChart } from &#39;echarts/charts&#39; import { CanvasRenderer } from &#39;echarts/renderers&#39; use([GaugeChart, CanvasRenderer]) const roundCap = true const width = 12 const option = { series: [ { type: &#39;gauge&#39;, startAngle: 180, endAngle: 0, min: 0, max: 100, itemStyle: { color: { type: &#39;linear&#39;, x: 0, y: 1, x2: 1, y2: 1, colorStops: [ { offset: 0, color: &#39;#E02F1E&#39; }, { offset: 0.1, color: &#39;#E53C2B&#39; }, { offset: 0.2, color: &#39;#ED7936&#39; }, { offset: 0.3, color: &#39;#F19C3C&#39; }, { offset: 0.41, color: &#39;#E9AD3C&#39; }, { offset: 0.52, color: &#39;#E0BF3C&#39; }, { offset: 0.63, color: &#39;#BCBC33&#39; }, { offset: 0.72, color: &#39;#75B520&#39; }, { offset: 0.86, color: &#39;#29AE0C&#39; }, { offset: 1, color: &#39;#01AA01&#39; } ] } }, progress: { show: true, roundCap, width }, axisLine: { roundCap, lineStyle: { width } }, data: [{ value: 100 }] } ] } &lt;/script&gt; &lt;template&gt; &lt;VChart :option /&gt; &lt;/template&gt; </code></pre> <p>当我使用该组件时,这就是结果(看起来不错):</p> <p><a href="https://i.sstatic.net/QV7EUDnZ.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvUVY3RVVEbloucG5n" alt="enter image description here"/></a></p> <p>但是当值减小时,这就是丑陋的结果:</p> <p><a href="https://i.sstatic.net/veZPjqo7.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvdmVaUGpxbzcucG5n" alt="enter image description here"/></a></p> <p>我的配置中肯定缺少一些东西,你知道我该如何修复外观吗?</p> </question> <answer tick="false" vote="0"> <p>您可以查看官方文档作为案例研究。 <a href="https://echarts.apache.org/examples/zh/index.html#chart-type-funnel" rel="nofollow noreferrer">https://echarts.apache.org/examples/zh/index.html#chart-type-funnel</a></p> </answer> </body></html>

回答 0 投票 0

如果缩放中没有值,Apache Echarts 会隐藏 y 轴(垂直)条目

如果我们有这种图表类型(配置文件) https://echarts.apache.org/examples/en/editor.html?c=custom-profile&random=b 我无法找到任何有关如何放大到某个部分的文档...

回答 1 投票 0

在角度15中为ngx-echarts启用Treeshaking

我正在尝试在 Angx-echarts 的 Angular 15 独立组件中使用 Treeshaking。我遵循了文档,但摇树似乎不起作用。 任何人都可以帮忙吗? 我已经尝试过两种定制构建...

回答 1 投票 0

通过HTTP API(Json)在Grafana中绑定Apache EChart

我们正在审查 Apache ECharts 与 Grafana 的集成。 我们已经成功地集成了大多数图表类型,但我们仍然坚持使用“树形图”。 我们见过这样的例子:https://echarts.volkovlabs....

回答 1 投票 0

更新时间序列时如何保持当前缩放?阿帕奇 Echarts

更新时间序列数据时如何保持当前数据缩放?我有一个图表,每 1 分钟更新一次数据,但每次更新数据时数据缩放都会重置为 100。还有...

回答 1 投票 0

如何设置vue-echart的宽度和高度? (不是画布宽度和高度)

我正在使用 vue-echarts 并创建了以下组件: 从 'echarts/core' 导入 { use } 从 'echarts/charts' 导入 { GaugeChart } 导入 { CanvasRende...</desc> <question vote="1"> <p>我正在使用 <a href="https://github.com/ecomfe/vue-echarts" rel="nofollow noreferrer">vue-echarts</a> 并且创建了以下组件:</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import { use } from &#39;echarts/core&#39; import { GaugeChart } from &#39;echarts/charts&#39; import { CanvasRenderer } from &#39;echarts/renderers&#39; import VChart from &#39;vue-echarts&#39; use([GaugeChart, CanvasRenderer]) const option = { series: [ { type: &#39;gauge&#39;, startAngle: 180, endAngle: 0, radius: &#39;100%&#39;, detail: { width: &#39;60%&#39;, // default 100 lineHeight: 40, // default 30 offsetCenter: [0, -12], formatter: (value) =&gt; `{value|${value}}`, rich: { value: { fontSize: 40 } } }, data: [{ value: 58.2 }] } ] } &lt;/script&gt; &lt;template&gt; &lt;VChart style=&#34;width: 600px; height: 400px&#34; :option /&gt; &lt;/template&gt; </code></pre> <p>当我使用该组件时,结果如下: <a href="https://i.sstatic.net/65g2f0hB.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvNjVnMmYwaEIucG5n" alt="enter image description here"/></a></p> <p>如您所见,仪表图的周长比其容器(画布)小得多。因为我想在其他地方使用这个组件,所以我不需要所有这些空白。有没有办法指定图表必须采用的确切宽度和高度?</p> <p><strong>编辑#1</strong></p> <p>经过一些尝试和错误,我终于达到了这一点:</p> <p><a href="https://i.sstatic.net/XHWE85cg.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvWEhXRTg1Y2cucG5n" alt="enter image description here"/></a></p> <p>现在仪表图看起来正是我想要的样子,唯一的问题是额外的底部空间,这使得它比实际高度更高。 因为我想在周围使用这个组件(并对齐它),所以我不能将它与这个额外的底部空间一起使用。有没有办法去除它而不影响它现在的外观?</p> <p>更新代码:</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import { use } from &#39;echarts/core&#39; import { GaugeChart } from &#39;echarts/charts&#39; import { CanvasRenderer } from &#39;echarts/renderers&#39; import VChart from &#39;vue-echarts&#39; use([GaugeChart, CanvasRenderer]) const option = { series: [ { type: &#39;gauge&#39;, startAngle: 180, endAngle: 0, radius: &#39;100%&#39;, detail: { offsetCenter: [0, -8], formatter: (value) =&gt; `{value|${value}}`, rich: { value: { fontSize: 24 } } }, data: [{ value: 58.2 }] } ] } &lt;/script&gt; &lt;template&gt; &lt;VChart style=&#34;width: 150px; height: 150px&#34; :option /&gt; &lt;/template&gt; </code></pre> </question> <answer tick="false" vote="2"> <p>使用 <a href="https://echarts.apache.org/en/option.html#series-gauge.center" rel="nofollow noreferrer"><pre><code>series.center</code></pre></a> 属性,您可以将图表放置在容器内。您可以使用 <a href="https://echarts.apache.org/en/option.html#series-gauge.radius" rel="nofollow noreferrer"><pre><code>series.radius</code></pre></a> 设置相对于容器大小动态缩放它。</p> <pre><code>const option = { series: [ { type: &#34;gauge&#34;, // https://echarts.apache.org/en/option.html#series-gauge.center // can set the position of the chart center using X and Y coordinates in the series.center property center: [&#34;50%&#34;, &#34;50%&#34;], // default: [50%, 50%] // https://echarts.apache.org/en/option.html#series-gauge.radius // can be a percentage value of the smaller of container half width and half height, also can be an absolute value radius: &#34;100%&#34;, // default: 75% // ... }, ], renderer: &#34;svg&#34;, }; </code></pre> <p><a href="https://codesandbox.io/p/devbox/vue-echarts-svg-resize-3fnhdw?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvxruox800073j6gj0a2m6hk%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvxruox600023j6guzvv516d%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvxruox800043j6g1w48sey8%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvxruox800063j6gaen6whl7%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvxruox600023j6guzvv516d%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvxruox600013j6gnohaypyy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522clvxruox600023j6guzvv516d%2522%252C%2522activeTabId%2522%253A%2522clvxruox600013j6gnohaypyy%2522%257D%252C%2522clvxruox800063j6gaen6whl7%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvxruox800053j6guudtqneq%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522pnpm%2520run%2520dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvxruox800063j6gaen6whl7%2522%252C%2522activeTabId%2522%253A%2522clvxruox800053j6guudtqneq%2522%257D%252C%2522clvxruox800043j6g1w48sey8%2522%253A%257B%2522id%2522%253A%2522clvxruox800043j6g1w48sey8%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvxruox700033j6glpsh7si1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522pnpm%2520run%2520dev%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clvxruox700033j6glpsh7si1%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D" rel="nofollow noreferrer">示例 -codesandbox.io</a></p> </answer> </body></html>

回答 0 投票 0

如何设置vue-echart的宽度和高度? (不是画布)

我正在使用 vue-echarts 并创建了以下组件: 从 'echarts/core' 导入 { use } 从 'echarts/charts' 导入 { GaugeChart } 导入 { CanvasRende...</desc> <question vote="0"> <p>我正在使用 <a href="https://github.com/ecomfe/vue-echarts" rel="nofollow noreferrer">vue-echarts</a> 并且创建了以下组件:</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import { use } from &#39;echarts/core&#39; import { GaugeChart } from &#39;echarts/charts&#39; import { CanvasRenderer } from &#39;echarts/renderers&#39; import VChart from &#39;vue-echarts&#39; use([GaugeChart, CanvasRenderer]) const option = { ... } &lt;/script&gt; &lt;template&gt; &lt;VChart style=&#34;width: 600px; height: 400px&#34; :option /&gt; &lt;/template&gt; </code></pre> <p>当我使用该组件时,结果如下: <a href="https://i.sstatic.net/wZxWK9Y8.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvd1p4V0s5WTgucG5n" alt="enter image description here"/></a></p> <p>遵守指定的宽度和高度,但图表要小得多。我需要它具有精确的宽度和高度,我该怎么做?</p> </question> <answer tick="false" vote="0"> <p>使用 <a href="https://echarts.apache.org/en/option.html#series-gauge.center" rel="nofollow noreferrer"><pre><code>series.center</code></pre></a> 属性,您可以将图表放置在容器内。您可以使用 <a href="https://echarts.apache.org/en/option.html#series-gauge.radius" rel="nofollow noreferrer"><pre><code>series.radius</code></pre></a> 设置相对于容器大小动态缩放它。</p> <pre><code>const option = { series: [ { type: &#34;gauge&#34;, // https://echarts.apache.org/en/option.html#series-gauge.center // can set the position of the chart center using X and Y coordinates in the series.center property center: [&#34;50%&#34;, &#34;50%&#34;], // https://echarts.apache.org/en/option.html#series-gauge.radius // radius of gauge chart. It can be a percentage value of the smaller of container half width and half height, also can be an absolute value radius: &#34;100%&#34;, // ... }, ], renderer: &#34;svg&#34;, }; </code></pre> </answer> </body></html>

回答 0 投票 0

pyecharts网格图共轮缩放

在 pyecharts 中,我创建了一个网格,其中两个图形具有相同的 x 轴。我希望能够使用鼠标滚轮同时缩放两者。它使用 datazoom_opts=[opts.

回答 1 投票 0

如何使用encode在eCharts中显示多行?

在eCharts中,如何修改以下选项以在图表中显示多条线?我想要的是一条生产“抹茶拿铁”的生产线和一条生产“奶酪可可”的生产线?我会...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.