百度的商业图表解决方案，最初旨在满足公司各种业务系统的报告需求。
单击按钮后，我会显示图表。首次实例化图表时，会在图表的父容器上设置 ResizeObserver。我的应用程序有一个可折叠的侧边栏，当我折叠时......
使用 highcharts 制作图表示例 我在使用 Echarts 和 ngx-echarts 制作类似的图表时遇到困难，有人也经历过这种情况吗？ 使用 “@Angular/animations&quo...
我正在使用Echarts实现这样一个图表，一个x轴代表时间，多个y轴代表不同的信号 我使用多网格，每个网格包含一个折线图，一切都很好，例外...
我需要更新series.data中的两个参数，名称和值。问题是我无法以正式的方式分离这个更新。我什至设法做到这一点，例如，通过创建另一个
Apache Echarts - 自定义 Echarts 中网络图的节点悬停的节点形状和值
我有两个关于自定义echarts网络图的节点和边的问题：- 我们如何将节点的形状从圆形更改为方形？ 我们如何在节点悬停时显示自定义数据
Edge 与 Chrome 中的 Apache Echarts GPU 内存消耗
我正在使用 Apache ECharts（画布渲染器）绘制 25 个系列的基本折线图，每个系列 100 个数据点（总共 2500 个数据点）。在 Edge 中，这会使我的 GPU 内存消耗增加约 1GB...
Apache Echarts 无法工作。错误-图例数据应与系列名称或数据名称相同
Apache Echarts 无法工作。错误 - 图例数据应与系列名称或数据名称相同。 即使我的系列名称和图例数据中的名称匹配，它也会给出上述错误......
Apache eCharts Angular 在堆栈上绘制标记线
我有一个折线图，其中的 markLine 显示当前日期。不幸的是，该行显示在其他堆栈系列的下方。设置 zLevel 也没有帮助。 { // .. 其他配置
我正在使用 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><script setup lang="ts"> import VChart from 'vue-echarts' import { use } from 'echarts/core' import { GaugeChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' use([GaugeChart, CanvasRenderer]) const roundCap = true const width = 12 const option = { series: [ { type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 100, itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 1, colorStops: [ { offset: 0, color: '#E02F1E' }, { offset: 0.1, color: '#E53C2B' }, { offset: 0.2, color: '#ED7936' }, { offset: 0.3, color: '#F19C3C' }, { offset: 0.41, color: '#E9AD3C' }, { offset: 0.52, color: '#E0BF3C' }, { offset: 0.63, color: '#BCBC33' }, { offset: 0.72, color: '#75B520' }, { offset: 0.86, color: '#29AE0C' }, { offset: 1, color: '#01AA01' } ] } }, progress: { show: true, roundCap, width }, axisLine: { roundCap, lineStyle: { width } }, data: [{ value: 100 }] } ] } </script> <template> <VChart :option /> </template> </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>
如果缩放中没有值，Apache Echarts 会隐藏 y 轴（垂直）条目
如果我们有这种图表类型（配置文件） https://echarts.apache.org/examples/en/editor.html?c=custom-profile&random=b 我无法找到任何有关如何放大到某个部分的文档...
在角度15中为ngx-echarts启用Treeshaking
我正在尝试在 Angx-echarts 的 Angular 15 独立组件中使用 Treeshaking。我遵循了文档，但摇树似乎不起作用。 任何人都可以帮忙吗？ 我已经尝试过两种定制构建...
通过HTTP API（Json）在Grafana中绑定Apache EChart
我们正在审查 Apache ECharts 与 Grafana 的集成。 我们已经成功地集成了大多数图表类型，但我们仍然坚持使用“树形图”。 我们见过这样的例子：https://echarts.volkovlabs....
更新时间序列数据时如何保持当前数据缩放？我有一个图表，每 1 分钟更新一次数据，但每次更新数据时数据缩放都会重置为 100。还有...
如何设置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><script setup lang="ts"> import { use } from 'echarts/core' import { GaugeChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' import VChart from 'vue-echarts' use([GaugeChart, CanvasRenderer]) const option = { series: [ { type: 'gauge', startAngle: 180, endAngle: 0, radius: '100%', detail: { width: '60%', // default 100 lineHeight: 40, // default 30 offsetCenter: [0, -12], formatter: (value) => `{value|${value}}`, rich: { value: { fontSize: 40 } } }, data: [{ value: 58.2 }] } ] } </script> <template> <VChart style="width: 600px; height: 400px" :option /> </template> </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><script setup lang="ts"> import { use } from 'echarts/core' import { GaugeChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' import VChart from 'vue-echarts' use([GaugeChart, CanvasRenderer]) const option = { series: [ { type: 'gauge', startAngle: 180, endAngle: 0, radius: '100%', detail: { offsetCenter: [0, -8], formatter: (value) => `{value|${value}}`, rich: { value: { fontSize: 24 } } }, data: [{ value: 58.2 }] } ] } </script> <template> <VChart style="width: 150px; height: 150px" :option /> </template> </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: "gauge", // 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: ["50%", "50%"], // 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: "100%", // default: 75% // ... }, ], renderer: "svg", }; </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>
我正在使用 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><script setup lang="ts"> import { use } from 'echarts/core' import { GaugeChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' import VChart from 'vue-echarts' use([GaugeChart, CanvasRenderer]) const option = { ... } </script> <template> <VChart style="width: 600px; height: 400px" :option /> </template> </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: "gauge", // 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: ["50%", "50%"], // 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: "100%", // ... }, ], renderer: "svg", }; </code></pre> </answer> </body></html>
在 pyecharts 中，我创建了一个网格，其中两个图形具有相同的 x 轴。我希望能够使用鼠标滚轮同时缩放两者。它使用 datazoom_opts=[opts.
在eCharts中，如何修改以下选项以在图表中显示多条线？我想要的是一条生产“抹茶拿铁”的生产线和一条生产“奶酪可可”的生产线？我会...
工具提示位置跟随鼠标并仅显示一次类别数据 - Apache ECharts
如何使工具提示跟随鼠标（出现在其旁边）并且工具提示仅显示categoryData（DateTimes）一次，目前显示3次。还有一个小问题，我有 2 卷系列...
markArea 是使用 echarts 显示日期垂直标记的正确工具吗？
我试图在echarts中显示事件何时发生，例如markArea，但似乎不适合此目的。 markArea 绑定到一个系列，我想要显示的事件不链接到任何
如何更改echart箱线图上的x轴标签？在示例中，绘制了 5 个数据集，我需要能够为它们提供自己的 x 轴值/标签。我更习惯使用